appearance 0.0.1 copy "appearance: ^0.0.1" to clipboard
appearance: ^0.0.1 copied to clipboard

Flutter package to implement Light, Dark and Sytem Theme mode, and persist it on restart of app.

appearance

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 #

Appearance Demo 1 Appearance Demo 2

πŸ›  Installation #

  1. Add dependency to pubspec.yaml file:
    Get the latest version from the 'Installing' tab on pub.dev
dependencies:
  appearance: ^latest_version
  1. 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());
}
  1. extend your root class with AppearanceState using keyword with.
class _MyAppState extends State<MyApp> with AppearanceState { }
  1. 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.

πŸ“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 ⭐.

3
likes
150
pub points
50%
popularity
screenshot

Publisher

unverified uploader

Flutter package to implement Light, Dark and Sytem Theme mode, and persist it on restart of app.

Repository (GitHub)
View/report issues

Topics

#appearance #theme #light-mode #dark-mode

Documentation

API reference

License

MIT (license)

Dependencies

flutter, shared_preferences

More

Packages that depend on appearance