Description:

adaptive chameleon theme

Adaptive Chameleon Theme #
A Flutter package that will automatically retrieve your OS defined Theme (Dynamic), force your
prefered one (Light / Dark), allow you to present the user with a set of color themes to choose
from and of course, persist this choice in your device.






Features #

Set default theme
Override system theme mode and set yours (light/dark)
Change theme colors
Customize color palettes for different theme modes

Demo #
Click below to watch a quick demo.

Getting started #
Add the following dependency to your pubspec.yaml
dependencies:
adaptive_chameleon_theme: <latest_version>
copied to clipboard
Usage #
This package allows for an arbitrary number of themes to be defined. Each theme has a unique ID
of type int. To create the themes and map them to IDs, first you have to create an instance of
ThemeCollection, like so:
final themeCollection = ThemeCollection(
themes: {
0: ThemeData(primarySwatch: Colors.blue),
1: ThemeData(primarySwatch: Colors.red),
},
fallbackTheme: ThemeData.light(), // optional fallback theme, default value is ThemeData.light()
);
copied to clipboard
I would however recommend you introduce a class with static const int values to
associate a name to each ID value for easier reference:

class AppThemes {
static const int LightBlue = 0;
static const int LightRed = 1;
}
final themeCollection = ThemeCollection(
themes: {
AppThemes.LightBlue: ThemeData(primarySwatch: Colors.blue),
AppThemes.LightRed: ThemeData(primarySwatch: Colors.red),
},
fallbackTheme: ThemeData.light(),
);
final darkThemeCollection = ThemeCollection(
themes: {
AppThemes.Blue: ThemeData(primarySwatch: Colors.blue),
AppThemes.Red: ThemeData(primarySwatch: Colors.red),
},
fallbackTheme: ThemeData.dark(),
);
copied to clipboard
NOTE: Remember to define a collection of dark themes equivalent in number to the normal themes.
Proceed to wrap your MaterialApp with AdaptiveChameleonThemeWidget in order to apply and modify UI
themes.
import 'package:example/themes.dart';
import 'package:flutter/material.dart';

import 'package:adaptive_chameleon_theme/adaptive_chameleon_theme.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return AdaptiveChameleonThemeWidget(
themeCollection: AppThemes.themeCollection,
darkThemeCollection: AppThemes.darkThemeCollection,
defaultThemeId: AppThemes.aokiji, // optional, default id is 0
builder: (context, theme, darkTheme, themeMode) {
return MaterialApp(
title: 'Flutter Demo',
theme: theme,
darkTheme: darkTheme,
themeMode: themeMode,
home: const MyHomePage(title: 'Adaptive Chameleon Theme'),
);
}
);
}
}
copied to clipboard
Changing Theme Mode #
You can utilise the changeThemeMode function from anywhere in your app. It provides a simple
and
straight forward way of altering the theme modes: light to dark, dark to light or to system
default.
This function has two optional parameters: dynamic and dark.
If the value of dynamic is true, it takes precedence over dark.
// sets theme mode to dark
AdaptiveChameleonTheme.of(context).changeThemeMode(dark: true);

// sets theme mode to light
AdaptiveChameleonTheme.of(context).changeThemeMode(dark: false);

// sets theme mode to system default
AdaptiveChameleonTheme.of(context).changeThemeMode(dynamic: true);
copied to clipboard
Changing Theme Color #
The theme can be set anywhere in the app, provided you have a BuildContext, e.g.:
AdaptiveChameleonTheme.of(context).setTheme(AppThemes.LightRed);
copied to clipboard
By setting the theme, its ID is automatically saved via the
shared_preferences package, so the next time the
app starts, the theme can be restored automatically.
How to get the current theme #
Current app ThemeMode
ThemeMode themeMode = AdaptiveChameleonTheme.of(context).themeMode;
copied to clipboard
The above example will return a value of the enum used by MaterialApp's ThemeMode with one of the following values:
system - Use either the light or dark theme based on what the user has selected in the system settings.
light - Always use the light mode regardless of system preference.
dark - Always use the dark mode (if available) regardless of system preference.
Current app ThemeId
To get the ID of the current theme, for example to create a selection UI as done in the example
app provided with this package, call
final themeId = AdaptiveChameleonTheme.of(context).themeId;
copied to clipboard
Also Included #
The plugin contains some out-of-the-box widgets to make implementation easier.
ThemeModeSelectorWidget #
This is a toggle buttons widget that allows you to switch theme modes.
const ThemeModeSelectorWidget()
copied to clipboard






ThemeColorSelectorWidget #
This is a toggle buttons widget that allows you to switch theme colors.
ThemeColorSelectorWidget(
themeCollection: AppThemes.themeCollection,
selectedTheme: AdaptiveChameleonTheme.of(context).themeId,
)
copied to clipboard



Example #
The example app can be found in the example folder. It implements a dropdown menu to select
between 5 themes. The app is the source for the video demo above.
Showcase #
Using this package in a live app? Let me know and I will add it here.
Maintainer #

Kevin Omyonga

If you experience any problems using this package, please create an issue on Github.
Pull requests are also welcome.
Acknowledgements #
Many thanks to the projects/packages below that served as inspiration for this undertaking:

dynamic_theme package from
Norbert Kozsir
easy_dynamic_theme package from
Rene Lazo Mendez
dynamic_themes package from
Julian Aßmann

Liked Adaptive Chameleon Theme?
Show some love and support by starring the repository.
Or You can

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter