Flutter
Flutter ❤️

Theme Changer using Provider in Flutter

Sayan Nath
Feb 18 · 4 min read

Why Flutter?

Flutter provides fast development and with a single codebase, we can build apps for multiple platform i.e Android, iOS, Ubuntu, macOS and Windows. It also provides flexibility in terms of building a Custom UI. Hot Reloading also makes the developement process smooth.

What is Provider?

Provider is the most popular for state management in Flutter. It is highly recommended for beginners who want to learn state management.

Provider
Provider
Provider 😎

Plugins Used

provider

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.0
provider: ^4.3.2+4
shared_preferences: ^0.5.12+4

File Structuring

File Structuring is very important if you are doing any project. So let’s discuss it first. In the provider directory, there is a theme.dart file where the themes are defined.

├── lib
│ ├── main.dart
│ ├── provider
│ │ └── theme.dart
│ └── views
│ ├── homePage.dart
│ └── splashScreen.dart
├── pubspec.yaml

Lets’ Understand few Concepts now

For both the cases, i.e light and dark theme in theme.dart, the themes are defined. After that, we will be creating a class named as ThemeNotifier which will be extending ChangeNotifier class.

Let’s go step by step,

Let’s define the key for shared preferences and a variable with _darkTheme which can help to determine the user selection of the theme.

final String key = "theme";
SharedPreferences prefs;
bool _darkTheme;
ThemeNotifier() {
_darkTheme = true;
loadFromPrefs();
}
loadFromPrefs() async {
await _initPrefs();
_darkTheme = prefs.getBool(key) ?? true;
notifyListeners();
}
_initPrefs() async {
if (prefs == null) prefs = await SharedPreferences.getInstance();
}
toggleTheme() {
_darkTheme = !_darkTheme;
saveToPrefs();
notifyListeners();
}
saveToPrefs() async {
await _initPrefs();
prefs.setBool(key, darkTheme);
}

Let’s inject the dependency

main.dart

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (_) => ThemeNotifier(),
child: Consumer<ThemeNotifier>(
builder: (context, ThemeNotifier themeNotifier, child) {
return MaterialApp(
title: 'Flutter Theme Provider',
theme: themeNotifier.darkTheme ? dark : light,
home: SplashScreen(),
);
}),
);
}
}
Consumer(
builder: (context, ThemeNotifier themeNotifier, child) =>
SwitchListTile(
title: Text("Dark Mode"),
onChanged: (val) {
themeNotifier.toggleTheme();
},
value: themeNotifier.darkTheme,
),
)

Results

Result

IoT Lab KIIT

IoT Lab, KIIT University is a group of passionate and hard-working students developing and nurturing

IoT Lab KIIT

IoT Lab, KIIT University is a group of passionate and hard-working students developing and nurturing under the guidance of knowledgeable and competent professors. It is technically a research community with its focus on crowdsourcing, IoT, App Dev, AR, ML, Web Dev based projects.

Sayan Nath

Written by

I am amongst the top contributors in Github from India currently, my rank is #136. I am an aspiring Junior Data Scientist at Codebugged AI.

IoT Lab KIIT

IoT Lab, KIIT University is a group of passionate and hard-working students developing and nurturing under the guidance of knowledgeable and competent professors. It is technically a research community with its focus on crowdsourcing, IoT, App Dev, AR, ML, Web Dev based projects.