如何在Flutter中更改整个主题的文本颜色?

时间:2018-03-09 23:36:39

标签: text colors flutter

可能有一些我很想念的东西。是否有一个属性可以更改Flutter应用中所有文本的颜色?

我现在的做法是,在我的MaterialApp:

theme: ThemeData(
    textTheme: Theme.of(context).textTheme.copyWith(
          body1:
              Theme.of(context).textTheme.body1.apply(color: Colors.pink),
          body2:
              Theme.of(context).textTheme.body2.apply(color: Colors.pink),
          display1:
              Theme.of(context).textTheme.display1.apply(color: Colors.pink),
          display2:
              Theme.of(context).textTheme.display2.apply(color: Colors.pink),
          ... // and so on
        ),
    ),
),

我也试过

textTheme: Theme.of(context).textTheme.apply(bodyColor: Colors.pink),

但这适用于Dropdown文本,而不是常规文本。同样,displayColor适用于appBar文本和InputDecoration文本,但不适用于常规文本。我的代码中似乎没有任何decorationText所以我不确定那是什么。

我注意到有一个textSelectionColor属性,但这仅适用于TextField小部件。

6 个答案:

答案 0 :(得分:26)

我认为TextTheme.apply就是你想要的。 bodyColor将应用于headlinetitlesubheadbuttonbody1body2displayColor将应用于display1display4caption。如果同时指定bodyColordisplayColor并使用相同的颜色值,则会有效地更改所有文字样式的文字颜色。

示例:

final newTextTheme = Theme.of(context).textTheme.apply(
  bodyColor: Colors.pink,
  displayColor: Colors.pink,
);

答案 1 :(得分:6)

要提供一种似乎无需直接设置所有文本样式就可以起作用的替代方法,就是在小部件树中更改DefaultTextStyle的样式以生效

return DefaultTextStyle(
  style: TextStyle(color: Colors.pink),
  child: _YOUR_WIDGETS_
)

答案 2 :(得分:2)

也许有点晚...但是您可以使用此:

ThemeData(
    primaryTextTheme: Typography(platform: TargetPlatform.iOS).white,
    textTheme: Typography(platform: TargetPlatform.iOS).white,
)

答案 3 :(得分:1)

如果要在开始时进行更改

    return MaterialApp
    (
        '''

        theme: ThemeData
        (

            canvasColor: Color(0xff30363b),
            textTheme: TextTheme
            (
               //default text style
                body1: TextStyle( color: Color(0xFFD0D6DB) ),
            ),
            backgroundColor: Color(0xff30363b),
        ),


        ,,,

    );

答案 4 :(得分:0)

对于整个应用,您可以在Material应用中设置MaterialApp( theme: ThemeData( textTheme: TextTheme( body1: TextStyle(), body2: TextStyle(), ).apply( bodyColor: Colors.orange, displayColor: Colors.blue, ), ), ) 属性。

{{1}}

答案 5 :(得分:0)

我正在为此工作:

return MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText2: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
);