flutter_custom_theme 0.2.1

Make your own custom theme for custom components. Easily share it between projects and customize.

custom_theme

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 (and don't forget about the dark theme):

class CustomWidgetThemeData extends CustomThemeData {
  static CustomWidgetThemeData of(BuildContext context) => CustomThemes.safeOf(
        context,
        mainDefault: const CustomWidgetThemeData(),
        darkDefault: const CustomWidgetThemeData.dark(),
      );

  const CustomWidgetThemeData();

  const CustomWidgetThemeData.dark();
}

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

class CustomWidgetThemeData extends CustomThemeData {
  static CustomWidgetThemeData of(BuildContext context) => CustomThemes.safeOf(
        context,
        mainDefault: const CustomWidgetThemeData(),
        darkDefault: const CustomWidgetThemeData.dark(),
      );

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

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

  const CustomWidgetThemeData.dark(
      {this.textStyle, this.textAlign, this.backgroundColor = Colors.blueGrey});
}

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

Dark theme support

You can provide different data for the light and dark mode.

@override
Widget build(BuildContext context) {
  return CustomThemes(
    data: [
      const CustomThemeDataSet(
      data: CustomWidgetThemeData(
        backgroundColor: Colors.lightBlueAccent,
      ),
      darkData: CustomWidgetThemeData(
        backgroundColor: Colors.black,
      ),
    ],
    child: ...

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.