dynamic_color_theme 1.1.0

dynamic_color_theme #

This package allows you to dynamically change your color theme and will automatically switch between light and dark mode based on the new color. Additionally, the color values can be persisted across restarts by saving both the color and dark mode to shared preferences.

Installation #

dependencies:
    dynamic_color_theme: ^1.1.0

Import the theme as shown below.

import 'package:dynamic_color_theme/dynamic_color_theme.dart';

You can also utilize the built-in color picker dialog by importing as shown below.

import 'package:dynamic_color_theme/color_picker_dialog.dart';

Usage #

To use it, wrap your main widget like so:

const kFuchsia = const Color(0xFF880E4F);
const kWhite = Colors.white;
const kLightGrey = const Color(0xFFE8E8E8);
const kDarkGrey = const Color(0xFF303030);

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DynamicColorTheme(
      data: (Color color, bool isDark) {
        return _buildTheme(color, isDark); // TODO define your own buildTheme method here
      },
      defaultColor: kFuchsia,
      defaultIsDark: false,
      themedWidgetBuilder: (BuildContext context, ThemeData theme) {
        return MaterialApp(
          home: MyHomePage(title: 'Dynamic Color Theme'),
          theme: theme,
          title: 'Flutter Demo',
        );
      },
    );
  }
  
  // Example buildTheme method
  ThemeData _buildTheme(Color accentColor, bool isDark) {
    final ThemeData base = isDark ? ThemeData.dark() : ThemeData.light();
    final Color primaryColor = isDark ? kDarkGrey : kWhite;

    return base.copyWith(
      accentColor: accentColor,
      accentTextTheme: _buildTextTheme(base.accentTextTheme, accentColor),
      cardColor: primaryColor,
      cursorColor: accentColor,
      iconTheme: base.iconTheme.copyWith(
        color: accentColor,
      ),
      primaryColor: primaryColor,
      primaryIconTheme: base.primaryIconTheme.copyWith(
        color: accentColor,
      ),
      primaryTextTheme: _buildTextTheme(base.primaryTextTheme, accentColor),
      scaffoldBackgroundColor: primaryColor,
      textSelectionColor: isDark ? kDarkGrey : kLightGrey,
      textSelectionHandleColor: accentColor,
      textTheme: _buildTextTheme(base.textTheme, accentColor),
    );
  }

  TextTheme _buildTextTheme(TextTheme base, Color color) {
    return base.copyWith(
      bodyText2: base.bodyText2.copyWith(
        fontSize: 16,
      ),
      bodyText1: base.bodyText1.copyWith(
        color: color,
        fontSize: 16,
        fontWeight: FontWeight.bold,
      ),
      button: base.button.copyWith(
        color: color,
      ),
      caption: base.caption.copyWith(
        color: color,
        fontSize: 14,
      ),
      headline5: base.headline5.copyWith(
        color: color,
        fontSize: 24,
      ),
      subtitle1: base.subtitle1.copyWith(
        color: color,
        fontSize: 18,
      ),
      headline6: base.headline6.copyWith(
        color: color,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

You can change the theme yourself by utilizing the provided functions as shown below.

void changeColor(Color newColor) {
  DynamicColorTheme.of(context).setColor(
    color: newColor,
    shouldSave: true, // saves it to shared preferences
  );
}

void changeIsDark(bool isDark) {
  DynamicColorTheme.of(context).setIsDark(
    isDark: isDark,
    shouldSave: true, // saves it to shared preferences
  );
}

void resetTheme() {
  DynamicColorTheme.of(context).resetToSharedPrefsValues();
}

Dialog Widget #

Alternatively, a color picker dialog widget is included that will do this for you. Use it like so:


// With the barrier dismissible

showDialog(
  barrierDismissible: false,
  builder: (BuildContext context) {
    return ColorPickerDialog(
      defaultColor: kFuchsia,
      defaultIsDark: false,
    );
  },
  context: context,
);

// Without the barrier dismissible

showDialog(
  builder: (BuildContext context) {
    return WillPopScope(
      child: ColorPickerDialog(
        defaultColor: kFuchsia,
        defaultIsDark: false,
      ),
      onWillPop: () async {
        // Handles resetting if user taps off dialog
        DynamicColorTheme.of(context).resetToSharedPrefsValues();
        return true;
      },
    );
  },
  context: context,
);

[1.1.0] - February 17, 2020.

  • Update the color picker dialog library
  • Add configuration for showing the label in the built-in color dialog

[1.0.0] - February 13, 2020.

  • DynamicColorTheme initial release
  • ColorPickerDialog initial release

example/README.md

example #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  dynamic_color_theme: ^1.1.0

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:dynamic_color_theme/dynamic_color_theme.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
17
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]
59
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
flutter_colorpicker ^0.3.2 0.3.2
shared_preferences ^0.5.6+1 0.5.6+1
Transitive dependencies
collection 1.14.11 1.14.12
flutter_web_plugins 0.0.0
meta 1.1.8
shared_preferences_macos 0.0.1+5
shared_preferences_platform_interface 1.0.1
shared_preferences_web 0.1.2+3
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test