how to change font size of flutter material button?

How do I change Font size of a material button... is there a better way to do this?

new MaterialButton(
height: 140.0,
minWidth: double.infinity,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
child: new Text("material button"),
onPressed: () => {},
splashColor: Colors.redAccent,
),

You can make use of the [`style` attribute of your `Text` widget](

[To see links please register here]

).

MaterialButton(
...
child: Text(
'material button',
style: TextStyle(
fontSize: 20.0, // insert your font size here
),
),
)

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,
);

## just using the official docs `TextStyle` & `fontSize`

[To see links please register here]

[To see links please register here]

> fontSize default to 14 logical pixels, double

```code
final double fontSize;

```

## demo

```code

import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home: StateApp(),
home: Scaffold(
appBar: AppBar(
title: Text("appbar"),
backgroundColor: Colors.blueAccent[700],
),
body: Center(
child: StateApp(),
),
),
);
}
}

class StateApp extends StatefulWidget {
StateApp();
@override
createState() => _StateAppState();
}

class _StateAppState extends State<StateApp> {
int _counter = 0;
_updateCounter() => setState(() {
_counter++;
});
// _updateCounter() {
// setState(() {
// _counter++;
// });
// }

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(23.0),// double
child: Text(
'You have pushed the button this many times:',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,// double
),
),
),
Center(
child: Text(
'$_counter',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 23.0,// double
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// _counter++;
print("clicked = $_counter");
// setState(() {
// _counter++;
// });
_updateCounter();
},
child: Icon(Icons.add),
),
);
}
}

```

Using `ThemeData`, you can globally set the text attributes for buttons:

```
const ColorScheme _scheme = ColorScheme.light();
const Color _primaryColor = TranscarentColors.primary;

final ThemeData theme = ThemeData(
primaryColor: _primaryColor,
textTheme: const TextTheme(
button: TextStyle(
color: Colors.white,
),
),
buttonTheme: const ButtonThemeData(
height: 140.0,
minWidth: double.infinity,
colorScheme: _scheme,
splashColor: Colors.redAccent,
buttonColor: _primaryColor,
textTheme: ButtonTextTheme.primary,
),
);
```

...which can be passed as a parameter to `MaterialApp()`

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"),

Link(
uri: Uri.parse(
'https://google.com/'),
target: LinkTarget.blank,
builder: (ctx, openLink) {
return TextButton.icon(
onPressed: openLink,
label: const Text('Google'),
icon: const Text(''),
);
},
),

> `**Blockquote**`