2

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.

theFreeman96
  • 114
  • 1
  • 8

1 Answers1

0

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.

Nitts
  • 26
  • 5
  • Hi! Thanks for replying! Could you also provide me further help, using the consumer in my code? What I want to understand is how it works and which code I have to change/fix. I'm just a beginner and I'm trying to learn dart and flutter in my free time, so this problem is giving me trouble. – theFreeman96 Mar 02 '22 at 13:27
  • I've found something on the internet and and I wrapped the main.dart code and the SwitchTile code in the drawer.dart file and its working as before. My problem is still the IconButton. Can you help me? `Consumer(builder: (context, provider, child) { return IconButton(icon: Icon( provider.isDarkMode ? Icons.dark_mode : Icons.light_mode,), tooltip: 'Cambia Tema', onPressed: () { setState(() {provider.themeMode = provider.isDarkMode ? ThemeMode.light : ThemeMode.dark;}` – theFreeman96 Mar 02 '22 at 14:20