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

Question

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

5

我有一个小的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()
        },
      ),
    );
  }
}

我有一块屏幕上有一个小部件列表，我希望所有的文本小部件都有另一种颜色。因此，我尝试按照这个指南使用Theme小部件进行设置：

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

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

- Zver64

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jay Mungara · Accepted Answer

是的，您可以将主题小部件用作您想要覆盖应用程序全局主题的 Scaffold 的父级。

例如：您的全局主题为

theme: 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应用到RaisedButton颜色中。您不需要使用 Theme.of(context) 引用它。

这样，您可以创建全局ThemeData，并将其应用于所有需要与MaterialApp ThemeData中声明的不同主题配置不同的屏幕。

希望能帮到您。