Flutter 默认字体大小

Question

我想为 Flutter 中的 Text 小部件设置默认字体大小。 我知道我可以在主题中设置默认字体系列，但没有默认字体大小参数。

我只是想知道我的自定义小部件是实现得好还是我做错了方法？

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;
}

谢谢

Answer 1

我通过覆盖材料文本主题找到了默认字体大小的更好方法。

参考：https://api.flutter.dev/flutter/material/TextTheme-class.html

例如： body1 用于普通文本小部件 所以对于所有文本小部件的红色

 theme: ThemeData(
        textTheme: TextTheme(body1: TextStyle(backgroundColor: Colors.red))
      )

结果：

Answer 2

Flutter 主题定义的不是一种，而是多种默认字体大小。使用的大小取决于情况，例如Text 小部件通常使用body 样式，但如果在按钮内部使用相同的小部件将使用button 样式。

我找到了两种增加 Flutter 应用程序所有字体大小的方法。

简单解决方案：调整默认主题

MaterialApp(
  theme: ThemeData(
    textTheme: Theme.of(context).textTheme.apply(
          fontSizeFactor: 1.1,
          fontSizeDelta: 2.0,
        ),
  ),
  ...
);

生成的字体大小为 (originalSize * fontSizeFactor + fontSizeDelta)。所以在上面的例子中，所有的字体大小都增加了 10%，然后又增加了 2。

控制更多的解决方案：手动定义所有尺寸

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

样式的完整列表可以在https://api.flutter.dev/flutter/material/TextTheme-class.html找到。

Answer 3

你应该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

扩展 amorenew 的答案。

您可以在 MaterialApp() Widget 中设置 fontSize。但是请注意，它不适用于所有小部件，例如 Flatbutton 和 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)),
        ...
   );
  }
}

因此，如果您希望样式也适用于 FlatButton：

FlatButton(
   child:
      Text("my text",
         style: Theme.of(context).textTheme.body1,
      )
);

而且，如果您希望 fontSize 与其他特定样式一起应用：

FlatButton(
   child:
      Text("my text",
         style:
            TextStyle(
               fontWeight: FontWeight.bold,
               color: Colors.black,
            fontSize: Theme.of(context).textTheme.body1.fontSize
            )
      )
);

Answer 5

有几种可能：

1- 使用DefaultTextStyle 小部件：

只需将此小部件用作父级
示例：

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

输出：

我不再需要为此 Text 小部件定义样式，因为它 将默认为 DefaultTextStyle 小部件样式。

另请参见：
AnimatedDefaultTextStyle，它在给定的持续时间内平滑地动画文本样式的变化。
DefaultTextStyleTransition, 采用提供的动画来动画文本样式的变化随着时间的推移顺利。

2-使用预定义的textTheme：

事实上，您所要做的就是选择一个预定义的 textTheme 并使用或修改它： 每个 textTheme 都有一个预定义的 TextStyle，您可以直接使用或在使用前进行修改。
这里是预定义的 textTheme 列表：

 headline1, headline2, headline3, headline4, headline5, headline6, subtitle1, subtitle2, bodyText1, bodyText2, caption, button, overline, display4, display3, display2, display1, headline, title, subhead, subtitle, body2, body1

用法：

Text('Hello World' , style: Theme.of(context).textTheme.headline6,),

输出：

你也可以改变这个TextStyle的值，然后重用它。

修改：

把它放在你的MaterialApp 小部件中。

theme: ThemeData(
        textTheme: TextTheme(
          headline6: TextStyle(fontSize: 15 , color: Colors.blue),
          bodyText1: TextStyle(backgroundColor: Colors.red , color: Colors.blue) ,
          )
      ),

输出：

我的代码是here
了解更多关于 TextTheme here 的信息。

Answer 6

您应该使用DefaultTextStyle 小部件作为父小部件

应用于没有明确样式的后代文本小部件的文本样式

使用示例：

return DefaultTextStyle(
              style: TextStyle(fontSize: 42, color: Colors.blue),
              child: (...)
);

More details in official documentation

Answer 7

fontSize:styleCustom.fontSize!=null ? styleCustom.fontSize:10),## 你做得对，除非你有默认值，比如字体大小，但你想覆盖它##