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

安装

要使用Insta Color Picker插件，你需要将其添加到你的pubspec.yaml文件中：

dependencies:
  insta_color_picker: ^1.0.0

基本用法

以下是一个基本示例，展示了如何在Flutter应用中使用InstaColorPicker组件：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color _color = Colors.white;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('颜色选择器示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '当前选中的颜色:',
              style: TextStyle(fontSize: 18),
            ),
            Text(
              _color.toString(),
              style: TextStyle(fontSize: 18),
            ),
            InstaColorPicker(
              selectedColor: _color,
              pageController: PageController(),
              onColorSelected: (color) {
                setState(() {
                  _color = color;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

高级用法

你可以通过传递更多参数来自定义InstaColorPicker的行为。以下是一个高级用法示例：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color _color = Colors.white;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('颜色选择器高级用法'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '当前选中的颜色:',
              style: TextStyle(fontSize: 18),
            ),
            Text(
              _color.toString(),
              style: TextStyle(fontSize: 18),
            ),
            InstaColorPicker(
              activeDotColor: Colors.red,
              colorButtonSize: 60,
              colorsList: [
                Colors.red,
                Colors.green,
                Colors.blue,
                Colors.yellow,
                Colors.purple,
                Colors.orange,
                Colors.teal,
                Colors.pink,
                Colors.brown,
                Colors.grey,
                Colors.cyan,
                Colors.lime,
              ],
              onColorSelected: (color) {
                setState(() {
                  _color = color;
                });
                print('Selected color: $color');
              },
              pageController: PageController(),
            ),
          ],
        ),
      ),
    );
  }
}

自定义

InstaColorPicker类提供了多个参数用于自定义颜色选择器的外观和行为。以下是可用的参数列表：

• activeDotColor
• activeDotScale
• colorButtonSize
• colorButtonBorderColor
• colorsList
• colorPaletteHeight
• dotColor
• dotHeight
• dotWidth
• height
• icon
• iconPadding
• iconSize
• onColorSelected
• pageController
• pageIndicatorSpacing
• selectedColorSize
• selectedColor

详细信息请参阅类文档。

示例

更详细的使用示例可以在该存储库的example目录中找到。

颜色调色板

你可以使用insta_color_picker包中提供的预定义颜色调色板。以下是如何使用的示例：

使用自定义颜色调色板

List<Color> myCustomPalette = [
  Colors.red,
  Colors.green,
  Colors.blue,
  Colors.yellow,
  // 添加更多自定义颜色
];

InstaColorPicker(
  colorsList: myCustomPalette,
  // 其他参数
);

使用提供的颜色调色板

InstaColorPicker(
  colorsList: [
    PaletteColors.oceanBreeze,
    PaletteColors.autumnVibes,
    PaletteColors.pastelDream,
  ],
  // 其他参数
);