Flutter theme modes

Question

I have a project I'm working on and I want to switch it to the three modes, light, dark, and according to the system.

I want an add-on code to do this in addition to saving the mode to be selected, away from any state management, I have put a simple code with three buttons for each case.

Material app

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      darkTheme: ThemeData(scaffoldBackgroundColor: Colors.black),
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  }
}

HomePage

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(onPressed: (){}, child: const Text('Dark mode')),
          ElevatedButton(onPressed: (){}, child: const Text('Light mode')),
          ElevatedButton(onPressed: (){}, child: const Text('System mode')),
        ],
      )
    );
  }
}

you can do it with state management which one you want to use? — Munsif Ali, Jan 23 '23 at 19:49
yeah it is also possible without state management but that would be not recommended — Munsif Ali, Jan 23 '23 at 19:57
Yes, I know that, but now I am in the process of building interfaces. I will change it to the required state management later. — Mohammed, Jan 23 '23 at 20:06
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/251350/discussion-between-mohammed-and-munsif-ali). — Mohammed, Jan 23 '23 at 20:12

Munsif Ali · Accepted Answer · 2023-01-23T20:30:21.400

here is the code to do it

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode mode = ThemeMode.dark;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      darkTheme: ThemeData(scaffoldBackgroundColor: Colors.black),
      themeMode: mode,
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    mode = ThemeMode.dark;
                  });
                },
                child: const Text('Dark mode')),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  mode = ThemeMode.light;
                });
              },
              child: const Text('Light mode'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  mode = ThemeMode.system;
                });
              },
              child: const Text('System mode'),
            ),
          ],
        ),
      ),
    );
  }
}

and here is the result

Edit: if you don't want to merge these classes you can use it separate as well like this

Material App

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode mode = ThemeMode.dark;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      darkTheme: ThemeData(scaffoldBackgroundColor: Colors.black),
      themeMode: mode,
      home: HomePage(
        changeThemeToDark: () {
          setState(() {
            mode = ThemeMode.dark;
          });
        },
        changeThemeToLight: () {
          setState(() {
            mode = ThemeMode.light;
          });
          print("changes=d");
        },
        changeThemeToSystem: () {
          mode = ThemeMode.system;
        },
      ),
    );
  }
}

HomePage

class HomePage extends StatelessWidget {
  const HomePage(
      {Key? key,
      required this.changeThemeToDark,
      required this.changeThemeToSystem,
      required this.changeThemeToLight})
      : super(key: key);

  final VoidCallback changeThemeToDark;
  final VoidCallback changeThemeToSystem;
  final VoidCallback changeThemeToLight;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
            onPressed: () {
              changeThemeToDark();
            },
            child: const Text('Dark mode')),
        ElevatedButton(
            onPressed: () {
              changeThemeToLight();
            },
            child: const Text('Light mode')),
        ElevatedButton(
            onPressed: () {
              changeThemeToSystem();
            },
            child: const Text('System mode')),
      ],
    ));
  }
}

The HomePage is out of the material in a separate class. How can I connect to it? I don't want to merge them — Mohammed, Jan 23 '23 at 20:22

Flutter theme modes

1 Answers1