Flutter default font size - dart

Question

I want to have a default font size to the Text widget in Flutter.
I know that I can set default font family in theme but there is no default font size parameter.
I just wonder if my custom widget is implemented well or I did it wrong approach?
import 'package:flutter/material.dart';
/// Custom Text with a default font Monospace and a default font size.
class CustomText extends Text {
/// Custom Text Constructor extend of Text constructor.
CustomText(this.dataCustom,
{this.styleCustom = const TextStyle(), this.textAlignCustom})
: super(dataCustom,
style: styleCustom.copyWith(fontFamily: 'Monospace', fontSize: 12),
textAlign: textAlignCustom);
/// The text to display.
///
/// This will be null if a [textSpan] is provided instead.
final String dataCustom;
/// If non-null, the style to use for this text.
///
/// If the style's "inherit" property is true, the style will be merged with
/// the closest enclosing [DefaultTextStyle]. Otherwise, the style will
/// replace the closest enclosing [DefaultTextStyle].
final TextStyle styleCustom;
/// How the text should be aligned horizontally.
final TextAlign textAlignCustom;
}
Thanks

Answer 1

A Flutter theme defines not one, but many default font sizes. The size used depends on the situation, e.g. a Text widget would normally use body style, but the same widget would use button style if used inside of a button.
I found two ways to increase all font sizes across a Flutter application.
Simple solution: adjust the default theme
MaterialApp(
theme: ThemeData(
textTheme: Theme.of(context).textTheme.apply(
fontSizeFactor: 1.1,
fontSizeDelta: 2.0,
),
),
...
);
The resulting font size is (originalSize * fontSizeFactor + fontSizeDelta). So in the example above all font sizes are increased by 10% and then additionally by 2.
Solution with more control: define all sizes by hand
MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
bodyText1: TextStyle(fontSize: 18.0),
bodyText2: TextStyle(fontSize: 16.0),
button: TextStyle(fontSize: 16.0),
... // and so on for every text style
),
),
...
);
The full list of styles can be found at https://api.flutter.dev/flutter/material/TextTheme-class.html.

Answer 2

I found a better way for default font size by overriding the material text theme.
Reference: https://api.flutter.dev/flutter/material/TextTheme-class.html
For example:
body1 is for normal Text widgets
so for the red color to all Text widgets
theme: ThemeData(
textTheme: TextTheme(body1: TextStyle(backgroundColor: Colors.red))
)
Result:

Answer 3

You should prefer composition over inheritance.
class Mono12Text extends StatelessWidget {
final String data;
final TextAlign align;
final TextStyle style;
Mono12Text(
this.data, {
this.align,
TextStyle style = const TextStyle(),
}) : style = style.copyWith(
fontFamily: 'Monospace',
fontSize: 12,
);
#override
Widget build(BuildContext context) {
return Text(
data,
textAlign: align,
style: style,
);
}
}

Answer 4

Expanding a bit on amorenew's answer.
You can set the fontSize inside the the MaterialApp() Widget. However note that it will not work inside all widgets, for example Flatbutton and ExpansionTile.
void main() {
runApp(myApp());
}
class myApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "My Flutter App",
theme: ThemeData(
textTheme: TextTheme(body1: TextStyle(fontSize: 20.0)),
...
);
}
}
So if you want the style to be applied also to a FlatButton:
FlatButton(
child:
Text("my text",
style: Theme.of(context).textTheme.body1,
)
);
And, if you want the fontSize to be applied with other specific styles:
FlatButton(
child:
Text("my text",
style:
TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: Theme.of(context).textTheme.body1.fontSize
)
)
);

Answer 5

There are several possibilities:
1- Using the DefaultTextStyle widget :
Just use this widget as a parent
Example :
DefaultTextStyle(
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
),
child: Text('Hello World') // I don't need to define a style for this Text widget anymore
),
Output :
I don't need to define a style for this Text widget anymore because it
will default to the DefaultTextStyle widget style.
See also:
AnimatedDefaultTextStyle, which animates changes in the text style smoothly over a given duration.
DefaultTextStyleTransition, which takes a provided Animation to animate changes in text style smoothly over time.
2- The use of the predefined textTheme :
In fact, all you have to do is choose a predefined textTheme and use or modify it :
Each textTheme has a predefined TextStyle that you can use directly or modify before using it.
Here is the list of the predefined textTheme :
headline1, headline2, headline3, headline4, headline5, headline6, subtitle1, subtitle2, bodyText1, bodyText2, caption, button, overline, display4, display3, display2, display1, headline, title, subhead, subtitle, body2, body1
Usage:
Text('Hello World' , style: Theme.of(context).textTheme.headline6,),
Output :
You can also change the value of this TextStyle and then reuse it.
Modification :
Put it in your MaterialApp widget .
theme: ThemeData(
textTheme: TextTheme(
headline6: TextStyle(fontSize: 15 , color: Colors.blue),
bodyText1: TextStyle(backgroundColor: Colors.red , color: Colors.blue) ,
)
),
Output :
My code is here
Learn more about TextTheme here .

Answer 6

You should use DefaultTextStyle widget as a parent widget
The text style to apply to descendant Text widgets which don't have an explicit style
Example on how to use:
return DefaultTextStyle(
style: TextStyle(fontSize: 42, color: Colors.blue),
child: (...)
);
More details in official documentation

Answer 7

fontSize:styleCustom.fontSize!=null ? styleCustom.fontSize:10),## you did right except situations which you have default value like font size but you want override it ##