CODEWITHSUNDEEP
flutterflutter-web
Kokila
Kokila

Reputation: 317

How to change entire app to dark and light theme on ontap flutter?

Does anyone know how to change entire app to darktheme and light theme on onTap?

Upvotes: 0

Views: 492

Answers (2)

Sadhik
Sadhik

Reputation: 300

Try it,

class MyApp extends StatelessWidget {
  final ValueNotifier<ThemeMode> _notifier = ValueNotifier(ThemeMode.light);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: _notifier,
      builder: (_, mode, __) {
        return MaterialApp(
          theme: ThemeData.light(),
          darkTheme: ThemeData.dark(),
          themeMode: mode, // Decides which theme to show, light or dark.
          home: Scaffold(
            body: Center(
              child: ElevatedButton(
                onPressed: () => _notifier.value = mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light,
                child: Text('Toggle Theme'),
              ),
            ),
          ),
        );
      },
    );
  }
}

Upvotes: 1

CharlyKeleb
CharlyKeleb

Reputation: 754

You will have to use SharedPreferences and provider packages

  • create new dart file and call it themeNotifier

    class ThemeNotifier extends ChangeNotifier {
    final String key = 'theme';
    SharedPreferences? _prefs;
    bool? _darkTheme;
    bool? get dark => _darkTheme;

    ThemeNotifier() {
      _darkTheme = true;
      _loadfromPrefs();
    }
    toggleTheme(){
      _darkTheme = !_darkTheme!;
      _saveToPrefs();
      notifyListeners();
    }


    _loadfromPrefs()async{
      _darkTheme = _prefs!.getBool(key);
      notifyListeners();
    }
    _saveToPrefs()async{
      _prefs!.setBool(key, _darkTheme!);
    }
  }

  • now create a switcher to toggle between dark mode and light mode

      Widget _buildThemeSwitch() {
  return ListTile(
    title: Text(
      "Dark Mode",
      style: TextStyle(
        fontWeight: FontWeight.w900,
      ),
    ),
    trailing: Consumer<ThemeNotifier>(
      builder: (context, notifier, child) => CupertinoSwitch(
        onChanged: (val) {
          notifier.toggleTheme();
        },
        value: notifier.dark!,
        activeColor: Theme.of(context).accentColor,
      ),
    ),
  );
}

  • in your main.dart

      void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @override

Widget build(BuildContext context) {
  return MultiProvider(
    providers:ChangeNotifierProvider(create: (_) =>            ThemeNotifier()),
child: Consumer<ThemeNotifier>(
   builder: (context, ThemeNotifier notifier, child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: "app name",
          theme:notifier.dark! ? "Your dark theme" : "Your light theme",
          home: "your home page",
        );
      },
    ),
   );}}

Upvotes: 1

Related Questions