Flutter颜色调节插件color_hue_n_tint的使用

Flutter颜色调节插件color_hue_n_tint的使用

概述

color_hue_n_tint 是一个用于生成 HSL 圆柱体颜色阴影调色板的 Flutter 插件。它允许开发者通过色调（hue）和色调值（tint）来创建不同的颜色调色板。

构造函数

HueNTint(int value)

从低 32 位构造颜色。

HueNTint color = HueNTint(0xff0000); // 红色

HueNTint(int r, int g, int b)

从低 8 位的四个整数构造颜色。

• r 是红色，范围在 0 到 255。
• g 是绿色，范围在 0 到 255。
• b 是蓝色，范围在 0 到 255。

HueNTint color = HueNTint(00, 255, 00); // 绿色

功能

.palette({double? scale})

创建一个包含阴影的颜色调色板。

HueNTint color = HueNTint(0xff0000);
List<Color> colorList = color.palette();
// 输出:
// [
//   Color(0xffffd4d4),
//   Color(0xffffaaaa),
//   Color(0xffff7f7f),
//   Color(0xffff5555),
//   Color(0xffff2a2a),
//   Color(0xffff0000),
//   Color(0xffcc0000),
//   Color(0xff990000),
//   Color(0xff660000),
//   Color(0xff330000)
// ]

.tints({double? scale})

创建一个包含浅色部分的颜色调色板。

HueNTint color = HueNTint(0xff0000);
List<Color> colorList = color.tints();
// 输出:
// [
//   Color(0xffffd4d4),
//   Color(0xffffaaaa),
//   Color(0xffff7f7f),
//   Color(0xffff5555),
//   Color(0xffff2a2a)
// ]

.hues({double? scale})

创建一个包含深色部分的颜色调色板。

HueNTint color = HueNTint(0xff0000);
List<Color> colorList = color.hues();
// 输出:
// [
//   Color(0xffcc0000),
//   Color(0xff990000),
//   Color(0xff660000),
//   Color(0xff330000)
// ]

完整示例

以下是一个完整的 Flutter 应用程序示例，展示了如何使用 color_hue_n_tint 插件来创建和展示不同颜色调色板。

import 'package:color_hue_n_tint/color_hue_n_tint.dart';
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Color Hue N Tint',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Color Hue N Tint'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color pickerColor = const Color(0xffff0000);
  late List<Color> palettes;
  late List<Color> hues;
  late List<Color> tints;

  void palette() => palettes =
      HueNTint(pickerColor.value, shades: 10, index: 5, fullScale: false).palette();
  void hue() =>
      hues = HueNTint(pickerColor.value, shades: 10, index: 5, fullScale: false).hues();
  void tint() => tints =
      HueNTint(pickerColor.value, shades: 10, index: 5, fullScale: false).tints();

  [@override](/user/override)
  void initState() {
    palette();
    hue();
    tint();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      initialIndex: 0,
      child: Scaffold(
          floatingActionButton: FloatingActionButton(
              elevation: 8,
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      titlePadding: const EdgeInsets.all(0),
                      contentPadding: const EdgeInsets.all(0),
                      content: SingleChildScrollView(
                          child: HueRingPicker(
                        pickerColor: pickerColor,
                        onColorChanged: (value) => setState(() {
                          pickerColor = value;
                          palette();
                          hue();
                          tint();
                          // print('hello');
                        }),
                      )),
                    );
                  },
                );
              },
              child: const Icon(Icons.color_lens_outlined)),
          appBar: AppBar(
            title: Text(widget.title),
            bottom: const TabBar(tabs: [
              Tab(
                text: 'Palette',
              ),
              Tab(
                text: 'Hues',
              ),
              Tab(
                text: 'Tints',
              ),
            ]),
          ),
          body: TabBarView(
            children: [
              Row(
                children: [
                  for (var i in palettes)
                    Expanded(
                      child: thisContainer(
                        color: i,
                      ),
                    )
                ],
              ),
              Row(
                children: [
                  for (var i in hues)
                    Expanded(
                      child: thisContainer(
                        color: i,
                      ),
                    )
                ],
              ),
              Row(
                children: [
                  for (var i in tints)
                    Expanded(
                      child: thisContainer(
                        color: i,
                      ),
                    )
                ],
              ),
            ],
          )),
    );
  }

  Widget thisContainer({required Color color}) {
    return Container(
      color: color,
      child: Center(
        child: RotatedBox(
            quarterTurns: -1,
            child: Container(
                height: 30,
                width: 80,
                decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(15))),
                alignment: Alignment.center,
                child: Text(
                  color.value.toRadixString(16),
                  style: const TextStyle(fontWeight: FontWeight.bold),
                ))),
      ),
    );
  }
}