Flutter主题美化插件catppuccin_flutter的使用

Flutter主题美化插件catppuccin_flutter的使用

项目简介

Catppuccin 是一个流行的配色方案，适用于多种编程语言和框架。catppuccin_flutter 是专门为 Flutter 项目设计的主题美化插件，提供了四种不同的主题风格：Latte、Frappé、Macchiato 和 Mocha。每个主题都有丰富的颜色选择，可以帮助你快速为应用添加美观的视觉效果。

预览

以下是 catppuccin_flutter 提供的四种主题风格的预览：

• 🌻 Latte

• 🪴 Frappé

• 🌺 Macchiato

• 🌿 Mocha

安装

要使用 catppuccin_flutter 插件，按照以下步骤操作：

1. 将 catppuccin_flutter 添加到 pubspec.yaml 文件中：

   dependencies:
     # 其他依赖项
     catppuccin_flutter: ^1.0.0
     # 其他依赖项
   

2. 在终端中运行以下命令以获取依赖项：

   flutter pub get
   

使用方法

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 catppuccin_flutter 插件：

import 'package:catppuccin_flutter/catppuccin_flutter.dart';
import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: catppuccinTheme(catppuccin.mocha), // 使用 Mocha 主题
      home: const MyHomePage(
        title: 'Catppuccin Theme',
      ),
    );
  }
}

// 获取颜色映射
Map<String, Color> getColorMap(Flavor flavor) {
  return {
    "rosewater": flavor.rosewater,
    "flamingo": flavor.flamingo,
    "pink": flavor.pink,
    "mauve": flavor.mauve,
    "red": flavor.red,
    "maroon": flavor.maroon,
    "peach": flavor.peach,
    "yellow": flavor.yellow,
    "green": flavor.green,
    "teal": flavor.teal,
    "sky": flavor.sky,
    "sapphire": flavor.sapphire,
    "blue": flavor.blue,
    "lavender": flavor.lavender,
    "text": flavor.text,
    "subtext1": flavor.subtext1,
    "subtext0": flavor.subtext0,
    "overlay2": flavor.overlay2,
    "overlay1": flavor.overlay1,
    "overlay0": flavor.overlay0,
    "surface2": flavor.surface2,
    "surface1": flavor.surface1,
    "surface0": flavor.surface0,
    "crust": flavor.crust,
    "mantle": flavor.mantle,
    "base": flavor.base,
  };
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final flavor = catppuccin.mocha; // 使用 Mocha 主题
    final colorMap = getColorMap(flavor);

    final random = Random(1); // 用于生成随机位置

    return Scaffold(
      appBar: AppBar(
        backgroundColor: flavor.mantle, // 设置 AppBar 的背景颜色
        title: Text(
          title,
          style: TextStyle(color: flavor.text), // 设置标题文字颜色
        ),
      ),
      body: Container(
        color: colorMap['base'], // 设置背景颜色
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Center(
            child: Stack(
              children: colorMap.keys.map((colorName) {
                final colorValue = colorMap[colorName]!;
                final hexColor =
                    '#${colorValue.value.toRadixString(16).substring(2)}'; // 将颜色转换为十六进制字符串

                final radius = 50 + random.nextInt(91).toDouble(); // 随机半径

                final positionX = random.nextDouble() *
                    (MediaQuery.of(context).size.width - 2 * radius); // 随机 X 位置
                final positionY = random.nextDouble() *
                    (MediaQuery.of(context).size.height - 2 * radius); // 随机 Y 位置

                return Positioned(
                  left: positionX,
                  top: positionY,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        width: radius * 2,
                        height: radius * 2,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle, // 圆形容器
                          color: colorValue, // 设置容器颜色
                        ),
                        child: Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Text(
                                colorName, // 显示颜色名称
                                style: TextStyle(
                                  color: colorValue.computeLuminance() > 0.5
                                      ? Colors.black
                                      : Colors.white, // 根据亮度选择文字颜色
                                ),
                              ),
                              Text(
                                hexColor, // 显示十六进制颜色值
                                style: TextStyle(
                                  color: colorValue.computeLuminance() > 0.5
                                      ? Colors.black
                                      : Colors.white, // 根据亮度选择文字颜色
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }
}