x_theme_provider 0.0.3

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(
      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.