Flutter theme changing clicking on IconButton and SwitchTile

Question

My app currently has a SwitchTile in the Drawer to set the theme but I also want to change it in a detail page using an IconButton.

I'm a newbie in Flutter and programming, so I'm not an expert and I think that I'm using the onPressed event in the wrong way.

I put a switch beside the IconButton and through it I'm able to switch between the two themes. The weird part comes when I press the IconButton, only the Switch changes its state but the app doesn't change the theme (even the icon of the IconButton changes but thats it).

Can you tell me how to fix my code to make it work for both the SwitchTile in the Drawer and the IconButton in the Detail Page?

Thanks! Here's my code:

main.dart

class Innario extends StatelessWidget {
  @override
  Widget build(BuildContext context) => ChangeNotifierProvider(
        create: (context) => ThemeProvider(),
        builder: (context, _) {
          final themeProvider = Provider.of<ThemeProvider>(context);
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            themeMode: themeProvider.themeMode,
            theme: MyTheme.lightTheme,
            darkTheme: MyTheme.darkTheme,
            title: 'Inni di Lode',
            home: SafeArea(
              child: Home(),
            ),
          );
        },
      );
}

provider.dart

class ThemeProvider extends ChangeNotifier {
  ThemeMode themeMode = ThemeMode.light;
  bool get isDarkMode => themeMode == ThemeMode.dark;
  void toggleTheme(bool isOn) {
    themeMode = isOn ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

drawer.dart

      SwitchListTile(
        secondary: Icon(
          themeProvider.isDarkMode ? Icons.dark_mode : Icons.light_mode,
        ),
        title: const Text('Tema'),
        value: themeProvider.isDarkMode,
        onChanged: (value) {
          final provider =
              Provider.of<ThemeProvider>(context, listen: false);
          provider.toggleTheme(value);
        },
      ),

detail.dart

        IconButton(
          icon: Icon(
            themeProvider.isDarkMode
                ? Icons.dark_mode
                : Icons.light_mode,
          ),
          tooltip: 'Cambia Tema',
          onPressed: () {
            setState(() {
              Provider.of<ThemeProvider>(context, listen: false)
                      .themeMode =
                  themeProvider.isDarkMode
                      ? ThemeMode.light
                      : ThemeMode.dark;
            });
          },
        ),
        Switch(
          value: themeProvider.isDarkMode,
          onChanged: (value) {
            final provider =
                Provider.of<ThemeProvider>(context, listen: false);
            provider.toggleTheme(value);
          },
        ),

---

Update 10th March 2022

I tried the solution that Nitts provided to me but sadly I'm still wandering in the dark. Could someone help me?

I think the easiest method is to put a switch even in the detail page, but I also think it will be way better to put an IconButton.

Answer 1

wrap all your code in a consumer of that provider in which you want to change the theme. and use the method to change theme anywhere in the app. just wrap your widgets with a consumer it will help you.