flutter - 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，它仅在小部件之间传输信息(例如Theme 传递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 ，它将为您完成所有这些神奇的更新。