如何在 Flutter 中的小部件下设置所有 Text 小部件的颜色？

Question

根据this answer，我所要做的就是用Theme 包装一个小部件并提供ThemeData。我从build 方法返回一个小部件，如下所示：

    Theme( // wrapping `Card` widget with a theme
      data: Theme.of(context).copyWith( // extend main theme
        textTheme: Theme.of(context).textTheme.copyWith( // extend main text theme
              subtitle1: TextStyle(
                color: Colors.white, // subtitle text color to white
              ),
              caption: TextStyle(
                color: Colors.white, // caption text color to white
              ),
            ),
      ),
      child: Card( // card widget as a child of theme
        // ... other stuff ...
        child: Container(
            margin: _margin,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(
                  profile.alias,
                  style: Theme.of(context).textTheme.subtitle1, // set text style to subtitle1
                ),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Text(
                        'Joined ${timeago.format(profile.dateJoined)}',
                        style: Theme.of(context).textTheme.caption, // set text style to subtitle2
                        textAlign: TextAlign.right,
                      ),
                      Text(
                        'Has ${profile.stats.subscriberCount == null ? 0 : profile.stats.subscriberCount} subscribers',
                        style: Theme.of(context).textTheme.caption, // set text style to caption
                        textAlign: TextAlign.right,
                      ),
                      Text(
                        'Following ${profile.stats.followingCount == null ? 0 : profile.stats.followingCount} people',
                        style: Theme.of(context).textTheme.caption, // set text style to caption
                        textAlign: TextAlign.right,
                      ),
                    ],
                  ),
                ),
              ],
            )),
      ),
    );

奇怪的是，这不会影响我的文字。它仍然保持黑色。

可能有一些我不理解的主题。有没有办法将主题（在本例中为文本颜色）部分应用到影响所有直接和间接子级的小部件？

---

环境

• 颤振 2.0.6
• 飞镖 2.12.3

Answer 1

这里是一个示例，说明如何使用Theme() 对特定小部件使用全局主题和本地主题。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // Global Theme
        primarySwatch: Colors.blue,
        textTheme: Theme.of(context).textTheme.copyWith(
              bodyText2: TextStyle(
                color: Colors.orangeAccent,
                fontWeight: FontWeight.bold,
              ),
            ),
        cardTheme: CardTheme(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(20)),
            ),
            color: Colors.blueGrey),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("List Builder"),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Center(child: Text("Using MaterialApp theme")),
        Expanded(
          child: ListView.builder(
            itemCount: 4,
            itemBuilder: (context, index) {
              return Theme(
                // Child Theme
                data: Theme.of(context).copyWith(
                  textTheme: TextTheme(
                    bodyText2: TextStyle(color: Colors.greenAccent),
                  ),
                  cardTheme: CardTheme(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                    ),
                    color: Colors.red,
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Card(
                      // Card Theme of Theme() data
                      child: Container(
                        width: MediaQuery.of(context).size.width * 0.4,
                        height: MediaQuery.of(context).size.height * 0.1,
                        child: Center(
                          child: Text(
                            "Hello (Using Theme())",
                          ),
                        ),
                      ),
                    ),
                    Container(
                      width: MediaQuery.of(context).size.width * 0.4,
                      height: MediaQuery.of(context).size.height * 0.1,
                      child: Card(
                        // Card Theme of MaterialApp
                        child: Center(
                          child: FittedBox(
                            child: Text(
                              "Welcome(card theme from MaterialApp)",
                              style: Theme.of(context).textTheme.bodyText2,
                            ),
                          ),
                        ),
                        shape: Theme.of(context).cardTheme.shape,
                        color: Theme.of(context).cardTheme.color,
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

这是输出

Answer 2

TL;DR：如果您想将主题应用于所有子级，请将Builder 用作Theme 的子级。

---

所以，我上面的代码似乎使用了 build 方法的上下文，它是父级的。它改变了Theme 的直接子代 的主题。这很违反直觉，但幸运的是，有一种方法可以使用 Builder 小部件初始化全新的 BuildContext。

因此，如果您想将主题应用到所有孩子无论他们是直接孩子还是非直接孩子，请始终使用Builder 作为Theme 的直接孩子。

Theme(
  data: // your theme data here
  child: Builder(
    builder: (context) => // this is where you do stuff
  )
)

注意Builder 如何提供一个名为context 的BuildContext？这是一个全新的上下文，实际上包含我们刚刚创建的subtheme，而不是build 方法提供的context。因此，当您在某处的Builder 小部件下创建Text 小部件时：

// under Builder widget somewhere
Text(
  'my text',
  style: Theme.of(context).textTheme.caption // we have a context here
)

这里的context 使用了Builder 小部件提供的上下文，而不是build 方法，这使它直观。

另外，我使用Theme.of 的原因是因为我想扩展主主题，而不是创建一个空主题。而且Flutter有很多预定义的文本样式，如bodyText1、bodyText2、heading1（最多6个）、caption等，我可以用这个方法。

这至少是我解决问题的方法，并且代码是有意义的。