theme_provider 0.0.1+6

Easy to use, customizable and pluggable Theme Provider. This Widget can be used to easily provide a theme controller across the widget tree.

theme_provider

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

Basic Usage

Include in your project

dependencies:
  theme_provider: ^0.0.1

run packages get and import it

import 'package:theme_provider/theme_provider.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,
      ),
    );
  }
}

To change the theme:

 ThemeProvider.controllerOf(context).nextTheme();

Access theme data:

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

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);
  }

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,
      ),
  );
}
}

Then the option can be retrieved as,

ThemeProvider.optionsOf<ThemeOptions>(context).specificButtonColor

TODO

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

API Plan

This is what the API is supposed to look like after publishing.

import 'package:flutter/material.dart';

class DataOptions{
final Color textColorOnPrimaryColor;
  final Color textColorOnAccentColor;

  DataOptions({this.textColorOnPrimaryColor, this.textColorOnAccentColor});
}


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return ThemeProvider(
      loadFromDeviceIfPossible: true,
      saveThemeChangesToDevice: true,
      defaultThemeId: "dark_theme",
      themeSwitchErrorHandler: ThemeSwitchErrorHandler.SILENTLY_DEFAULT,
      themes: [
        AppTheme<DataOptions>.pinkAppTheme(
          options: DataOptions(
              textColorOnPrimaryColor: Colors.black,
              textColorOnAccentColor: Colors.black,
            ),
          ),
        AppTheme<DataOptions>(
          id: "dark_theme",
          description: "Dark theme - white combined with black",
          data: ThemeData(
              primaryColor: Colors.black,
              accentColor: Colors.white,
              brightness: Brightness.dark,
            ),
          options: DataOptions(
              textColorOnPrimaryColor: Colors.white,
              textColorOnAccentColor: Colors.black,
            ),
        ),
        AppTheme<DataOptions>(
          id: "light_theme",
          description: "Light theme - only white",
          data: ThemeData(
              primaryColor: Colors.white,
              accentColor: Colors.white,
              brightness: Brightness.dark,
            ),
          options: DataOptions(
              textColorOnPrimaryColor: Colors.black,
              textColorOnAccentColor: Colors.black,
            ),
        ),
      ],
      builder: (theme) => MaterialApp(
        theme: theme,
        home: HomePage(),
      ),
    );
  }
}


class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(title: Text("Example"), actions: CycleThemeIconButton()),
        body: Builder(
          builder: (context) => Center(
            child: FlatButton(
              child: Text("Press ME",
                  style: TextStyle(color: ThemeProvider.optionsOf(context).textColorOnAccentColor)
                ),
              onPressed(){
                ThemeProvider.controllerOf(context).nextTheme();
                ThemeProvider.controllerOf(context).prevTheme();

                if (ThemeProvider.controllerOf(context).currentTheme == 'lighr_theme'){
                  ThemeProvider.controllerOf(context).setTheme('dark_theme');
                }

                showDialog(context: context, ThemeSelectorDialog());
              }
            ),
          ),
        ),
      );
  }
}

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.