dart - 如何为屏幕设置不同的主题?

我创建了 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);

在设置屏幕中,我更改了 AppBarbackgroundColorbrightness 但新的/不同的 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 设置不同的主题

最佳答案

您可以通过将所需小部件包装在 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

https://stackoverflow.com/questions/48424076/

相关文章:

mobile - Dart:流与 ValueNotifiers

dart - 如何在 flutter 中调整芯片的大小

dart - NumberFormat 未找到 flutter

android - 如何在 Flutter 中动态附加到 Column 小部件的子级

dart - 有没有办法在 Flutter 的多个 PageRoutes 中使用 Inherited

dart - 如何使用 Flutter 在 Android 中显示 iOS/cupertino 警报

flutter - 如何在 flutter 的文本小部件中显示图标?

dart - const 在 Flutter 中定义 EdgeInsets 中的作用

dart - CustomScrollView 中的 Flutter 固定按钮

firebase - 使用 FirebaseAuth 、 Firestore 和 Google 登录