Flutter自定义主题插件flutter_custom_theme的使用

flutter_custom_theme 是一个用于管理自定义主题的 Flutter 插件。你可以为自定义组件创建自己的主题，并轻松地在项目之间共享和自定义这些主题。

使用方法

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 flutter_custom_theme 作为依赖：

dependencies:
  flutter_custom_theme: ^latest_version

2. 定义自定义主题

定义一个自定义主题类，该类需要继承 CustomThemeData：

class CustomWidgetThemeData extends CustomThemeData {
  static CustomWidgetThemeData of(BuildContext context) => CustomThemes.safeOf(
        context,
        mainDefault: const CustomWidgetThemeData(),
        darkDefault: const CustomWidgetThemeData.dark(),
      );

  final TextStyle? textStyle;
  final TextAlign? textAlign;
  final Color? backgroundColor;

  const CustomWidgetThemeData({
    this.textStyle,
    this.textAlign,
    this.backgroundColor,
  });

  const CustomWidgetThemeData.dark({
    this.textStyle,
    this.textAlign,
    this.backgroundColor = Colors.blueGrey,
  });
}

3. 在小部件中使用主题

在小部件中使用自定义主题：

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

  @override
  Widget build(BuildContext context) {
    final theme = CustomWidgetThemeData.of(context);
    return Container(
      color: theme.backgroundColor,
      padding: const EdgeInsets.all(10),
      child: Text(
        'My custom widget',
        style: theme.textStyle,
        textAlign: theme.textAlign,
      ),
    );
  }
}

4. 为应用创建自定义主题实例

在应用中提供自定义主题实例：

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

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

class _MyAppState extends State<MyApp> {
  bool _customThemeOn = false;

  @override
  Widget build(BuildContext context) {
    return CustomThemes(
      data: <CustomThemeData>[
        if (_customThemeOn)
          const CustomWidgetThemeData(
            textStyle: TextStyle(
              fontSize: 20,
              color: Colors.indigo,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
            backgroundColor: Colors.lightBlueAccent,
          )
      ],
      child: MaterialApp(
        title: 'Flutter Custom Theme Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(
          value: _customThemeOn,
          onValueChanged: (value) {
            setState(() {
              _customThemeOn = value;
            });
          },
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
    required this.value,
    required this.onValueChanged,
  }) : super(key: key);

  final bool value;
  final ValueChanged<bool> onValueChanged;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Theme Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Switch(
                  value: widget.value,
                  onChanged: widget.onValueChanged,
                ),
                const Text('Custom theme')
              ],
            ),
            const CustomWidget()
          ],
        ),
      ),
    );
  }
}

暗色主题支持

你可以在光模式和暗模式下提供不同的主题数据：

return CustomThemes(
  data: <CustomThemeData>[
    const CustomThemeDataSet(
      data: CustomWidgetThemeData(
        backgroundColor: Colors.lightBlueAccent,
      ),
      darkData: CustomWidgetThemeData(
        backgroundColor: Colors.black,
      ),
    ),
  ],
  child: ...
);

何时使用

当你需要在多个项目中共享小部件或整个功能时，可以使用 flutter_custom_theme。例如：

• 你创建了一个 TextButton 小部件，并希望在多个项目中使用它。每个项目中的按钮外观可能不同，而 Flutter 的主题设置可能不足以满足自定义需求。通过自定义主题，你可以在每个项目中定义不同的外观，而不需要重复编写代码。
• 你希望共享一个包含多个屏幕和一些业务逻辑的功能模块，但每个项目中的外观不同。使用 flutter_custom_theme，你可以轻松地为每个项目定义不同的主题，从而避免编写大量重复代码。

通过 flutter_custom_theme，你可以轻松定义自己的主题并共享小部件或功能模块，只需将所有内容包装在 CustomThemes 中并提供所需的主题实例即可。