Flutter颜色生成插件generate_color_palette的使用

Flutter颜色生成插件generate_color_palette的使用

Generate Color Palette 是一个简单的 Flutter 包,旨在帮助你根据主色调生成颜色调色板。该插件可以生成互补色、类似色、单色调以及随机颜色调色板,是一个非常实用的开发工具。


特性

  • 互补色: 为给定的主要颜色生成互补色。
  • 类似色: 创建与主要颜色相似的颜色调色板。
  • 单色调: 生成主色调不同透明度的阴影。
  • 随机调色板: 生成随机颜色的调色板。

安装

在你的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  generate_color_palette: ^1.0.0

然后运行 flutter pub get 来安装依赖。


使用示例

以下是如何使用 generate_color_palette 插件的示例代码:

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

void main() {
  // 初始化主色调
  final primaryColor = Colors.blue;
  final paletteGenerator = ColorPaletteGenerator(primaryColor);

  // 获取不同的颜色调色板
  final complementaryColor = paletteGenerator.getComplementaryColor();
  final analogColors = paletteGenerator.getAnalogColors();
  final monochromaticColors = paletteGenerator.getMonochromaticColors();
  final randomPalette = paletteGenerator.getRandomPalette(5);

  // 运行应用
  runApp(MyApp(
    complementaryColor: complementaryColor,
    analogColors: analogColors,
    monochromaticColors: monochromaticColors,
    randomPalette: randomPalette,
  ));
}

// 主应用界面
class MyApp extends StatelessWidget {
  final Color complementaryColor;
  final List<Color> analogColors;
  final List<Color> monochromaticColors;
  final List<Color> randomPalette;

  MyApp({
    required this.complementaryColor,
    required this.analogColors,
    required this.monochromaticColors,
    required this.randomPalette,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Generate Color Palette Demo')),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 显示互补色
            Text('Complementary Color:', style: TextStyle(fontSize: 18)),
            Container(height: 50, color: complementaryColor),

            // 显示类似色
            Text('Analog Colors:', style: TextStyle(fontSize: 18)),
            Row(
              children: analogColors.map((color) => Expanded(child: Container(height: 50, color: color))).toList(),
            ),

            // 显示单色调
            Text('Monochromatic Colors:', style: TextStyle(fontSize: 18)),
            Row(
              children: monochromaticColors.map((color) => Expanded(child: Container(height: 50, color: color))).toList(),
            ),

            // 显示随机调色板
            Text('Random Palette:', style: TextStyle(fontSize: 18)),
            Row(
              children: randomPalette.map((color) => Expanded(child: Container(height: 50, color: color))).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

示例代码

以下是完整的示例代码,展示了如何生成并展示各种颜色调色板:

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

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

class MyApp extends StatelessWidget {
  final Color primaryColor = Colors.pink;

  const MyApp({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化颜色调色板生成器
    final paletteGenerator = ColorPaletteGenerator(primaryColor);

    // 生成不同类型的调色板
    final complementaryColor = paletteGenerator.getComplementaryColor();
    final analogColors = paletteGenerator.getAnalogColors();
    final monochromaticColors = paletteGenerator.getMonochromaticColors();
    final saturationPalette = paletteGenerator.generateSaturationPalette();
    final huePalette = paletteGenerator.generateHuePalette();
    final lightnessPalette = paletteGenerator.generateLightnessPalette();
    // final randomPalette = paletteGenerator.getRandomPalette(5); // 如果需要可以取消注释

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Color Palette Generator')),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 显示主色调及其十六进制值
            Text('Primary Color: ${colorToHex(primaryColor)}', style: const TextStyle(fontSize: 18)),
            Container(height: 50, color: primaryColor),
            const SizedBox(height: 20),

            // 显示互补色及其十六进制值
            Text('Complementary Color: ${colorToHex(complementaryColor)}', style: const TextStyle(fontSize: 18)),
            Container(height: 50, color: complementaryColor),
            const SizedBox(height: 20),

            // 显示类似色及其十六进制值
            const Text('Analog Colors:', style: TextStyle(fontSize: 18)),
            Row(
              children: analogColors
                  .map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
                  .toList(),
            ),
            const SizedBox(height: 20),

            // 显示单色调及其十六进制值
            const Text('Monochromatic Colors:', style: TextStyle(fontSize: 18)),
            Row(
              children: monochromaticColors
                  .map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
                  .toList(),
            ),
            const SizedBox(height: 20),

            // 显示饱和度调色板及其十六进制值
            const Text('Saturation Palette:', style: TextStyle(fontSize: 18)),
            Row(
              children: saturationPalette
                  .map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
                  .toList(),
            ),
            const SizedBox(height: 20),

            // 显示色相调色板及其十六进制值
            const Text('Hue Palette:', style: TextStyle(fontSize: 18)),
            Row(
              children: huePalette
                  .map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
                  .toList(),
            ),
            const SizedBox(height: 20),

            // 显示亮度调色板及其十六进制值
            const Text('Lightness Palette:', style: TextStyle(fontSize: 18)),
            Row(
              children: lightnessPalette
                  .map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
                  .toList(),
            ),
            /*
            Uncomment if you want to display the random palette
            const Text('Random Palette:', style: TextStyle(fontSize: 18)),
            Row(
              children: randomPalette
                  .map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
                  .toList(),
            ),
            */
          ],
        ),
      ),
    );
  }

  // 将颜色对象转换为十六进制字符串(例如:#FF5733)
  String colorToHex(Color color) {
    return '#${color.value.toRadixString(16).substring(2).toUpperCase()}';
  }
}
1 回复

更多关于Flutter颜色生成插件generate_color_palette的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


generate_color_palette 是一个 Flutter 插件,用于生成颜色调色板。它可以帮助你根据一个基础颜色生成一系列相关的颜色,这在设计应用主题、按钮、背景等时非常有用。

安装插件

首先,你需要在 pubspec.yaml 文件中添加 generate_color_palette 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  generate_color_palette: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用插件

安装完成后,你可以在你的 Flutter 项目中导入并使用 generate_color_palette 插件。

1. 导入插件

import 'package:generate_color_palette/generate_color_palette.dart';

2. 生成颜色调色板

你可以使用 generateColorPalette 函数来生成颜色调色板。这个函数接受一个基础颜色,并返回一个包含多个相关颜色的列表。

void main() {
  // 基础颜色
  Color baseColor = Colors.blue;

  // 生成调色板
  List<Color> palette = generateColorPalette(baseColor);

  // 打印生成的调色板
  for (var color in palette) {
    print(color);
  }
}

3. 使用生成的调色板

生成的调色板可以用于你的 Flutter 应用中。例如,你可以将这些颜色应用到按钮、背景、文本等。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    Color baseColor = Colors.blue;
    List<Color> palette = generateColorPalette(baseColor);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Color Palette Example'),
          backgroundColor: palette[0],  // 使用生成的第一个颜色
        ),
        body: Center(
          child: Container(
            color: palette[1],  // 使用生成的第二个颜色
            padding: EdgeInsets.all(20),
            child: Text(
              'Hello, Flutter!',
              style: TextStyle(
                color: palette[2],  // 使用生成的第三个颜色
                fontSize: 24,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!