Flutter:如何在运行时更改主题亮度？

Question

我有一个 MaterialApp，其 ThemeData 最初设置为 Brightness.light。我想在运行时将亮度切换为 Brightness.dark，但是当我进行更改时，只有状态栏会发生变化——Flutter 小部件实际上都没有改变它们的亮度。

如何实现这种行为？

为了在运行时更改 ThemeData，我创建了以下 StatefulWidget 来包装我的 MaterialApp 并在主题更改时重新构建它:

final ThemeData appTheme = ThemeData(
  brightness: Brightness.light,
);

class ThemeChanger extends StatefulWidget {
  static ThemeChangerState of (BuildContext context) {
    return context.ancestorStateOfType(TypeMatcher<ThemeChangerState>());
  }

  ThemeChanger({
    this.childBuilder,
  });

  final Widget Function(BuildContext, ThemeData) childBuilder;

  @override
  ThemeChangerState createState() => ThemeChangerState();
}

class ThemeChangerState extends State<ThemeChanger> {
  Brightness _brightness = Brightness.light;

  set brightness(Brightness brightness) {
    setState(() {
      _brightness = brightness;
    });
  }

  @override
  Widget build(BuildContext context) {
    return widget.childBuilder(
      context,
      appTheme.copyWith(
        brightness: _brightness
      ),
    );
  }
}

// Then in main.dart
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DemoTheme(
      childBuilder: (BuildContext context, ThemeData theme) {
        return MaterialApp(
          title: 'Materially Better',
          theme: theme,
          routes: {
            '/': (BuildContext context) {
              return LoginScreen();
            },
            'home': (BuildContext context) {
              return MainScreen();
            }
          },
          debugShowCheckedModeBanner: false,
        );
      },
    );
  }
}

Answer 1

问题是 ThemeData 在构造函数中使用它的 brightness 值来合成许多其他颜色，但是当 ThemeData 时不会重新计算这些颜色 发生了变异。因此，解决方案是实例化一个全新的ThemeData，而不是使用appTheme.copyWith(...)。

改变这个:

appTheme.copyWith(
  brightness: _brightness,
),

到这里:

ThemeData(
  brightness: _brightness,
),