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

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

例如：您的全球主题是

主题：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中声明的以外需要一些不同主题配置的所有屏幕。

希望对您有帮助。

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

1 个答案: