Flutter主题管理插件best_theme的使用

Flutter主题管理插件best_theme的使用

Best Theme

Best Theme 是一个强大的 Flutter 插件，用于简化应用程序中的主题管理。它提供了一种直观的方式来定义和切换轻模式和暗模式，并允许您添加自定义颜色。

特性

• 轻松的主题管理：轻松管理您的 Flutter 应用程序中的主题。
• 自定义颜色支持：通过定义光模式和暗模式变体来添加自定义颜色。
• 主题模式切换：轻松切换不同的主题模式，包括系统、光模式和暗模式。
• 集成简洁：快速与现有的 Flutter 项目集成。
• 支持 go router

安装

要在终端中安装 Best Theme 包，请运行以下命令：

flutter pub add best_theme
flutter pub add best_theme_annotation
dart pub add best_theme_generator
dart pub add dev:build_runner

使用

1. 创建一个主题类 定义一个扩展自生成类的主题类。类名应与所需的主题名称匹配。

   import 'package:best_theme/best_theme.dart';
   import 'package:best_theme_annotation/best_theme_annotation.dart';
   import 'package:flutter/material.dart';
   
   part 'filename.g.dart';
   
   [@BestTheme](/user/BestTheme)
   class MyTheme extends _$MyTheme {
   }
   

   运行 dart run build_runner build 或 dart run build_runner watch 或 dart run build_runner watch --delete-conflicting-outputs 来构建代码。

2. 定义颜色 使用 BestColor 类创建颜色列表，指定光模式和暗模式变体。

   List<BestColor> data = [
     BestColor(name: 'color1', light: Colors.white, dark: Colors.black),
     BestColor(name: 'color2', light: Colors.black, dark: Colors.white),
     BestColor(name: 'color3', light: Colors.amber, dark: Colors.red),
     BestColor(name: 'color4', light: Colors.amber, dark: Colors.red),
     BestColor(name: 'grey2', light: Colors.grey, dark: Colors.blueGrey),
     BestColor(name: 'grey3', light: Colors.grey, dark: Color.fromARGB(255, 3, 43, 66)),
   ];
   

3. 注释你的主题类 使用 @BestTheme 注解来定义主题变量。

   [@BestTheme](/user/BestTheme)(vars: [
     'color1',
     'color2',
     'color3',
     'color4',
     'grey2',
     'grey3',
   ])
   class MyTheme extends _$MyTheme {
     MyTheme() : super(myColors: data, mode: ThemeMode.system);
   }
   

4. 在 main 文件中创建对象 在主文件中创建主题对象。

   MyTheme myTheme = MyTheme();
   void main() {
     runApp(const MyApp());
   }
   

5. 将 MyApp 的子类包裹在 BestTheme 中 可以使用 myTheme.BestTheme() 将 MyApp 子类包裹在 BestTheme 中。

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return myTheme.BestTheme(
         context: context,
         materialApp: MaterialApp(
           title: 'Flutter Demo',
           theme: ThemeData(
             colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
             useMaterial3: true,
           ),
           home: const MyHomePage(title: 'Flutter Demo Home Page'),
         ),
       );
     }
   }
   

6 使用自定义颜色 现在可以在整个应用中使用定义的颜色，但需要包裹在 BestThemeBuilder 中。例如：

A - 如果你想为所有 widget 类的所有 widget 包裹 scaffold，则像下面这样：

mytheme.BestThemeBuilder(
  builder: (theme, context) {
    return Scaffold(
      // 添加你的代码
    );
  },
);

B - 你可以只包裹一些 widget：

mytheme.BestThemeBuilder(
  builder: (theme, context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(color: theme.grey3),
      child: const Text('example'),
    );
  },
);

警告：一旦主题更改，所有在 BestThemeBuilder 中的 widget 都会重新加载。

对于直接访问 ThemeData 中的一些颜色的快捷方法：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(color: myTheme.primary(context)),
  child: Text('Example'),
);

1. 切换主题 可以使用 switch 来轻松切换主题模式。

   Switch(
     value: myTheme.isDark,
     onChanged: (value) {
       myTheme.toggle();
     },
   );
   

2. 如何设置自定义字体？

   myTh.BBestTheme(
     context: context,
     materialApp: MaterialApp(
       title: 'Dosty',
       theme: ThemeData(
         colorScheme: ColorScheme.fromSeed(seedColor: myTheme.main),
         scaffoldBackgroundColor: const Color.fromARGB(225, 238, 238, 238),
         useMaterial3: true,
         fontFamily: 'kurdish',
       ),
       darkTheme: ThemeData.dark().copyWith(
         colorScheme: ColorScheme.fromSeed(seedColor: myTheme.main),
         scaffoldBackgroundColor: const Color(0xff111015),
         textTheme: ThemeData.dark().textTheme.apply(fontFamily: 'kurdish'),
       ),
       home: const BottomNavigation(),
     ));
   

3. 访问自定义颜色 你可以通过 mytheme 对象而不是 BestThemeBuilder 访问自定义颜色，例如：

   Container(
     width: 100,
     height: 100,
     decoration: BoxDecoration(color: mytheme.colors.color1),
     child: const Text('example'),
   );
   

   警告：不要使用这种方式获取颜色，如果想要实时切换主题时更新颜色。

4. 使用 go router 设置 useRouterConfig 为 true 在 mytheme.BBestTheme() Widget 中：

   mytheme.BBestTheme(
     context: context,
     useRouterConfig: true,
   );
   

变量

其他方法

简短方法

开发者信息

此包由 Dosty Pshtiwan 开发。

链接

• 文档：https://fersaz.com/flutter/best_theme
• YouTube 视频：https://www.youtube.com/playlist?list=PLwY2YLEPF3yAeT3r_Pdak7DO0PQbvzN_g
• Facebook：https://www.facebook.com/dosty.pshtiwan18

示例代码