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

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

CodePudding user response：

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",
        );
      },
    ),
   );}}

CodePudding user response：

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'),
              ),
            ),
          ),
        );
      },
    );
  }
}