How to Add Themes to Your Flutter Apps with Adaptive Chameleon Theme

Flutter is a great framework for building beautiful, natively compiled, multi-platform applications from a single codebase. But what if you want to give your users the option to customize the look and feel of your app with different themes? Or what if you want to adapt your app’s theme to the system’s theme mode (light or dark)? Or what if you want to do both?

That’s where Adaptive Chameleon Theme comes in handy. This package will automatically retrieve your OS-defined theme (dynamic), force your preferred one (light or dark), allow you to present the user with a set of color themes to choose from and persist this choice in your device.

In this article, I will show you how to use Adaptive Chameleon Theme in your Flutter app and how to create stunning UIs with minimal effort.

What is Adaptive Chameleon Theme?

Adaptive Chameleon Theme is a Flutter package that simplifies the process of adding themes to your app. It allows you to:

• Set a default theme for your app
• Override the system theme mode and set yours (light or dark)
• Change the theme colors dynamically
• Customize the color palettes for different theme modes
• Persist the user’s theme choice across sessions

The package works by wrapping your app with an AdaptiveChameleonTheme widget, which provides a ThemeCollection object that contains all the themes you want to use. You can then access the current theme data using AdaptiveChameleonTheme.of(context) or change it using eitherAdaptiveChameleonTheme.of(context).changeThemeMode(dark: true) or AdaptiveChameleonTheme.of(context).setTheme(AppThemes.LightRed).

The package also provides some handy widgets to make the integration easier, such as ThemeModeSelectorWidget and ThemeColorSelectorWidget

Demo

https://www.youtube.com/watch?v=xCCHCgYo80c

How to use Adaptive Chameleon Theme?

To use Adaptive Chameleon Theme in your app, you need to follow these steps:

Add the dependency to your pubspec.yaml file:

dependencies:
  adaptive_chameleon_theme: <latest_version>

Import the package in your code:

import 'package:adaptive_chameleon_theme/adaptive_chameleon_theme.dart';

Define your themes and map them to IDs using a ThemeCollection object. You can use any integer value as an ID, but I recommend using a class with static constants for readability. For example:

class AppThemes {
  static const int LightBlue = 0;
  static const int LightRed = 1;
  static const int DarkBlue = 2;
  static const int DarkRed = 3;
}

final lightThemeCollection = ThemeCollection(
  themes: {
    AppThemes.LightBlue: ThemeData(primarySwatch: Colors.blue),
    AppThemes.LightRed: ThemeData(primarySwatch: Colors.red),
  },
  fallbackTheme: ThemeData.light(),
);
final darkThemeCollection = ThemeCollection(
  themes: {
    AppThemes.DarkBlue: ThemeData(primarySwatch: Colors.blue),
    AppThemes.DarkRed: ThemeData(primarySwatch: Colors.red),
  },
  fallbackTheme: ThemeData.dark(),
);

Wrap your app with an AdaptiveChameleonThemeWidget widget and pass the theme collections you defined. You can also specify a default theme ID and whether you want to override the system theme mode or not. For example:

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

1. Use AdaptiveChameleonTheme.of(context) to access the current theme data anywhere in your app. For example:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = ChameleonTheme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Text(
          'Hello, world!',
          style: theme.textTheme.headline4,
        ),
      ),
    );
  }
}

Use the ThemeModeSelectorWidget andThemeColorSelectorWidget to alter the theme in real-time. No app restart is required.

Conclusion

Adaptive Chameleon Theme is a powerful and easy-to-use package that lets you add themes to your Flutter app with minimal effort. It handles the logic of retrieving, overriding, changing, and persisting the theme data for you. It also provides some handy widgets to display and select themes for your app.

If you want to learn more about Adaptive Chameleon Theme, you can check out the GitHub repository or the pub.dev page.

I hope you enjoyed this article and found it useful. If you did, please share it with your friends and colleagues who might be interested in Flutter and theme customization. And if you have any feedback or questions, feel free to leave a comment below.

Happy coding! 🚀