x_theme_provider 0.0.5

Effortlessly switch between light, dark, and system modes, or create custom themes. Seamlessly integrates with both MaterialApp and CupertinoApp.

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(
      themes: DefaultMaterialTheme(),
      builder: (theme) => MaterialApp(
        title: 'Demo App',
        theme: theme,
        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 = ThemeService.darkMode;

Create Your Themes

class YourMaterialTheme extends AppTheme<ThemeData> {

    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 a list of your themes
    @override
    List<ThemeData> themeList() => super.from(light, dark, rest: [other thems]);
}

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(
      themes: DefaultCupertinoTheme(),
      builder: (theme) => CupertinoApp(
        title: 'Demo App',
        theme: theme,
        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;

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

// get name of a mode:
YourAppTheme.nameOf(mode); // e.g. DefaultCupertinoTheme().nameOf(mode)

Liked Cross Theme Provider?

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

Future

• Persists selected mode.