how to change font size of flutter material button?
There are 2 ways to define Font size
1) Inline set random font size like a newie to Flutter
Text('item ${++index}', style: TextStyle(
color: Colors.green,
fontSize: 32)
2) Use Predefined Typography Font Sizes from Apps Material Theme
This is a much better approach. This way you can define font sizes in one place and it will apply automatically in your entire Application.
Text('item ${++index}', style: TextStyle(
color: Colors.green,
fontSize: Theme
.of(context)
.textTheme
.headline1?.fontSize?? 32
)
Define Global Theme class :
import 'package:flutter/material.dart';
// Global Theme For App
class AppTheme {
ThemeData buildThemeData() {
return ThemeData(
// Global Color Style
primarySwatch: Colors.blueGrey,
primaryColor: Colors.blueGrey[800],
accentColor: Colors.tealAccent,
// Global Text Style
textTheme: TextTheme(
headline1: TextStyle(
fontSize: 72.0,
fontWeight: FontWeight.bold,
fontFamily: 'Cutive',
),
headline6: TextStyle(fontSize: 36.0),
bodyText2: TextStyle(fontSize: 14.0),
));
}
}
Now Apply it in Entry point of App:
import 'package:flutter/material.dart';
import 'theme.dart';
import './widgets/home.dart';
void main() {
runApp(MainApp());
}
// This widget is the root of your application.
class MainApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: AppTheme().buildThemeData(),
home: MyStatelessWidget(),
);
}
}
The third Approach I use is I define components I gonna use anyways for header, label, etc and reuse them
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
class Header extends StatelessWidget {
Header({
required this.title,
});
final String title;
@override
Widget build(BuildContext context) {
return Text(
title,
style: TextStyle(
fontSize: 32,
foreground: Paint()
..shader = ui.Gradient.linear(
const Offset(0, 10),
const Offset(40, 20),
<Color>[
Colors.red,
Colors.blue,
],
)),
);
}
}
This way setting header in all widget reduce to 1 line:
Header(title: "Hello World"),
The widget architecture in Flutter makes this very simple: The child of the MaterialButton
is a Text
widget, which can be styled with its style
property:
new MaterialButton(
height: 140.0,
minWidth: double.infinity,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
child: new Text(
"material button",
style: new TextStyle(
fontSize: 20.0,
color: Colors.yellow,
),
),
onPressed: () => {},
splashColor: Colors.redAccent,
);
You can make use of the style
attribute of your Text
widget.
MaterialButton(
...
child: Text(
'material button',
style: TextStyle(
fontSize: 20.0, // insert your font size here
),
),
)