Flutter 中的动态主题属性可以在运行时设置

Question

我想创建自己的主题属性，可以在运行时动态设置。我尝试为 TextTheme 创建一个扩展，如下所示：

extension CustomTextTheme on TextTheme {
  TextStyle get heading => themeMode == ThemeMode.light
      ? TextStyle(
          color: GlobalTheme.defaultLightTheme.textTheme.headline.color,
          fontSize: GlobalTheme.defaultLightTheme.textTheme.headline.fontSize,
        )
      : TextStyle(
          color: GlobalTheme.defaultDarkTheme.textTheme.headline.color,
          fontSize: GlobalTheme.defaultLightTheme.textTheme.headline.fontSize,
        );
}

问题是我如何动态更改运行时的扩展属性。我想要归档的是，我可以从服务器加载“主题配置”并在每个设备上动态设置该主题。

Answer 1

要在您需要的小部件树中传递和获取值InheritedWidget。

这是一种特殊类型Widgets，仅在小部件之间传输信息（例如ThemeDelivers ThemeData）。您不能ThemeData使用新字段进行扩展，因为扩展不会触发 上的更新Theme。但您可以创建自己的CustomTheme，它将与原始版本共存。

class CustomThemeData {
  const CustomThemeData(this.heading);

  final TextStyle heading;

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is CustomThemeData &&
          runtimeType == other.runtimeType &&
          heading == other.heading;

  @override
  int get hashCode => heading.hashCode;
}

现在创建一个InheritedWidget将提供自定义主题数据值（通过of）并将添加更新数据的可能性（通过update）

class CustomTheme extends InheritedWidget {
  const CustomTheme({
    Key? key,
    required this.data,
    required this.onUpdate,
    required Widget child,
  }) : super(key: key, child: child);

  final CustomThemeData data;
  final void Function(CustomThemeData) onUpdate;

  static CustomThemeData of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CustomTheme>()!.data;
  }

  static void update(BuildContext context, CustomThemeData data) {
    context.dependOnInheritedWidgetOfExactType<CustomTheme>()!.onUpdate(data);
  }

  @override
  bool updateShouldNotify(covariant CustomTheme oldWidget) {
    return data != oldWidget.data;
  }
}

这是自定义主题的支架

class ThemeSwitcherWidget extends StatefulWidget {
  final CustomThemeData initialTheme;
  final Widget child;

  const ThemeSwitcherWidget({
    Key? key,
    required this.initialTheme,
    required this.child,
  }) : super(key: key);

  @override
  _ThemeSwitcherWidgetState createState() => _ThemeSwitcherWidgetState();
}

class _ThemeSwitcherWidgetState extends State<ThemeSwitcherWidget> {
  CustomThemeData? _updatedTheme;

  @override
  Widget build(BuildContext context) {
    return CustomTheme(
      data: _updatedTheme ?? widget.initialTheme,
      onUpdate: (newData) => setState(() {
        _updatedTheme = newData;
      }),
      child: widget.child,
    );
  }
}

这是一个关于如何利用所有这些美感的示例：

void main() {
  runApp(
    const ThemeSwitcherWidget(
      initialTheme: CustomThemeData(TextStyle()),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'text',
                style: CustomTheme.of(context).heading,
              ),
              ElevatedButton(
                  onPressed: () {
                    CustomTheme.update(
                        context,
                        const CustomThemeData(TextStyle(
                          color: Colors.red,
                          fontSize: 44,
                        )));
                  },
                  child: const Text('Change theme')),
            ],
          ),
        ),
      ),
    );
  }
}

为了使代码不那么冗长，您可以使用provider它将为您完成所有更新的魔法。