如何为屏幕设置不同的主题？答案

【问题标题】：How to set a different theme for a screen?如何为屏幕设置不同的主题？
【发布时间】：2018-07-03 14:13:15
【问题描述】：

我创建了Friendly Chat app 并想添加一个具有不同主题的新屏幕，但它不起作用:-(

整个应用有一个Brightness.dark 主题：

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    print("build MaterialApp");
    return new MaterialApp(
      title: 'Friendly Chat',
      theme: kTheme,
      home: new ChatScreen(),
      routes: <String, WidgetBuilder>{
        SettingsScreen.PATH: (BuildContext context) => new SettingsScreen()
      },
    );
  }
}

final ThemeData kTheme = new ThemeData(
  primarySwatch: Colors.indigo,
  primaryColor: Colors.indigoAccent[100],
  primaryColorBrightness: Brightness.dark,
);

当用户点击按钮时，我按下设置屏幕：

Map results = await Navigator.of(context).pushNamed(SettingsScreen.PATH);

在设置屏幕中，我更改了AppBar 的backgroundColor 和brightness，但新的/不同的brightness 没有效果（更改backgroundColor 有效）

class SettingsScreen extends StatefulWidget {

  @override
  State createState() => new SettingsScreenState();
}

class SettingsScreenState extends State<SettingsScreen> {

  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: _onWillPop,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text("Settings"),
          backgroundColor: Colors.amberAccent[700],
          brightness: Brightness.light,
        ),
      ),
    );
  }
}

如何将设置屏幕 AppBar 主题更改为浅色？

编辑

最后我想要：

所有屏幕都有深色 AppBar 背景颜色，带有白色标题和图标
设置屏幕（仅）具有浅色 AppBar 背景色，带有深色标题和图标

加分项：如何为整个屏幕设置不同的主题，而不仅仅是为 AppBar 设置不同的主题

【问题讨论】：

编辑我的帖子以获得您的奖励积分

标签： dart flutter

【解决方案1】：

您可以通过将所需小部件包装在 Theme 小部件中来覆盖当前主题

通常你会有类似的东西：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final AppBar appBar;

  CustomAppBar(): appBar = new AppBar();

  @override
  Widget build(BuildContext context) {
    return new Theme(
      child: appBar,
      data: new ThemeData.dark()
    );
  }

  @override
  Size get preferredSize => appBar.preferredSize;
}

必须创建一个自定义类，因为Scaffold 需要PreferredSizeWidget。

编辑

要回答您的“奖励积分”，非常简单。

不要将AppBar 包装在Theme 中，而是将Scaffold 包装起来。

【讨论】：

【解决方案2】：

在我的例子中，必须为特定屏幕中 ExpansionTile 上箭头上的颜色设置 primarySwatch，但在设置 primarySwatch 时会丢失其他 TextTheme 样式。

以下是如何将现有的 TextTheme 样式带回自定义主题声明：

ThemeData(
  primarySwatch: Colors.grey,
  textTheme: Theme.of(context).textTheme,
)

 @override
 Widget build(BuildContext context) {

    Widget scaffold = Scaffold(
      body: _screenWidget(),
    );

    scaffold = Theme(
      data: ThemeData(
        primarySwatch: Colors.grey,
        textTheme: Theme.of(context).textTheme,
      ),
      child: scaffold,
    );

    return scaffold;
 }

感谢@Remi's answer

【讨论】：