Customizable and pluggable Theme Provider with Flutter

theme_provider

Easy to use, customizable and pluggable Theme Provider. This is still a work in progress.

Include in your project

dependencies:
  theme_provider: ^0.0.1

YAML

run packages get and import it

import 'package:theme_provider/theme_provider.dart';

Dart

Usage

Wrap your material app like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeProvider(
      builder: (context, theme) => MaterialApp(
        home: HomePage(),
        theme: theme,
      ),
    );
  }
}

Dart

To change the theme:

 ThemeProvider.controllerOf(context).nextTheme();

Dart

Access current AppTheme

 ThemeProvider.themeOf(context)

Dart

Access theme data:

 ThemeProvider.themeOf(context).data
 // or
 Theme.of(context)

Dart

Passing Additional Options

This can also be used to pass additional data associated with the theme. Use options to pass additional data that should be associated with the theme.
eg: If font color on a specific button changes create a class to encapsulate the value.

  class ThemeOptions{
    final Color specificButtonColor;
    ThemeOptions(this.specificButtonColor);
  }

Dart

Then provide the options with the theme.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return ThemeProvider(
    themes: themes: [
        AppTheme<ThemeOptions>(
            data: ThemeData.light(),
            options: ThemeOptions(Colors.blue),
        ),
        AppTheme<ThemeOptions>(
            data: ThemeData.dark(),
            options: ThemeOptions(Colors.red),
        ),
      ],
      builder: (context, theme) => MaterialApp(
        home: HomePage(),
        theme: theme,
      ),
  );
}
}

Dart

Then the option can be retrieved as,

ThemeProvider.optionsOf<ThemeOptions>(context).specificButtonColor

Dart

Additonal Widgets

Theme Cycle Widget

IconButton to be added to AppBar to cycle to next theme.

Scaffold(
  appBar: AppBar(
    title: Text("Example App"),
    actions: [CycleThemeIconButton()]
  ),
),

Dart

Theme Selecting Dialog

SimpleDialog to let the user select the theme.

showDialog(context: context, builder: (_) => ThemeDialog())

Dart

TODO

• [x] Add next theme command
• [x] Add theme cycling widget
• [x] Add theme selection by theme id
• [x] Add theme select and preview widget
• [ ] Persist current selected theme
• [x] Add unit tests and example
• [x] Remove provider dependency

GitHub

kdsuneraavinash/theme_provider

153

Easy to use, customizable and pluggable Theme Provider. — Read More

https://pub.dartlang.org/packages/theme_provider

Latest commit to the master branch on 7-1-2019

Download as zip