custom_theme 0.1.0

Custom theme with user data support. Plugin wrap standard Flutter ThemeData to CustomData and allow to add some user defined data. Wrapped data is passed to MaterialApp theme and darkTheme params and [...]

custom_theme plugin

Custom theme with user data support.

Plugin wrap standard Flutter ThemeData to CustomData and allow to add some user defined data. Wrapped data is passed to MaterialApp theme and darkTheme params and then can be easily retrieved later and used anywhere in widgets tree.

Getting Started

Create class with your data:

class MyData {
  MyData({
    this.squareColor = Colors.greenAccent,
    this.size = 100,
    this.text = "Theme1",
  });

  final Color squareColor;

  final double size;

  final String text;
}

Create any number of themes with standard Flutter ThemeData and user data combined:

class LightTheme1 extends CustomTheme {
  LightTheme1()
      : super(
          themeData: ThemeData.light().copyWith(
              primaryColor: Colors.pink[300],
              accentColor: Colors.yellow,
              floatingActionButtonTheme: ThemeData.light()
                  .floatingActionButtonTheme
                  .copyWith(backgroundColor: Colors.yellow)),
          userData: MyData(),
        );
}

Add dark theme if needed:

class DarkTheme extends CustomTheme {
  DarkTheme()
      : super(
          themeData: ThemeData.dark().copyWith(
            primaryColor: Colors.purple,
            textTheme: ThemeData.dark().textTheme.copyWith(
                  body1: ThemeData.dark().textTheme.body1.copyWith(
                        color: Colors.cyan,
                      ),
                ),
          ),
          userData: MyData(
            text: "Dark",
            squareColor: Colors.pink[200],
            size: 80,
          ),
        );
}

Fill properties of your MaterialApp:

    return MaterialApp(
          title: 'Flutter Demo',
          theme: theme,
          darkTheme: DarkTheme(),
          home: child,
        );
}

, where theme is your currently selected theme - see example how to change theme with ValueListenableBuilder.

For simplicity create helper function to access your data:

    MyData getMyData(BuildContext context) =>
        CustomTheme.of(context).userData as MyData;

To access user data anywhere in the app widget tree call getMyData function:

    Text(
      getMyData(context).text,
    ),

To access standard theme you can call usual Theme.of(context) or CustomTheme.of(context)

Just like that