Dark and Light Mode Menggunakan Riverpod dan Shared Preferences

ichsan

Pertama buatlah project flutter, setelah mebuat project flutter anda bisa menambahkan di pubspec.yaml package riverpod dan Share Preference setelah itu buatlah file theme.dart dan theme.provider.dart

theme.dart

import 'package:flutter/material.dart';

import 'package:shared/themes/typography.dart';

enum AppThemess{

darkTheme,lightTheme

}

class AppThemes {

static final appThemeData = {

AppThemess.darkTheme: ThemeData(

primarySwatch: Colors.grey,

primaryColor: Colors.black,

brightness: Brightness.dark,

backgroundColor: const Color(0xFF212121),

colorScheme: ColorScheme.dark(),

dividerColor: Colors.black54,

floatingActionButtonTheme: const FloatingActionButtonThemeData(

backgroundColor: Colors.white,

),

textButtonTheme: TextButtonThemeData(

style: ButtonStyle(

foregroundColor: MaterialStateProperty.all(Colors.white),

),

),

textTheme: TextTheme(

titleMedium: AppTypography.smallMedium.copyWith(color: Colors.white),

titleLarge: AppTypography.mediumRegular.copyWith(

color: Colors.white,fontWeight: FontWeight.w400,letterSpacing: 0.16,fontSize: 18,

),

headlineSmall: AppTypography.headingSmall.copyWith(

fontSize: 20, color: Colors.white,

fontWeight: FontWeight.w600,

),

headlineMedium: AppTypography.headingMedium.copyWith(

fontSize: 22,

color: Colors.white,

fontWeight: FontWeight.w600,

height: 1.17,

),

),

bottomNavigationBarTheme: const BottomNavigationBarThemeData(

backgroundColor: Colors.grey, unselectedItemColor: Colors.white),

),

AppThemess.lightTheme: ThemeData(

primarySwatch: Colors.grey,

primaryColor: Colors.white,

brightness: Brightness.light,

backgroundColor: const Color(0xFFE5E5E5),

colorScheme: ColorScheme.light(),

dividerColor: const Color(0xff757575),

floatingActionButtonTheme: const FloatingActionButtonThemeData(

backgroundColor: Colors.black,

foregroundColor: Colors.white,

),

textButtonTheme: TextButtonThemeData(

style: ButtonStyle(

foregroundColor: MaterialStateProperty.all(Colors.black),

),

),

textTheme: TextTheme(

titleMedium: AppTypography.smallMedium.copyWith(color: Colors.black),

titleLarge: AppTypography.mediumRegular.copyWith(

color: Colors.black,fontWeight: FontWeight.w400,letterSpacing: 0.16,fontSize: 18,

),

headlineSmall: AppTypography.headingSmall.copyWith(

fontSize: 20, color: Colors.black,

fontWeight: FontWeight.w600,

),

headlineMedium: AppTypography.headingMedium.copyWith(

fontSize: 22,

color: Colors.black,

fontWeight: FontWeight.w600,

height: 1.17,

),

),

bottomNavigationBarTheme: const BottomNavigationBarThemeData(

backgroundColor: Colors.grey,

selectedItemColor: Colors.black,

unselectedItemColor: Colors.white),

),

};

}

theme.provider.dart

import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:shared_preferences/shared_preferences.dart';

*
final sharedPrefProvider = FutureProvider<SharedPreferences>((ref) => SharedPreferences.getInstance());*

final themeSwitchProvider = StateProvider<bool>((ref) { final sharedPreferences = ref.watch(sharedPrefProvider);

final theme = sharedPreferences.value?.getString("ThemeMode");

return theme == "dark" ? true : false;});

final themeModeProvider = StateProvider<ThemeMode>((ref) { final sharedPreferences = ref.watch(sharedPrefProvider);

final themeSwitch = ref.watch(themeSwitchProvider);

if (themeSwitch) { sharedPreferences.value?.setString("ThemeMode", "dark"); }

else { sharedPreferences.value?.setString("ThemeMode", "light"); }

final theme = sharedPreferences.value?.getString("ThemeMode"); return theme == "dark" ? ThemeMode.dark : ThemeMode.light;});

Setelah membuat file tersebut anda bisa masuk ke file main.dart dan mengubah seperti dibawah ini

main.dart

void main() async {

runApp( const ProviderScope(child: MainApp()) );

}

class MainApp extends ConsumerStatefulWidget {

const MainApp({super.key});

@override ConsumerState<MainApp> createState() => _MainAppState();

}

class _MainAppState extends ConsumerState<MainApp> {

@override

Widget build(BuildContext context) {

final themeMode = ref.watch(themeModeProvider);

return ProviderScope(

child: MaterialApp(

theme:AppThemes.appThemeData[AppThemess.lightTheme],

darkTheme: AppThemes.appThemeData[AppThemess.darkTheme],

themeMode: themeMode,

home:Example(),

);

}

}

example.dart

import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:work/core/constants/theme/theme.provider.dart';

class Exaple extends ConsumerStatefulWidget {

const Exaple({super.key});
@override ConsumerState<Exaple> createState() => _ExapleState();

}
class _ExapleState extends ConsumerState<Exaple> {

@override

Widget build(BuildContext context) {

final isDark = ref.watch(themeSwitchProvider);

return Scaffold(

appBar: AppBar(

title: Text('Example'),

actions: [

Switch(value:isDark ,

onChanged: (value) {

ref.read(themeSwitchProvider.notifier).state =value;

},

)

],

),

body: Container(),

);

}

}