flutter_custom_theme 0.1.1+2

  • Readme
  • Changelog
  • Example
  • Installing
  • 80

custom_theme #

pub package

Flutter package for managing custom themes. Make your own custom theme for custom components. Easily share it between projects and customize.

Usage #

To use this plugin:

  1. add custom_theme as a dependency in your pubspec.yaml file;
  2. define custom theme;
  3. use this theme in your widget;
  4. create custom theme instance in the application.

Define custom theme #

Define custom theme for your widget. It should extends CustomThemeData:

class CustomWidgetThemeData extends CustomThemeData {
  const CustomWidgetThemeData();
}

For easy access to this theme define static of(BuildContext) method:

class CustomWidgetThemeData extends CustomThemeData {
  static CustomWidgetThemeData of(BuildContext context) =>
      CustomThemes.of(context);

  const CustomWidgetThemeData();
}

Note: if your theme is not exists in context than null will be returned. You may want to define default theme instance to avoid that:

class CustomWidgetThemeData extends CustomThemeData {
  static final _default = const CustomWidgetThemeData();

  static CustomWidgetThemeData of(BuildContext context) =>
      CustomThemes.of(context) ?? _default;

  const CustomWidgetThemeData();
}

Now you can add any properties you need to customize appearance of your widget:

class CustomWidgetThemeData extends CustomThemeData {
  static final _default = const CustomWidgetThemeData();

  static CustomWidgetThemeData of(BuildContext context) =>
      CustomThemes.of(context) ?? _default;

  final TextStyle textStyle;
  final TextAlign textAlign;
  final Color backgroundColor;

  const CustomWidgetThemeData(
      {this.textStyle, this.textAlign, this.backgroundColor});
}

Use theme in widget #

To use theme in widget just get instance with CustomWidgetThemeData.of(context);.

class CustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Get theme
    final theme = CustomWidgetThemeData.of(context);

    return Container(
      color: theme.backgroundColor,
      child: Text(
        'My custom widget',
        style: theme.textStyle,
        textAlign: theme.textAlign,
      ),
    );
  }
}

Customize for application #

To provide theme for all underlying CustomWidget instances wrap it with CustomThemes:

@override
  Widget build(BuildContext context) {
    return CustomThemes(
      data: [
        // Custom theme for application
        const CustomWidgetThemeData(
          textStyle: TextStyle(
            fontSize: 20,
            color: Colors.indigo,
            fontWeight: FontWeight.bold,
          ),
          textAlign: TextAlign.center,
          backgroundColor: Colors.lightBlueAccent,
        )
      ],
      child: MaterialApp(
        title: 'Flutter Custom Theme Demo',
        theme: ThemeData(),
        home: MyHomePage(),
      ),
    );
  }

When to use #

Use it if your share widgets or even whole features between the projects.

For example: you create widget TextButton and want to use it in multiple projects. Of cause this button should look different in different projects and Flutter theme settings not always (or even always not) enough for customize it. As a solution you can create different widgets with custom appearance in each project, but it's just waste of time.

Another example: you want to share whole feature. It can include multiple screens and some business logic, but only difference from project to project - it's how it look like. This is a really big problem. You must write a lot of useless and repeating code to do this. All benefits of sharing feature are fall away.

With flutter_custom_theme you can easily define your own theme and share widgets or feature between the project. Now you just wrap all with CustomThemes with required themes instances and it's done.

Next release #

[0.1.1+2] - 2020-05-19 #

  • If CustomThemes storage is not found than of<T>() method returns null.

[0.1.1+1] - 2020-05-11 #

  • Add an example.
  • Update README.

[0.1.1] - 2020-04-30 #

  • Add complex theme data and recursive theme data search.

[0.1.0] - 2020-04-24 #

  • Core functionality.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_custom_theme/flutter_custom_theme.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _customThemeOn = false;

  @override
  Widget build(BuildContext context) {
    return CustomThemes(
      data: <CustomThemeData>[
        if (_customThemeOn)
          const CustomWidgetThemeData(
            textStyle: TextStyle(
              fontSize: 20,
              color: Colors.indigo,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
            backgroundColor: Colors.lightBlueAccent,
          )
      ],
      child: MaterialApp(
        title: 'Flutter Custom Theme Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(
          value: _customThemeOn,
          onValueChanged: (value) {
            setState(() {
              _customThemeOn = value;
            });
          },
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.value, this.onValueChanged}) : super(key: key);

  final bool value;
  final ValueChanged<bool> onValueChanged;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Theme Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Switch(
                  value: widget.value,
                  onChanged: widget.onValueChanged,
                ),
                Text('Custom theme')
              ],
            ),
            CustomWidget()
          ],
        ),
      ),
    );
  }
}

/// Custom widget supported custom themes.
class CustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = CustomWidgetThemeData.of(context);
    return Container(
      color: theme.backgroundColor,
      padding: const EdgeInsets.all(10),
      child: Text(
        'My custom widget',
        style: theme.textStyle,
        textAlign: theme.textAlign,
      ),
    );
  }
}

/// Theme data for [CustomWidget].
class CustomWidgetThemeData extends CustomThemeData {
  static final _default = const CustomWidgetThemeData();

  static CustomWidgetThemeData of(BuildContext context) =>
      CustomThemes.of(context) ?? _default;

  final TextStyle textStyle;
  final TextAlign textAlign;
  final Color backgroundColor;

  const CustomWidgetThemeData(
      {this.textStyle, this.textAlign, this.backgroundColor});
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_custom_theme: ^0.1.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:flutter_custom_theme/flutter_custom_theme.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
60
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
80
Learn more about scoring.

We analyzed this package on Jul 10, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • flutter_custom_theme that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
list_ext ^0.1.5 0.1.10
Transitive dependencies
collection 1.14.12 1.14.13
matcher 0.12.8
meta 1.1.8 1.2.2
path 1.7.0
quiver 2.1.3
sky_engine 0.0.99
stack_trace 1.9.5
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test