shared_theme_flutter 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 49

shared_theme_flutter #

Flutter plugin to easily share a theme between Flutter and the web.

For more information see the shared_theme pub package or github repo.

[0.1.2] - September 27, 2018

  • Deprecate setTheme() and just make currentTheme writable.

[0.1.1] - September 26, 2018

  • Fixes for analyzer.

[0.1.0] - September 26, 2018

  • Doc improvements.

[0.0.2] - September 26, 2018

  • First release.


// For a complete working example, see
import 'package:flutter/material.dart';
// import 'package:sharedtheme_example/config.dart' show appName;
// import 'package:sharedtheme_example/themes.dart' show themeset;
import 'package:shared_theme_flutter/shared_theme_flutter.dart' as themer;
import 'package:shared_preferences/shared_preferences.dart';

const appName = 'Dummy Example';
final themeset = themer.ThemeSet(themes: []);

void main() => runApp(App());

class App extends StatefulWidget {
  _AppState createState() => _AppState();

class _AppState extends State<App> {
  themer.Theme theme;

  void initState() {
    // Set a default theme synchronously. If you want to wait until the user's
    // preferred theme is read from SharedPreferences, you'll need to show some
    // UI to the user in the mean time, such as a spinner or a splash screen.

    // Lookup the preferred theme.

  Widget build(BuildContext context) => MaterialApp(
        title: appName,
        theme: themer.themeData(theme),
        home: Scaffold(
          appBar: AppBar(
              title: Text(appName,
                  style: themer.textStyle(theme.fonts.title).copyWith(
                      color: Color(theme.colors.primary.contrast.argb))),
              actions: <Widget>[_buildThemeSwitch()]),
          body: Padding(
            padding: EdgeInsets.all(8.0),
            child: SingleChildScrollView(child: DemoItems()),

  void _setTheme(themer.Theme t) {
    theme = t;
    themer.currentTheme = t;

  Widget _buildThemeSwitch() =>
      Row(crossAxisAlignment:, children: <Widget>[
          style: themer.textStyleColored(
              theme.fonts.title, themer.contrastOf(theme.colors.primary)),
          value: theme.brightness == themer.Brightness.dark,
          onChanged: (enabled) => _toggleTheme(),

  void _readTheme() async {
    final prefs = await SharedPreferences.getInstance();
    try {
      final name = prefs.getString('theme');
      setState(() => _setTheme(themeset.getThemeByName(name)));
    } catch (noSavedTheme) {}

  void _toggleTheme() async {
    setState(() => _setTheme(theme == themeset.themes.first
        ? themeset.themes.last
        : themeset.themes.first));
    final prefs = await SharedPreferences.getInstance();

class DemoItems extends StatelessWidget {
  Widget build(BuildContext context) {
    final theme = themer.currentTheme;
    void _showSnackBar() => Scaffold.of(context)
        .showSnackBar(SnackBar(content: Text("I'm a SnackBar.")));
    Widget _colorWidget(themer.ContrastingColors colors, String text) =>
        _buildColorWidget(context, colors, text);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
        Text('Display4', style: Theme.of(context).textTheme.display4),
        Text('Display3', style: Theme.of(context).textTheme.display3),
        Text('Display2', style: Theme.of(context).textTheme.display2),
        Text('Display1', style: Theme.of(context).textTheme.display1),
        Text('Headline', style: Theme.of(context).textTheme.headline),
        Text('Title', style: Theme.of(context).textTheme.title),
        Text('Subhead', style: Theme.of(context).textTheme.subhead),
        Text('Body2', style: Theme.of(context).textTheme.body2),
        Text('Body1', style: Theme.of(context).textTheme.body1),
        Text('Button', style: Theme.of(context).textTheme.button),
        Text('Caption', style: Theme.of(context).textTheme.caption),
        _colorWidget(theme.colors.primary, 'Primary'),
        _colorWidget(theme.colors.primaryLight, 'Primary Light'),
        _colorWidget(theme.colors.primaryDark, 'Primary Dark'),
        _colorWidget(theme.colors.secondary, 'Secondary ("Accent")'),
        _colorWidget(theme.colors.secondaryLight, 'Secondary Light'),
        _colorWidget(theme.colors.secondaryDark, 'Secondary Dark'),
        _colorWidget(theme.colors.background, 'Background'),
        _colorWidget(theme.colors.background.invert(), 'Background (inverted)'),
        _colorWidget(theme.colors.card, 'Card'),
        _colorWidget(theme.colors.divider, 'Divider'),
        _colorWidget(theme.colors.error, 'Error'),
        _colorWidget(theme.colors.notice, 'Notice'),
        _colorWidget(theme.colors.indicator, 'Indicator'),
        _colorWidget(theme.colors.hint, 'Hint'),
        _colorWidget(theme.colors.selectedRow, 'SelectedRow'),
        SizedBox(height: 12.0),
        themer.primaryButton(_showSnackBar, text: 'Primary Button'),
        SizedBox(height: 12.0),
        themer.secondaryButton(_showSnackBar, text: 'Secondary Button'),
        themer.tertiaryButton(_showSnackBar, text: 'Tertiary Button'),
            TextField(decoration: InputDecoration(labelText: 'Input'))),

  Widget _buildColorWidget(
          BuildContext context, themer.ContrastingColors colors, String text) =>
          height: 56.0,
          width: 256.0,
          color: themer.colorOf(colors, Theme.of(context).backgroundColor),
          child: Text(text,
              style: Theme.of(context).textTheme.body2.copyWith(
                  color: themer.contrastOf(
                      colors, Theme.of(context).textTheme.body2.color))));

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  shared_theme_flutter: ^0.1.2

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:shared_theme_flutter/shared_theme_flutter.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Oct 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Maintenance suggestions

Package is getting outdated. (-6.58 points)

The package was last published 55 weeks ago.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
flutter 0.0.0
shared_theme ^0.1.2 0.1.2
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
shared_preferences ^0.4.2