Flutter: How do I change theme brightness at runtime?

user_3724038 0
Viewed 11220

I have a MaterialApp with a ThemeData that is initially set to Brightness.light. I'd like to switch the brightness to Brightness.dark at runtime, but when I make that change, only the status bar changes - none of the Flutter widgets actually change their brightness.

How can this behavior be achieved?

To change the ThemeData at runtime, I've created the following StatefulWidget that wraps my MaterialApp and rebuilds it whenever the theme changes:

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,
        );
      },
    );
  }
}
material-design flutter
4 Answers

The issue is that ThemeData uses its brightness value in the constructor to synthesize a number of other colors, but those colors are not re-calculated when ThemeData is mutated. Therefore, the solution is to instantiate an entirely new ThemeData rather than use appTheme.copyWith(...).

Change this:

appTheme.copyWith(
  brightness: _brightness,
),

To this:

ThemeData(
  brightness: _brightness,
),
user_37240380

My solution is the following:

  1. Define a variable in main.dart for the brightness and a function that changes the state.

  2. Pass the function to a class and then call it wherever you need.

//main.dart
class _MyAppState extends State<MyApp> {
  Brightness _brightness = Brightness.light;

  void _changeBrightness(Brightness newBrightness) {
    setState(() {
      _brightness = newBrightness;
    });
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      //PASSING THE FUNCTION AS PARAMETER
      Util.changeBrightness = _changeBrightness;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your app title',
      theme: ThemeData(
        primaryColor: const Color(0xFFb30047),
        brightness: _brightness,
        primarySwatch: Colors.blue,
        accentColor: Colors.white,
        /// ...and so on

In the Util class

class Util {
   static Brightness currentBrightness = Brightness.light;
   static Function changeBrightness;
   // ...further implementations

And then call it when you need. In my case, a switch change in the settings screen:

darkModeChanged(bool newValue) {
   Preferences.setBool('darkMode', newValue);
   setState(() {
     _darkMode = newValue;
     Util.currentBrightness = _darkMode ? Brightness.dark : Brightness.light;        
     Util.changeBrightness(Util.currentBrightness);
   });
}
user_73013140
user_52502730

You can change the theme at runtime with ThemeBuilder :

setState(() {
  ThemeBuilder.of(context).changeTheme();
});
user_66541290
Related