flutter_custom_theme

Description:

flutter custom theme

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:

add custom_theme as a dependency in your pubspec.yaml file;
define custom theme;
use this theme in your widget;
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();
}
copied to clipboard
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();
}
copied to clipboard
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();
}
copied to clipboard
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});
}
copied to clipboard
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,
),
);
}
}
copied to clipboard
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(),
),
);
}
copied to clipboard
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: ...
copied to clipboard
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.