在 Flutter(Dart) 中定义主题对象的好方法是什么？

Question

I know about the theme object "ThemeData" and i'm making use of that as well, but alas the need for extending it has arisen.

What I'm trying to accomplish is defining style sets to reference throughout my app. For example i have this

child: Text(
  advisoryServiceStatus[item.status - 1],
  style: TextStyle(
      color: Color.fromRGBO(0, 0, 0, 0.6),
      fontSize: 12,
      fontWeight: FontWeight.w500),
),

and i want to move the TextStyle in a file so i can do something like

child: Text(
  advisoryServiceStatus[item.status - 1],
  style: extendedThemeConfig.textStyles.mutedText,

but i have troubled properly defining my style object. Here's what i tried. Maybe i shouldn't be using classes, but i haven't managed to define them as objects. (my understanding of the concepts is a bit shabby)

This is how i tried to define my extendedThemeConfig

class TextStyles {
  final TextStyle mutedText = TextStyle(
      color: Color.fromRGBO(0, 0, 0, 0.6),
      fontSize: 12,
      fontWeight: FontWeight.w500);
}

class ExtendedThemeConfig {
  TextStyles textStyles;
}

const extendedThemeConfig = ExtendedThemeConfig;

Answer 1

Why your approach doesn't work

It probably does work, but features like hot-reload aren't supported, because you introduce global state to your app, which is often not what you want.

So, how to do it better?

I already answered a similar question here more elaborately, but here's a version adapted to your problem:

Because Flutter is open source, we can just look at how the Theme is implemented and copy that code to create a custom widget that functions just like a Theme . Here's a boiled-down version:

@immutable
class MyThemeData {
  MyThemeData({
    this.mutedText,
  });

  final TextStyle mutedText;
}

class MyTheme extends StatelessWidget {
  MyTheme({
    Key key,
    @required this.data,
    @required this.child,
  }) : super(key: key);

  final MyThemeData data;
  final Widget child;

  static MyThemeData of(BuildContext context) {
    return (context.ancestorWidgetOfExactType(MyTheme) as MyTheme)?.data;
  }

  @override
  Widget build(BuildContext context) => child;
}

Now, you can just wrap the MaterialApp in a MyTheme widget:

MyTheme(
  data: MyThemeData(
    mutedText: ...,
  ),
  child: ... (here goes the MaterialApp)
)

Then anywhere in your app, you can write MyTheme.of(context).mutedText .
You can adapt the MyThemeData class to your needs, storing anything you want.