Appearance

Flutter package that easily implement Light, Dark and System theme mode in your application and persists the theme mode on restart of the application.

🚀 Demo: Appearance

📱 Screenshots

🛠 Installation

1. Add dependency to pubspec.yaml file:
   Get the latest version from the 'Installing' tab on pub.dev

dependencies:
  appearance: ^latest_version

2. Import the package

import 'package:appearance/appearance.dart';

📘 How to use

1. Initialize SharedPreferencesManager singleton for SharedPreference and add it before runApp() method.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SharedPreferencesManager.instance.init();
  runApp(const MyApp());
}

2. extend your root class with AppearanceState using keyword with.

class _MyAppState extends State<MyApp> with AppearanceState { }

3. Wrap your MaterialApp or CupertinoApp with BuildWithAppearance

BuildWithAppearance(
    initial: ThemeMode.light, // optional : default value is [ThemeMode.system]
    builder: (context) => MaterialApp()
);

Using MaterialApp

BuildWithAppearance(
    initial: ThemeMode.light, // optional : default value is [ThemeMode.system]
    builder: (context) => MaterialApp(
        title: 'Appearance (Material Example)',
        themeMode: Appearance.of(context)?.mode,
        theme: ThemeData(
            brightness: Brightness.light,
        ),
        darkTheme: ThemeData(
            brightness: Brightness.dark,
        ),
        home: const HomeMaterialPage(),
    ),
);

Using CupertinoApp

BuildWithAppearance(
    initial: ThemeMode.light, // optional : default value is [ThemeMode.system]
    builder: (context) {
        return CupertinoApp(
            title: 'Appearance (Cupertino Example)',
            theme: CupertinoThemeData(
                brightness: Appearance.of(context)?.cupertinoBrightness!,
            ),
            localizationsDelegates: const [
                DefaultMaterialLocalizations.delegate,
                DefaultCupertinoLocalizations.delegate,
                DefaultWidgetsLocalizations.delegate,
            ],
            home: HomeCupertinoPage(),
        );
    },
);

🌟 Features

• Light, Dark and System mode options to change theme of app.

• Theme persistance: Saved theme is persisted using SharedPreferences on restart.

• Auto Listen Theme Mode changes, without adding extra listener.

• Material and Cupertino, both apps are supported.

🧰 Parameters

• initial: [optional]
  Set the initial ThemeMode of the app, by default its value is ThemeMode.system

Change Theme Mode

You can use the setMode method to change the theme mode of the app.

 // sets theme mode to System
 Appearance.of(context)?.setMode(ThemeMode.system),

 // sets theme mode to Light
 Appearance.of(context)?.setMode(ThemeMode.light),

 // sets theme mode to Dark
 Appearance.of(context)?.setMode(ThemeMode.dark),

Get Theme Mode

 // get active theme mode
 Appearance.of(context)?.mode

Get Cupertino Theme brightness

 // get active cupertino theme brightness
 Appearance.of(context)?.cupertinoBrightness!,

💻 Example

Check out the example app in the example directory for both Material and Cupertino.

• MaterialApp Example

• CupertinoApp Example

📝Contribution

Feel free to contribute to this project.

• If you found a bug or have a feature request, open an issue.

• If you want to contribute, submit a pull request.

💳 License

This project is LICENSED under the MIT License. Use it freely, but let's play nice and give credit where it's due!

🎉 Conclusion

I will be happy to answer any questions that you may have on this approach,
If you liked this package, don't forget to show some ❤️ by smashing the ⭐.