如何覆盖应用程序的一部分主题？

Question

我有一个小型 Flutter 应用程序，其主题配置如下：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  static final list = [
    {
      'name': 'test',
      'password': 'foobar'
    }
  ];
  final store = Store(appStateReducers, initialState: AppState(list));
  @override
  Widget build(BuildContext context) {
    return StoreProvider(
      store: store,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.red,
          appBarTheme: AppBarTheme(
            color: Color.fromRGBO(250, 136, 54, 1)
          ),
          textTheme: TextTheme(
            body1: TextStyle(
              color: Colors.red // text color is red for the whole applicatioin
            )
          )
        ),
        initialRoute: '/',
        routes: {
          '/': (context) => NoAccountPageDart(),
          'CreateAccount': (context) => CreateAccount(),
          'Home': (context) => Home()
        },
      ),
    );
  }
}

在我的一个屏幕上，我有一个小部件列表，我希望所有文本小部件都有另一种颜色。所以我尝试按照本指南使用主题小部件，如下所示：

//some code
child: Theme(
                          data: Theme.of(context).copyWith(
                            textTheme: Theme.of(context).textTheme.copyWith(
                              body1: TextStyle(color: Colors.white) // this is the color I want to use
                            )
                          ),
                          child: Column(
                            children: <Widget>[
                              Text(accounts[index]['name']), // this is supposed to be white. But it's still red.
                              Text(accounts[index]['password'],
                                  style: TextStyle(color: Colors.green))
                            ],
                          ),
                        ));
//some code

但这没有用。我还尝试遵循 stackoverflow 上的这些答案，以及它在我的代码中的样子：

child: Theme(
                          data: Theme.of(context).copyWith(
                            textTheme: Theme.of(context).textTheme.apply(
                              bodyColor: Colors.white // this is the color I want to use
                            )
                          ),
                          child: Column(
                            children: <Widget>[
                              Text(accounts[index]['name']), // this is supposed to be white. But it's still red.
                              Text(accounts[index]['password'],
                                  style: TextStyle(color: Colors.green))
                            ],
                          ),
                        ));

但这也不起作用。我究竟做错了什么？

Answer 1

是的，您可以使用主题小部件作为您想要覆盖应用程序的全局主题的脚手架的父级。

例如：您的全球主题是

主题：ThemeData（primarySwatch：Colors.blue，buttonColor：Colors.red），

因此，您必须使用如下语法：

color:Theme.of(context).buttonColor;

通过将主题小部件添加到特定屏幕，例如，

Theme(
      data: ThemeData(
            buttonColor: Colors.purple
      ),
      child: Scaffold(
          appBar: AppBar(
            title: Text("Demo"),
          ),
          body: Container(
                child: RaisedButton(
                      onPressed:(){},
                      child:Text("Save"),
                ),        
         ),
      )
)

对于这个特定的屏幕，您的按钮颜色会直接从最近的脚手架 ThemeData应用到 RaisingButton Color。您不需要使用 Theme.of(context) 来引用它。

通过这种方式，您可以创建一个全局 ThemeData 并将其应用到除 MaterialApp ThemeData 中声明之外的需要一些不同主题配置的所有屏幕。

我希望它有帮助。