Adaptive Theme on Flutter
Tags: flutter, ui, tutorial, android
Published: 2020-09-01 06:23:07

---
title: Adaptive Theme on Flutter
published: true
images: https://cdn-images-1.medium.com/max/1024/1*duaF1-FfZKyh_iygxm8DBg.png
date: 2020-09-01 06:16:47 UTC
tags: flutter,ui,tutorial,android,
canonical_url: https://medium.com/@naveenjujaray/adaptive-theme-on-flutter-7767370f4133
---

![](https://cdn-images-1.medium.com/max/1024/1*duaF1-FfZKyh_iygxm8DBg.png)

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](https://developerfolio.web.app)

> for more check this [out](https://pub.dev/packages/adaptive_theme)