x_theme_provider 0.0.2

Flutter App Theme Provider Package.

Intuitive Theme Provider

Support for light and dark theme in your Flutter app and define your custom themes.

Demo: Theme Provider.

Usage

Wrap your XApp with ThemeProvider:

import 'package:theme_provider/theme_provider.dart';

class YourApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      builder: (mode) => MaterialApp(
        title: 'Demo App',
        theme: DefaultMaterialTheme.of(mode),
        darkTheme: DefaultMaterialTheme.dark,
        home: YourHomePage(),
      ),
    );
  }
}

Changing Theme Mode

ThemeProvider.of(context).dark();

ThemeProvider.of(context).light();

ThemeProvider.of(context).system();

ThemeProvider.of(context).toggle();

ThemeProvider.of(context).next();

ThemeProvider.of(context).previous();

ThemeProvider.of(context).mode = ThemeData.dark;

Create Your Themes

class YourMaterialTheme {

    final static ThemeData light = ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: Colors.purple,
    );

    final static ThemeData dark = ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.purple,
    );

    // MAKE SURE TO ADD THIS
    static ThemeData of(ThemeMode mode) => AppTheme.of(mode, light, dark);
}

CupertinoTheme?

Just use DefaultCupertinoTheme or define yours.

import 'package:theme_provider/theme_provider.dart';

class YourApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      builder: (mode) => CupertinoApp(
        title: 'Demo App',
        theme: DefaultCupertinoTheme.of(mode),
        home: YourHomePage(),
      ),
    );
  }
}

Listen to the mode changes

ThemeProvider.of(context).changeNotifier.addListener(() {
  // do your thing, or
  // persist mode like pref.setX(key, ThemeProvider.of(context).mode)
});

Or react on UI:

ValueListenableBuilder(
  valueListenable: ThemeProvider.of(context).changeNotifier,
  builder: (_, mode, child) {
    // update your UI
  },
);

More?

// get current theme?
Theme.of(context);

// get current mode?
ThemeProvider.of(context).mode;

Liked Cross Theme Provider?

Show some love, support by starring the repository, or you can

Future

• Persists selected mode.