Easiest way to add support for light and dark theme in your flutter app. It allows to manually set light or dark theme and also lets you define themes based on the system (Works for Android only for now). It also persists the theme modes changes across app restarts.
Installation
add following dependency to your pubspec.yaml
dependencies:
adaptive_theme: ^1.0.0
Usage
You need to wrap your MaterialApp with AdaptiveTheme in order to apply themes
import 'package:adaptive\_theme/adaptive\_theme.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AdaptiveTheme(
light: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.red,
accentColor: Colors.amber,
),
dark: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.red,
accentColor: Colors.amber,
),
initial: AdaptiveThemeMode.light,
builder: (theme, darkTheme) => MaterialApp(
title: 'Adaptive Theme Demo',
theme: theme,
darkTheme: darkTheme,
home: MyHomePage(),
),
);
}
}
Changing Theme Mode
Now that you have initialized your app as mentioned above. It’s very easy and straight forward to change your theme modes: light to dark, dark to light or to system default.
// sets theme mode to dark
AdaptiveTheme.of(context).setDark();
// sets theme mode to light
AdaptiveTheme.of(context).setLight();
// sets theme mode to system default
AdaptiveTheme.of(context).setSystem();
Ceveats
Non-Persist theme changes
This is only useful in scenarios where you load your themes dynamically from network in the splash screen or some initial screens of the app. Please note that AdaptiveTheme does not persist the themes, it only persists the theme modes(light/dark/system). Any changes made to the provided themes won’t be persisted and you will have to do the same changes at the time of the initialization if you want them to apply every time app is opened. e.g changing the accent color.
Using SharedPreferences
This package uses sharedpreferences plugin internally to persist theme mode changes. If your app uses sharedpreferences which might be the case all the time, clearing your sharedpreferences at the time of logging out or signing out might clear these preferences too. Be careful not to clear these preferences if you want it to be persisted.
AdaptiveTheme.prefKey
You can use above key to exclude it while clearing the all the preferences.
Or you can call AdaptiveTheme.persist() method after clearing the preferences to make it persistable again as shown below.
final prefs = await SharedPreferences.getInstance();
await pref.clear();
AdaptiveTheme.persist();
for live example of adaptive_theme : click here
for more check this out
Top comments (0)