如何设置Flutter中一个小部件下所有文本小部件的颜色？

Question

According to this answer , all I have to do is to wrap a widget with Theme and provide ThemeData . I return a widget from build method as below:

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

Oddly, this doesn't affect my text anyway. It still stays black.

Probably there is something I don't understand about the themes. Is there a way to partially apply a theme (in this case, text color) to a widget that affects all direct and indirect children?

---

Environment

• Flutter 2.0.6
• Dart 2.12.3

Answer 1

Here is an example of how to use the global theme and local theme using Theme() to particular widgets.

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,
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

Here is the Output

Answer 2

TL;DR: Use Builder as a child of Theme if you'd like to apply the theme to all children.

---

So, my code above seems to be using the context of build method, which is of parent. It changes the theme of the direct child of Theme . This is quite counter-intuitive but luckily there is a way to initialize a brand new BuildContext using Builder widget.

So, if you want to apply the theme to all children whether they are direct or undirect children , always use Builder as a direct child of Theme .

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

Notice how Builder provides a BuildContext named context ? This is a brand new context to work with and actually contains subtheme that we have just created rather than the context that is provided by build method. So, when you create a Text widget under Builder widgeet somewhere:

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

The context here uses the context provided by Builder widget, not the build method, which makes it intuitive.

Also, the reason I use Theme.of is because I'd like to extend main theme, not create an empty theme . And Flutter has many predefined styles for texts such as bodyText1 , bodyText2 , heading1 (up to 6), caption etc. and I can use it with this method.

This is, at least, how I have solved the issue and the code makes sense.