Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter default font size

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

like image 420
amorenew Avatar asked May 17 '19 22:05

amorenew


People also ask

What is the font size by default?

If a font-size has not been set on any of the <p> 's ancestors, then 1em will equal the default browser font-size , which is usually 16px . So, by default 1em is equivalent to 16px , and 2em is equivalent to 32px .

How do I fix the font size in Flutter?

You can change the font size of text in a Text Widget using style property. Create a TextStyle object with fontSize and specify this object as style for Text Widget.


1 Answers

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.

like image 174
Andrei Matveiakin Avatar answered Oct 21 '22 05:10

Andrei Matveiakin