Dart 自定义主题无法正常工作

这与context和Theme.of的工作方式有关.

来自主题类源代码:

  static ThemeData of(BuildContext context, { bool shadowThemeOnly = false }) {
    final _InheritedTheme inheritedTheme =
        context.inheritFromWidgetOfExactType(_InheritedTheme);
    if (shadowThemeOnly) {
      if (inheritedTheme == null || inheritedTheme.theme.isMaterialAppTheme)
        return null;
      return inheritedTheme.theme.data;
    }

    final ThemeData colorTheme = (inheritedTheme != null) ? inheritedTheme.theme.data : _kFallbackTheme;
    final MaterialLocalizations localizations = MaterialLocalizations.of(context);
    final TextTheme geometryTheme = localizations?.localTextGeometry ?? MaterialTextGeometry.englishLike;
    return ThemeData.localize(colorTheme, geometryTheme);
  }

Theme.of(和Navigator.of()，....例如，查看传递给它们的上下文，然后向上遍历小部件树，查找指定类型的小部件.

现在，看看你的代码

Widget build(BuildContext context) {
    return new MaterialApp(
        theme: _buildDarkTheme(),
        home: new Scaffold(
          appBar: _buildAppBar(),
          body: new Container(
            color: Theme.of(context).accentColor,

你可以看到，你传递到Theme.of的context实际上是你正在创建的主题之上的上下文.因此，它将找不到您的主题，并将恢复为默认设置.这是因为小部件树看起来有点像下面(忽略所有中间层，箭头指向您正在使用的上下文).

MyApp - context <--------
  MaterialApp
    Theme
      Scaffold
        

有两种方法可以解决这个问题；第一种是使用Builder类在主题下面具有上下文的闭包中构建小部件.它看起来就像这样:

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _buildDarkTheme(),
      home: Scaffold(
        appBar: _buildAppBar(),
        body: Builder(
          builder: (context) => Container(
            color: Theme.of(context).accentColor,
            height: double.infinity,
            child: ListView.builder(...)
          ),
        ),
      ),
    );
  }
}

它会做出一棵看起来有点像这样的树:

MyApp - context
  MaterialApp
    Theme
      Scaffold
        Builder - context <---------

另一个(更好的)选项是将构建器的代码拆分为自己的类——StatelessWidget继承类或StatefulWidget和State对.