Flutter主题管理插件theme_kit的使用

Flutter主题管理插件theme_kit的使用

特性

• ✅ 简单设置深色和浅色主题。
• ✅ 在Material Design基础上使用自己的自定义主题令牌。
• ✅ 使用简单，只需导入主题并在Material组件中使用它，并且每个主题令牌都有自动完成功能，还会为您的主题自动生成文档文件。
• ✅ 完全可定制，生成的代码是可编辑且属于您的！
• ✅ 包含颜色、文本样式、字体系列和字体粗细的定义。
• ✅ 可重用。主题是在一个单独的包中生成的，可以在多个项目之间共享。
• ✅ 无需依赖项。
• ✅ 不需要构建运行程序😉。

入门指南 🚀

要使用theme_kit，请遵循以下步骤：

1. 安装mason：

   mason add theme_kit
   

2. 生成主题： 推荐在Flutter项目的根目录下创建一个名为packages的文件夹，在该文件夹内通过以下命令创建主题包（例如my_theme）：

   flutter create --template=package my_theme
   

3. 生成必要的文件： 进入主题包文件夹（例如/packages/my_theme），运行以下命令以替换并生成必要的文件：

   mason make theme_kit
   

4. 完成安装： 按照提示完成安装。确保主题名称与包名称相同。例如，在这种情况下，我们使用my_theme作为主题名称，mt作为前缀：

   What is the name of the theme? (theme kit) my theme
   What is the prefix you want to use in your theme classes? use lowercase, no spaces. Recommended to be 2-3 characters long. (tk) mt
   

5. 在应用程序中导入主题： 创建主题包后，转到应用程序的pubspec.yaml文件（根项目），并在dependencies部分中导入它。例如，如果主题包名称为my_theme，则应如下所示：

   dependencies:
     my_theme:
       path: packages/my_theme
   

6. 定义字体： 要使用主题中定义的字体，可以在应用程序的pubspec.yaml文件（根项目）中定义所需的字体。以下是一个如何定义字体的例子：

   fonts:
     - family: Poppins
       fonts:
         - asset: packages/my_theme/fonts/Poppins-Regular.ttf
           weight: 400
         - asset: packages/my_theme/fonts/Poppins-Medium.ttf
           weight: 500
         - asset: packages/my_theme/fonts/Poppins-SemiBold.ttf
           weight: 600
         - asset: packages/my_theme/fonts/Poppins-Bold.ttf
           weight: 700
   

7. 使用主题： 现在，您可以像这样使用主题（此示例使用my_theme作为主题名称，mt作为前缀）：

   import 'package:flutter/material.dart';
   import 'package:my_theme/my_theme.dart';
   
   void main() => runApp(const MyApp());
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     static final _lightTheme = MtTheme(
       primary: Colors.blue,
       secondary: Colors.blueGrey[200],
       success: Colors.green,
       warning: Colors.yellow,
       error: Colors.red,
       info: Colors.blue,
       background: Colors.white,
       surface100: Colors.white,
       surface200: Colors.grey[100],
       textPrimary: Colors.black,
       textSecondary: Colors.grey,
       divider: Colors.grey[300],
       border: Colors.grey[300],
     );
   
     static final _darkTheme = MtTheme(
       primary: Colors.blue,
       secondary: Colors.blueGrey[700],
       success: Colors.green,
       warning: Colors.yellow,
       error: Colors.red,
       info: Colors.blue,
       background: Colors.black,
       surface100: Colors.grey[900],
       surface200: Colors.grey[800],
       textPrimary: Colors.white,
       textSecondary: Colors.grey,
       divider: Colors.grey[700],
       border: Colors.grey[700],
     );
   
     @override
     Widget build(BuildContext context) {
       return MyTheme(
         lightTheme: _lightTheme,
         darkTheme: _darkTheme,
         child: MaterialApp(
           title: 'Example',
           theme: ThemeData(primarySwatch: Colors.blue),
           home: const Home(),
         ),
       );
     }
   }
   
   class Home extends StatelessWidget {
     const Home({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         backgroundColor: MtColor.background,
         body: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             const ThemeSettings(),
             MtText.displayXL("Display XL").styles(
               color: MtColor.secondary,
               fontWeight: MtFontWeight.bold,
             ),
             MtText.displayL("Display L").styles(
               color: MtColor.error,
               fontFamily: MtFontFamily.inter,
             ),
           ],
         ),
       );
     }
   }
   
   class ThemeSettings extends StatelessWidget {
     const ThemeSettings({super.key});
   
     @override
     Widget build(BuildContext context) {
       return Column(
         children: [
           MtText.displayXL("Theme Settings").styles(
             color: MtColor.textPrimary,
           ),
           Row(
             children: [
               ElevatedButton(
                 child: MtText.bodyM("Light Theme"),
                 onPressed: () {
                   MyTheme.setLightTheme();
                 },
               ),
               ElevatedButton(
                 child: MtText.bodyM("Dark Theme"),
                 onPressed: () {
                   MyTheme.setDarkTheme();
                 },
               ),
             ],
           ),
         ],
       );
     }
   }