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

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

Flutter Color Picker Wheel 是一个易于使用的组件，可以进行高度定制。

• 直接使用 WheelColorPicker：通过提供您想要包含的颜色列表和动画配置来使用。
• 自定义 OverlayEntryContent：您可以管理自己的 OverlayEntry。
• 预设设置：此库提供了预设设置，使使用该组件更加简单。

如何使用

在您的 pubspec.yaml 文件中添加依赖项：

flutter_color_picker_wheel: ^0.0.1

展示

以下是不同预设和使用方式的展示：

示例代码

你可以找到更多示例代码在本仓库的示例路径中。

简单用法

import 'package:flutter_color_picker_wheel/flutter_color_picker_wheel.dart';

Color color; /// 你希望在 initState 方法中初始化这个颜色

Widget myButton = WheelColorPicker(
    onSelect: (Color newColor) {
        setState(() {
            color = newColor;
        });
    },
    /// 长按打开，另一种行为是点击打开
    behaviour: ButtonBehaviour.longPressToOpen,
    /// 初始颜色
    defaultColor: color,
    /// fanLikeAnimationConfig 是一个预设，可以从包中导入
    animationConfig: fanLikeAnimationConfig,   
    /// simpleColors 是一个预设，可以从包中导入
    colorList: simpleColors,
    /// 中间可点击按钮的大小
    buttonSize: 40,
    /// 每个片段的高度（外半径 - 内半径）
    pieceHeight: 25,
    /// 轮子形状的起始半径
    innerRadius: 80,
);

自定义颜色集

WheelColorPicker(
    onSelect: (Color newColor) {
        setState(() {
            color = newColor;
        });
    },
    defaultColor: color,
    animationConfig: fanLikeAnimationConfig,
    colorList: const [
        [Colors.red, Colors.redAccent, Colors.deepOrange],
        [Colors.black26, Colors.black45, Colors.black87],
        [Colors.blue, Colors.blueAccent, Colors.blueGrey],
        [Colors.deepPurpleAccent, Colors.purpleAccent],
    ],
    buttonSize: 40,
    pieceHeight: 115,
    innerRadius: 80,
);

自定义动画

WheelColorPicker(
    onSelect: (Color newColor) {
        setState(() {
            color = newColor;
        });
    },
    behaviour: ButtonBehaviour.clickToOpen,
    defaultColor: color,
    animationConfig: const FanAnimationConfig(
        animationDurationInMillisecond: 1000,
        rayAnimationConfig: RayAnimationConfig(
            curve: Curves.easeInQuad,
            enabled: false,
        ),
        scaleAnimationConfig: ScaleAnimationConfig(
            curve: Curves.easeInOutCubic,
            enabled: true,
            animationStartDelay: 0,
            animationFinishDelay: 0.2,
        ),
        opacityAnimationConfig: OpacityAnimationConfig(
            curve: Curves.linear,
            enabled: true,
            animationStartDelay: 0.2,
            animationFinishDelay: 0,
        ),
        rotationAnimationConfig: RotationAnimationConfig(
            curve: Curves.easeInQuad,
            enabled: true,
            animationFinishDelay: 0.4
        )
    ),
    colorList: defaultAvailableColors,
    buttonSize: 40,
    pieceHeight: 25,
    innerRadius: 80,
)

使用 WheelColorPickerEntryContent

class ExampleUseOverlayOnlyState extends State<ExampleUseOverlayOnly> with SingleTickerProviderStateMixin {  
	Color color = Colors.redAccent;  
	late Widget overlayContent;  
	late AnimationController controller;  
	OverlayEntry? _overlayEntry;  
	bool isOpen = false;  

	[@override](/user/override)  
    void dispose() {  
		if (_overlayEntry != null) {  
			_overlayEntry!.remove();  
			_overlayEntry = null;  
		}  
		controller.dispose();  
		super.dispose();  
	}  

	void _showOverlay() async {  
		if (!isOpen) {  
			isOpen = true;  
			controller.forward();  
			OverlayState? overlayState = Overlay.of(context);  
			_overlayEntry = OverlayEntry(builder: (context) => overlayContent);  
			overlayState?.insert(_overlayEntry!);  
		}  
	}  

void _hideOverlay() async {  
	if (isOpen) {  
		isOpen = false;  
		controller.reverse();  
		Future.delayed(const Duration(milliseconds: 500)).then((_) {  
			if (_overlayEntry != null) {  
				_overlayEntry!.remove();  
				_overlayEntry = null;  
			}  
		});  
	}  
}  

[@override](/user/override)  
void initState() {  
	super.initState();  
	controller = AnimationController(vsync: this, duration:Duration(milliseconds: 500));  
	overlayContent = WheelOverlayEntryContent(  
		animationController: controller,  
		animationConfig: sunRayLikeAnimationConfig,  
		colors: simpleColors,  
		innerRadius: 200,  
		pieceHeight: 20,  
		pieceBorderSize: 5,  
		hideOverlay: _hideOverlay,  
		onSelect: (Color selectedColor) {  
			_hideOverlay();  
			setState(() {  
				color = selectedColor;  
			});  
		},  
	);  
}  

[@override](/user/override)  
Widget build(BuildContext context) {  
	return Container(  
		padding: const EdgeInsets.all(150),  
		child: Column(  
			children:[  
				Expanded(  
					flex:11,  
					child: Container(  
						height: 500,  
						width: 500,  
						decoration: BoxDecoration(  
							borderRadius: BorderRadius.circular(45),  
							border: Border.all(  
								width: 15,  
								color: color  
							)  
						),  
					)  
				),  
				const Expanded(flex:2, child: SizedBox()),  
				Expanded(
					flex:2,  
					child: MaterialButton(  
						color: Colors.blueAccent,  
						textColor: Colors.white,  
						child: const Text("Click to Open"),  
							onPressed: _showOverlay,  
						)  
					),  
				]  
			)  
		);  
	}  
}