adaptive_theme 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 83

Adaptive Theme #

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.

Installing #

add following dependency to your pubspec.yaml

dependencies:
  adaptive_theme: ^0.1.0

Initialization #

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();

Toggle Theme Mode #

AdaptiveTheme allows you to toggle between light and dark theme the easiest way possible.

AdaptiveTheme.of(context).toggleThemeMode();

Changing Themes #

If you want to change the theme entirely like change all the colors to
some other color swatch, then you can use setTheme method.

AdaptiveTheme.of(context).setTheme(
  light: ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.purple,
    accentColor: Colors.amber,
  ),
  dark: ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.purple,
    accentColor: Colors.amber,
  ),
);

Reset Theme #

AdaptiveTheme is smart enough to keep your default themes handy that you provided at the time of initialization. You can fallback to those default themes in a very easy way.

AdaptiveTheme.of(context).reset();

This will reset your theme as well as theme mode to the initial values provided at the time of initialization.

Set Default Theme #

AdaptiveTheme persists theme mode changes across app restarts and uses the default themes to set theme modes(light/dark) on. You can change this behavior if you want to set a different theme as default theme other then the one provided at the time of initialization.

This comes handy when you're fetching themes remotely on app starts and setting theme as current theme.

Doing so is quit easy. You would set a new theme normally as you do by calling setTheme method but this time, with a flag isDefault set to true.

This is only useful when you might want to reset to default theme at some point.

AdaptiveTheme.of(context).setTheme(
  light: ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.blue,
    accentColor: Colors.amber,
  ),
  dark: ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.blue,
    accentColor: Colors.amber,
  ),
  isDefault: true,
);

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();

License #

Copyright © 2020 Birju Vachhani

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

0.1.1 #

  • add option to silently update theme without notifying. Useful when chaining multiple changes.

0.1.0 #

  • Supports theme modes: light, dart, system default.
  • Persists theme modes across app restarts.
  • Allows to toggle theme mode between light and dark.
  • Allows to set default theme.
  • Allows to reset to default theme.

example/lib/main.dart

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptive Theme Demo'),
      ),
      body: SizedBox.expand(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              onPressed: () {
                AdaptiveTheme.of(context).toggleThemeMode();
              },
              child: Text('Toggle Theme Mode'),
            ),
            RaisedButton(
              onPressed: () {
                AdaptiveTheme.of(context).setDark();
              },
              child: Text('Set Dark'),
            ),
            RaisedButton(
              onPressed: () {
                AdaptiveTheme.of(context).setLight();
              },
              child: Text('set Light'),
            ),
            RaisedButton(
              onPressed: () {
                AdaptiveTheme.of(context).setSystem();
              },
              child: Text('Set System Default'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  adaptive_theme: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:adaptive_theme/adaptive_theme.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
67
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
83
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform android

Because:

  • package:adaptive_theme/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme_preferences.dart that imports:
  • package:shared_preferences/shared_preferences.dart that imports:
  • package:shared_preferences_linux/shared_preferences_linux.dart that declares support for platforms: linux

Package does not support Flutter platform ios

Because:

  • package:adaptive_theme/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme_preferences.dart that imports:
  • package:shared_preferences/shared_preferences.dart that imports:
  • package:shared_preferences_linux/shared_preferences_linux.dart that declares support for platforms: linux

Package does not support Flutter platform macos

Because:

  • package:adaptive_theme/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme_preferences.dart that imports:
  • package:shared_preferences/shared_preferences.dart that imports:
  • package:shared_preferences_linux/shared_preferences_linux.dart that declares support for platforms: linux

Package does not support Flutter platform web

Because:

  • package:adaptive_theme/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme_preferences.dart that imports:
  • package:shared_preferences/shared_preferences.dart that imports:
  • package:shared_preferences_linux/shared_preferences_linux.dart that declares support for platforms: linux

Package does not support Flutter platform windows

Because:

  • package:adaptive_theme/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme.dart that imports:
  • package:adaptive_theme/src/adaptive_theme_preferences.dart that imports:
  • package:shared_preferences/shared_preferences.dart that declares support for platforms: android, ios, linux, macos, web

Package not compatible with SDK dart

Because:

  • adaptive_theme that is a package requiring null.

Health suggestions

Format lib/src/adaptive_theme.dart.

Run flutter format to format lib/src/adaptive_theme.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
shared_preferences ^0.5.7 0.5.8
Transitive dependencies
collection 1.14.12 1.14.13
file 5.2.1
flutter_web_plugins 0.0.0
intl 0.16.1
meta 1.1.8 1.2.2
path 1.7.0
path_provider_linux 0.0.1+2
path_provider_platform_interface 1.0.2
platform 2.2.1
plugin_platform_interface 1.0.2
process 3.0.13
shared_preferences_linux 0.0.2+1
shared_preferences_macos 0.0.1+10
shared_preferences_platform_interface 1.0.4
shared_preferences_web 0.1.2+7
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
xdg_directories 0.1.0
Dev dependencies
flutter_test