如何在颤动中覆盖 MaterialApp 的主题

Posted 2023-02-22

【中文标题】如何在颤动中覆盖 MaterialApp 的主题

【英文标题】：How to override MaterialApp's theme in flutter

【发布时间】：2021-04-08 15:17:50

【问题描述】：

我正在尝试使用 Theme 小部件来覆盖特定容器的主题样式。

在这里，我将所有文本小部件的正文文本颜色设置为白色。

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText2: TextStyle(
            color: Colors.white
          )
        )
      ),
      initialRoute: Home.id,
      routes: 
        Home.id: (context) => Home()
      ,
    );
  

现在我正在尝试将此容器内的所有文本小部件设置为黑色，但它仍在获取 Material 应用小部件中设置的白色。

class NewTask extends StatelessWidget 
      @override
      Widget build(BuildContext context) 
        return GestureDetector(
          onTap: ()
            Navigator.pop(context);
          ,
          child: Theme(
            data: ThemeData(
                textTheme: TextTheme(
                    bodyText2: TextStyle(
                        color: Colors.black,
                    )
                )
            ),
            child: Container(
              child: Column(
                children: [
                  Text(
                    "New Task",
                  )
                ],
              ),
            ),
          )
        );
      
    

我能够通过将 Container 小部件包装在 Builder 方法中并设置来使其工作

TextStyle(
color: Theme.of(context).textTheme.bodyText2.color
),

但是如果我在这个容器中有多个文本小部件，这似乎需要做很多工作，我不明白出了什么问题，或者这不是主题小部件应该如何工作。

谢谢

【参考方案1】：

来自包含给定上下文的最近主题实例的数据。

Theme class docs

当您调用Theme.of(context) 时，您指的是NewTask.build 的上下文。与此上下文关联的Theme 对象将是MaterialApp.theme。因此，要使用Theme 小部件提供的ThemeData，您可以使用Builder 或将Theme 及其后代提取到新的StatelessWidget，或者如果需要，StatefulWidget

Builder 小部件本质上将其后代包装在 StatelessWidget 中，并提供 build 方法作为回调。

【讨论】：

我知道我可以将容器包装在 Builder 小部件中，并且上下文会改变。然后我可以使用 TextStyle 小部件手动设置颜色，颜色属性值为 Theme.of(context).textTheme.bodyText2.color 。这工作正常。但为什么我必须这样做？我已经将我的容器包装在 Theme 小部件中，并且文本小部件应该会自动获取在 Theme 小部件中设置的颜色值。