Flutter主题构建插件material_theme_builder的使用

简介

Material Theme Builder for Flutter 是一个简单的 Flutter 接口，用于 Material Theme Builder。您可以在线查看原始构建器：https://material-foundation.github.io/material-theme-builder/。

特性

• 使用单个颜色创建调音色板
• 使用 3 到 5 种颜色（主色、次色、第三色、错误色、中性色）创建 ColorScheme

开始使用

步骤 1：添加包到您的 pubspec.yaml

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  material_theme_builder: ^x.y.z

然后运行以下命令安装包：

flutter pub get

步骤 2：使用该包

下面是一个简单的示例，展示了如何在 Flutter 应用程序中使用 material_theme_builder。

示例代码

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:material_theme_builder/material_theme_builder.dart';

// 定义应用的主类
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 设置应用的主题
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: MaterialThemeBuilder(
          primary: Colors.blue,
          secondary: Colors.purple,
          tertiary: Colors.lightBlue
        ).toScheme()
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 定义主页的类
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// 主页的状态管理类
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // 返回页面的布局
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: MaterialThemeBuilder.tonalPalette(Color(0xff80BC95))
            .entries.map((e) =>
              Container(
                height: 60,
                width: 200,
                color: e.value,
                child: Center(
                  child: Text(
                    e.key.toString(),
                    style: TextStyle(
                      color: e.key < 60 ? Colors.white : Colors.black,
                      fontSize: 18,
                      fontWeight: FontWeight.w700
                    )
                  )
                )
              )
            )
            .toList()
        )
      )
    );
  }
}

解释

1. 导入库：

   import 'package:flutter/material.dart';
   import 'package:material_theme_builder/material_theme_builder.dart';
   

2. 定义应用的主类：

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           colorScheme: MaterialThemeBuilder(
             primary: Colors.blue,
             secondary: Colors.purple,
             tertiary: Colors.lightBlue
           ).toScheme()
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

   这里我们定义了一个 MaterialApp，并设置了 ThemeData 的 colorScheme 使用 MaterialThemeBuilder 创建的颜色方案。

3. 定义主页的类：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key, required this.title}) : super(key: key);
     final String title;
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

4. 主页的状态管理类：

   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: MaterialThemeBuilder.tonalPalette(Color(0xff80BC95))
               .entries.map((e) =>
                 Container(
                   height: 60,
                   width: 200,
                   color: e.value,
                   child: Center(
                     child: Text(
                       e.key.toString(),
                       style: TextStyle(
                         color: e.key < 60 ? Colors.white : Colors.black,
                         fontSize: 18,
                         fontWeight: FontWeight.w700
                       )
                     )
                   )
                 )
               )
               .toList()
           )
         )
       );
     }
   }