Flutter颜色选择器插件iglu_color_picker_flutter的使用

插件简介

这是一个高度可定制的颜色选择器，专为Flutter开发。它由 IGLU 团队用心打造。

快速开始 🚀

iglu_color_picker_flutter 提供了三种类型的小部件：

• Color Picker：用于选择颜色。
• Hue Ring Picker：用于通过环形滑块选择色调。
• Slider Picker：用于通过滑块选择颜色。

Color Picker

IGColorPicker(
  paletteType: IGPaletteType.hsvWithHue,
  onColorChanged: (color) {
    // Do something with color
  },
)

Hue Ring Picker

IGHueRingPicker(
  onColorChanged: (color) {
    // Do something with color
  },
)

Slider Picker

IGSlidePicker(
  onColorChanged: (color) {
    // Do something with color
  },
)

示例代码

下面是一个完整的示例应用程序，展示了如何在Flutter项目中使用 iglu_color_picker_flutter。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Color Picker Flutter Example',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const ColorPickerExampleHome(),
    );
  }
}

class ColorPickerExampleHome extends StatefulWidget {
  const ColorPickerExampleHome({super.key});

  @override
  State<ColorPickerExampleHome> createState() => _ColorPickerExampleHomeState();
}

class _ColorPickerExampleHomeState extends State<ColorPickerExampleHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Color Picker'),
        shadowColor: Colors.black,
      ),
      body: ListView.separated(
        itemBuilder: (context, index) {
          if (index == 0 || index == 1) {
            return Container(
              height: 44,
              margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
              child: InkWell(
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute<void>(
                      builder: (BuildContext context) => index == 0
                          ? const HueRingPickerDetail()
                          : const SlidePickerDetail(),
                    ),
                  );
                },
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(index == 0 ? 'Hue Ring Picker' : 'Slide Picker'),
                    const Icon(
                      Icons.chevron_right_rounded,
                    )
                  ],
                ),
              ),
            );
          }
          final type = IGPaletteType.values[index - 2];
          return Container(
            height: 44,
            margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
            child: InkWell(
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute<void>(
                    builder: (BuildContext context) =>
                        ColorPickerDetail(paletteType: type),
                  ),
                );
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(type.displayName),
                  const Icon(
                    Icons.chevron_right_rounded,
                  )
                ],
              ),
            ),
          );
        },
        separatorBuilder: (context, index) {
          if (index == 0 || index == 1) {
            return Container(
              color: Colors.grey.shade300,
              height: 30,
            );
          }
          return const Divider(
            indent: 20,
            height: 0,
          );
        },
        itemCount: IGPaletteType.values.length + 1,
      ),
    );
  }
}

详细配置参数

Color Picker 参数

Hue Ring Picker 参数

Slider Picker 参数

更多详细信息请参考 官方GitHub仓库 中的文档和示例。