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

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

在我的一个屏幕上，我有一个小部件列表，我希望所有文本小部件都具有另一种颜色。因此，我尝试使用 guide 之后的主题小部件，如下所示：

//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 上关注这些 answers，以及它在我的代码中的外观：

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

是的，您可以使用 主题小部件 作为 Scaffold 的父级，您希望在其中覆盖应用的全局主题。

例如：您的全球主题是

主题：主题数据（ primarySwatch：颜色.蓝色， 按钮颜色：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 应用到 RaisedButton 颜色。你不需要使用 Theme.of(context) 来引用它。

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

希望对你有帮助。