Flutter實(shí)現(xiàn)矩形取色器的封裝
更新時(shí)間：2022年08月24日 08:55:44 作者：風(fēng)向決定發(fā)型M
這篇文章主要為大家詳細(xì)介紹了Flutter實(shí)現(xiàn)矩形取色器的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前言
最近看插件庫(kù)上少有的取色器大都是圓形的或者奇奇怪的的亞子，所以今天做兩個(gè)矩形的顏色取色器
一、BarTypeColorPicker
條形選色板的功能實(shí)現(xiàn)，顏色的獲取是通過位置來判斷，然后賦予相應(yīng)的顏色。這個(gè)封裝好的組件可通過colorListener、onTapUpListener的回調(diào)方法，把顏色傳出去。
代碼如下（示例）：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
///描述：條形選色板
class BarTypeColorPicker extends StatefulWidget {
? final Color initialColor;
? final ValueChanged<Color> colorListener;
? final ValueChanged<Color> onTapUpListener;
? final int colorWidth;
? final int colorHeight;
? final Color color;
? const BarTypeColorPicker(
? ? ? {Key key,
? ? ? this.initialColor,
? ? ? this.colorListener,
? ? ? this.onTapUpListener,
? ? ? this.colorWidth,
? ? ? this.colorHeight,
? ? ? this.color})
? ? ? : super(key: key);
? @override
? _BarTypeColorPickerState createState() => _BarTypeColorPickerState(
? ? ? ? colorWidth.toDouble(),
? ? ? ? colorHeight.toDouble(),
? ? ? );
}
class _BarTypeColorPickerState extends State<BarTypeColorPicker> {
? double _top = 0.0;
? double _left = 0.0;
? double _Thumbsize = 20;
? double lightness;
? double _colorwidth;
? double _colorHeight;
? Color _color;
? _BarTypeColorPickerState(double colorwidth, double colorHeight) {
? ? this._colorwidth = colorwidth;
? ? this._colorHeight = colorHeight;
? }
? @override
? void initState() {
? ? super.initState();
? }
? @override
? Widget build(BuildContext context) {
? ? return Center(
? ? ? child: GestureDetector(
? ? ? ? onPanStart: (DragStartDetails detail) {
? ? ? ? ? var localPosition = detail.localPosition;
? ? ? ? ? buildSetState(localPosition, context);
? ? ? ? ? if (widget.colorListener != null) {
? ? ? ? ? ? widget.colorListener(_color);
? ? ? ? ? }
? ? ? ? },
? ? ? ? onPanDown: (DragDownDetails detail) {
? ? ? ? ? var localPosition = detail.localPosition;
? ? ? ? ? buildSetState(localPosition, context);
? ? ? ? ? if (widget.colorListener != null) {
? ? ? ? ? ? widget.colorListener(_color);
? ? ? ? ? }
? ? ? ? },
? ? ? ? onPanUpdate: (DragUpdateDetails detail) {
? ? ? ? ? var localPosition = detail.localPosition;
? ? ? ? ? buildSetState(localPosition, context);
? ? ? ? ? if (widget.colorListener != null) {
? ? ? ? ? ? widget.colorListener(_color);
? ? ? ? ? }
? ? ? ? },
? ? ? ? onPanEnd: (DragEndDetails detail) {
? ? ? ? ? if (widget.onTapUpListener != null) {
? ? ? ? ? ? widget.onTapUpListener(_color);
? ? ? ? ? }
? ? ? ? },
? ? ? ? onTapUp: (TapUpDetails detail) {
? ? ? ? ? if (widget.onTapUpListener != null) {
? ? ? ? ? ? widget.onTapUpListener(_color);
? ? ? ? ? }
? ? ? ? },
? ? ? ? child: ColorRect(
? ? ? ? ? ? colorHeight: _colorHeight,
? ? ? ? ? ? colorwidth: _colorwidth,
? ? ? ? ? ? top: _top,
? ? ? ? ? ? Thumbsize: _Thumbsize,
? ? ? ? ? ? left: _left,
? ? ? ? ? ? color: _color),
? ? ? ),
? ? );
? }
? void buildSetState(Offset localPosition, BuildContext context) {
? ? return setState(() {
? ? ? _left = localPosition.dx;
? ? ? _top = localPosition.dy;
? ? ? if (_left < 0) {
? ? ? ? _left = 0;
? ? ? } else if (0 <= _left && _left <= _colorwidth) {
? ? ? ? _left = _left;
? ? ? } else if (_left > _colorwidth) {
? ? ? ? _left = (_colorwidth);
? ? ? }
? ? ? if ((_colorwidth / 7) * 0 < _left && _left < (_colorwidth / 7) * 1) {
? ? ? ? _color = Color(0xFFFF0000);
? ? ? } else if ((_colorwidth / 7) * 1 < _left &&
? ? ? ? ? _left < (_colorwidth / 7) * 2) {
? ? ? ? _color = Color(0xFFFFFF00);
? ? ? } else if ((_colorwidth / 7) * 2 < _left &&
? ? ? ? ? _left < (_colorwidth / 7) * 3) {
? ? ? ? _color = Color(0xFF00FF00);
? ? ? } else if ((_colorwidth / 7) * 3 < _left &&
? ? ? ? ? _left < (_colorwidth / 7) * 4) {
? ? ? ? _color = Color(0xFF00FFFF);
? ? ? } else if ((_colorwidth / 7) * 4 < _left &&
? ? ? ? ? _left < (_colorwidth / 7) * 5) {
? ? ? ? _color = Color(0xFF0000FF);
? ? ? } else if ((_colorwidth / 7) * 5 < _left &&
? ? ? ? ? _left < (_colorwidth / 7) * 6) {
? ? ? ? _color = Color(0xFFFF00FF);
? ? ? } else if ((_colorwidth / 7) * 6 < _left &&
? ? ? ? ? _left < (_colorwidth / 7) * 7) {
? ? ? ? _color = Color(0xFFFFFFFF);
? ? ? }
? ? ? if (_top <= 0) {
? ? ? ? _top = 0;
? ? ? } else if (0 <= _top && _top <= _colorHeight) {
? ? ? } else if (_top > _colorHeight) {
? ? ? ? _top = _colorHeight;
? ? ? }
? ? });
? }
}
class ColorRect extends StatelessWidget {
? ColorRect({
? ? Key key,
? ? @required double colorHeight,
? ? @required double colorwidth,
? ? @required double top,
? ? @required double Thumbsize,
? ? @required double left,
? ? @required Color color,
? }) ?: _colorHeight = colorHeight,
? ? ? ? _colorwidth = colorwidth,
? ? ? ? _top = top,
? ? ? ? _Thumbsize = Thumbsize,
? ? ? ? _left = left,
? ? ? ? _color = color,
? ? ? ? super(key: key);
? final double _colorHeight;
? final double _colorwidth;
? final double _top;
? final double _Thumbsize;
? final double _left;
? final Color _color;
? List<Color> colorList = [
? ? Color(0xFFFF0000),
? ? Color(0xFFFFFF00),
? ? Color(0xFF00FF00),
? ? Color(0xFF00FFFF),
? ? Color(0xFF0000FF),
? ? Color(0xFFFF00FF),
? ? Color(0xFFFFFFFF),
? ];
? @override
? Widget build(BuildContext context) {
? ? return Container(
? ? ? width: _colorwidth,
? ? ? height: _colorHeight,
? ? ? child: Stack(
? ? ? ? children: [
? ? ? ? ? Row(
? ? ? ? ? ? mainAxisAlignment: MainAxisAlignment.center,
? ? ? ? ? ? children: colorList
? ? ? ? ? ? ? ? .map(
? ? ? ? ? ? ? ? ? (e) => Container(
? ? ? ? ? ? ? ? ? ? padding: EdgeInsets.symmetric(horizontal: 2),
? ? ? ? ? ? ? ? ? ? height: _colorHeight,
? ? ? ? ? ? ? ? ? ? width: _colorwidth / 7,
? ? ? ? ? ? ? ? ? ? child: Container(
? ? ? ? ? ? ? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? ? ? ? ? ? ? borderRadius: BorderRadius.circular(10),
? ? ? ? ? ? ? ? ? ? ? ? color: e,
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? .toList(),
? ? ? ? ? ),
? ? ? ? ? Container(
? ? ? ? ? ? ? child: Thumb(
? ? ? ? ? ? ? ? ? top: _top,
? ? ? ? ? ? ? ? ? Thumbsize: _Thumbsize,
? ? ? ? ? ? ? ? ? left: _left,
? ? ? ? ? ? ? ? ? color: _color)),
? ? ? ? ],
? ? ? ),
? ? );
? }
}
class Thumb extends StatelessWidget {
? const Thumb({
? ? Key key,
? ? @required double top,
? ? @required double Thumbsize,
? ? @required double left,
? ? @required Color color,
? }) ?: _top = top,
? ? ? ? _Thumbsize = Thumbsize,
? ? ? ? _left = left,
? ? ? ? _color = color,
? ? ? ? super(key: key);
? final double _top;
? final double _Thumbsize;
? final double _left;
? final Color _color;
? @override
? Widget build(BuildContext context) {
? ? return Positioned(
? ? ? ? top: _top - _Thumbsize / 2,
? ? ? ? left: _left - _Thumbsize / 2,
? ? ? ? child: GestureDetector(
? ? ? ? ? ? child: Container(
? ? ? ? ? child: Icon(
? ? ? ? ? ? Icons.circle,
? ? ? ? ? ? color: _color,
? ? ? ? ? ? size: _Thumbsize,
? ? ? ? ? ),
? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? borderRadius: BorderRadius.circular(10),
? ? ? ? ? ? boxShadow: [
? ? ? ? ? ? ? BoxShadow(
? ? ? ? ? ? ? ? blurRadius: 0.1, //陰影范圍
? ? ? ? ? ? ? ? spreadRadius: 0.001, //陰影濃度
? ? ? ? ? ? ? ? color: Colors.black, //陰影顏色
? ? ? ? ? ? ? ),
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? )));
? }
}下面是使用方法。
BarTypeColorPicker( ? ?initialColor: Colors.white,? ? ?colorWidth: 360, ? ?colorHeight: 150, ),
具體效果圖：
一、RectangleColorPicker
矩形選色板的功能實(shí)現(xiàn)，顏色的獲取是通過位置的坐標(biāo)值轉(zhuǎn)換為相應(yīng)的顏色。這個(gè)封裝好的組件可通過colorListener、onTapUpListener的回調(diào)方法，把顏色傳出去。
代碼如下（示例）：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class RectangleColorPicker extends StatefulWidget {
? final Color initialColor;
? final ValueChanged<Color> colorListener;
? final ValueChanged<Color> onTapUpListener;
? final int colorWidth;
? final int colorHeight;
? final Color color;
? const RectangleColorPicker(
? ? ? {Key key,
? ? ? this.initialColor,
? ? ? this.colorListener,
? ? ? this.onTapUpListener,
? ? ? this.colorWidth,
? ? ? this.colorHeight,
? ? ? this.color})
? ? ? : super(key: key);
? @override
? _RectangleColorPickerState createState() => _RectangleColorPickerState(
? ? ? ? colorWidth.toDouble(),
? ? ? ? colorHeight.toDouble(),
? ? ? );
}
class _RectangleColorPickerState extends State<RectangleColorPicker> {
? double _top = 0.0;
? double _left = 0.0;
? double _Thumbsize = 20;
? double _hue = 0.0;
? double _brightnum = 50.0;
? double lightness;
? double _colorwidth;
? double _colorHeight;
? _RectangleColorPickerState(double colorwidth, double colorHeight) {
? ? this._colorwidth = colorwidth;
? ? this._colorHeight = colorHeight;
? }
? Color get _color {
? ? return HSLColor.fromAHSL(
? ? ? 1,
? ? ? _hue,
? ? ? 1,
? ? ? lightness,
? ? ).toColor();
? ? //返回HSL、AHSL格式的色調(diào)亮度字符串
? }
? @override
? void initState() {
? ? super.initState();
? ? HSLColor hslColor = HSLColor.fromColor(widget.initialColor);
? ? _left = (_colorwidth * hslColor.hue) / 360;
? ? _top = (_colorHeight * (hslColor.lightness - 0.5) * 200) / 100;
? ? this._hue = hslColor.hue;
? ? this.lightness = hslColor.lightness;
? }
? @override
? Widget build(BuildContext context) {
? ? return Center(
? ? ? child: GestureDetector(
? ? ? ? onPanStart: (DragStartDetails detail) {
? ? ? ? ? var localPosition = detail.localPosition;
? ? ? ? ? buildSetState(localPosition, context);
? ? ? ? ? if(widget.colorListener != null){
? ? ? ? ? ? widget.colorListener(_color);
? ? ? ? ? }
? ? ? ? ??
? ? ? ? },
? ? ? ? onPanDown: (DragDownDetails detail) {
? ? ? ? ? var localPosition = detail.localPosition;
? ? ? ? ? buildSetState(localPosition, context);
? ? ? ? ? if(widget.colorListener != null){
? ? ? ? ? ? widget.colorListener(_color);
? ? ? ? ? }
? ? ? ? },
? ? ? ? onPanUpdate: (DragUpdateDetails detail) {
? ? ? ? ? //獲取當(dāng)前觸摸點(diǎn)的局部坐標(biāo)
? ? ? ? ? var localPosition = detail.localPosition;
? ? ? ? ? buildSetState(localPosition, context);
? ? ? ? ? if(widget.colorListener != null){
? ? ? ? ? ? widget.colorListener(_color);
? ? ? ? ? }
? ? ? ? },
? ? ? ? onPanEnd: (DragEndDetails detail) {
? ? ? ? ? if(widget.onTapUpListener != null){
? ? ? ? ? ? widget.onTapUpListener(_color);
? ? ? ? ? }
? ? ? ? },
? ? ? ? onTapUp: (TapUpDetails detail){
? ? ? ? ? if(widget.onTapUpListener != null){
? ? ? ? ? ? widget.onTapUpListener(_color);
? ? ? ? ? }
? ? ? ? },
? ? ? ? child: ColorRect(
? ? ? ? ? ? colorHeight: _colorHeight,
? ? ? ? ? ? colorwidth: _colorwidth,
? ? ? ? ? ? top: _top,
? ? ? ? ? ? Thumbsize: _Thumbsize,
? ? ? ? ? ? left: _left,
? ? ? ? ? ? color: _color),
? ? ? ),
? ? );
? }
? void buildSetState(Offset localPosition, BuildContext context) {
? ? return setState(() {
? ? ? _left = localPosition.dx;
? ? ? _top = localPosition.dy;
? ? ? if (_left < 0) {
? ? ? ? _left = 0;
? ? ? } else if (0 <= _left && _left <= _colorwidth) {
? ? ? ? _left = _left;
? ? ? ? _hue = (360 * _left) / (_colorwidth);
? ? ? } else if (_left > _colorwidth) {
? ? ? ? _left = (_colorwidth);
? ? ? ? _hue = 360;
? ? ? }
? ? ? if (((5 / 360 - 5 / 360) < _left &&
? ? ? ? ? ? ? _left < (5 / 360 + 5 / 360) * _colorwidth) &&
? ? ? ? ? (_top < 5)) {
? ? ? ? _left = 5 / 360 * _colorwidth;
? ? ? ? _top = 0;
? ? ? } else if ((((5 + 350 / 6) / 360 - 5 / 360) * _colorwidth < _left &&
? ? ? ? ? ? ? _left < ((5 + 350 / 6) / 360 + 5 / 360) * _colorwidth) &&
? ? ? ? ? (_top < 5)) {
? ? ? ? _left = (5 + (1 * 350) / 6) / 360 * _colorwidth;
? ? ? ? _top = 0;
? ? ? } else if ((((5 + (2 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
? ? ? ? ? ? ? _left < ((5 + (2 * 350) / 6) / 360 + 5 / 360) * _colorwidth) &&
? ? ? ? ? (_top < 5)) {
? ? ? ? _left = (5 + (2 * 350) / 6) / 360 * _colorwidth;
? ? ? ? _top = 0;
? ? ? } else if ((((5 + (3 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
? ? ? ? ? ? ? _left < ((5 + (3 * 350) / 6) / 360 + 5 / 360) * _colorwidth) &&
? ? ? ? ? (_top < 5)) {
? ? ? ? _left = (5 + (3 * 350) / 6) / 360 * _colorwidth;
? ? ? ? _top = 0;
? ? ? } else if ((((5 + (4 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
? ? ? ? ? ? ? _left < ((5 + (4 * 350) / 6) / 360 + 5 / 360) * _colorwidth) &&
? ? ? ? ? (_top < 5)) {
? ? ? ? _left = (5 + (4 * 350) / 6) / 360 * _colorwidth;
? ? ? ? _top = 0;
? ? ? } else if ((((5 + (5 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
? ? ? ? ? ? ? _left < ((5 + (5 * 350) / 6) / 360 + 5 / 360) * _colorwidth) &&
? ? ? ? ? (_top < 5)) {
? ? ? ? _left = (5 + (5 * 350) / 6) / 360 * _colorwidth;
? ? ? ? _top = 0;
? ? ? } else if ((((5 + (6 * 350) / 6) / 360 - 5 / 360) * _colorwidth < _left &&
? ? ? ? ? ? ? _left < ((5 + (6 * 350) / 6) / 360 + 5 / 360)) &&
? ? ? ? ? (_top < 5)) {
? ? ? ? _left = (5 + (6 * 350) / 6) / 360 * _colorwidth;
? ? ? ? _top = 0;
? ? ? }
? ? ? if (_top <= 0) {
? ? ? ? _top = 0;
? ? ? ? _brightnum = 50;
? ? ? ? lightness = _brightnum / 100;
? ? ? } else if (0 <= _top && _top <= _colorHeight) {
? ? ? ? _brightnum = (100 * _top) / _colorHeight / 2 + 50;
? ? ? ? lightness = _brightnum / 100;
? ? ? } else if (_top > _colorHeight) {
? ? ? ? _top = _colorHeight;
? ? ? ? _brightnum = 100;
? ? ? ? lightness = _brightnum / 100;
? ? ? }
? ? });
? }
}
class ColorRect extends StatelessWidget {
? const ColorRect({
? ? Key key,
? ? @required double colorHeight,
? ? @required double colorwidth,
? ? @required double top,
? ? @required double Thumbsize,
? ? @required double left,
? ? @required Color color,
? }) ?: _colorHeight = colorHeight,
? ? ? ? _colorwidth = colorwidth,
? ? ? ? _top = top,
? ? ? ? _Thumbsize = Thumbsize,
? ? ? ? _left = left,
? ? ? ? _color = color,
? ? ? ? super(key: key);
? final double _colorHeight;
? final double _colorwidth;
? final double _top;
? final double _Thumbsize;
? final double _left;
? final Color _color;
? @override
? Widget build(BuildContext context) {
? ? return Container(
? ? ? child: Stack(
? ? ? ? children: [
? ? ? ? ? Container(
? ? ? ? ? ? child: ClipRRect(
? ? ? ? ? ? ? borderRadius: BorderRadius.circular(10),
? ? ? ? ? ? ? child: DecoratedBox(
? ? ? ? ? ? ? ? ? child: Container(
? ? ? ? ? ? ? ? ? ? height: _colorHeight,
? ? ? ? ? ? ? ? ? ? width: _colorwidth,
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? ? ? ? ? gradient: LinearGradient(
? ? ? ? ? ? ? ? ? ? ? begin: Alignment.centerLeft,
? ? ? ? ? ? ? ? ? ? ? end: Alignment.centerRight,
? ? ? ? ? ? ? ? ? ? ? stops: [
? ? ? ? ? ? ? ? ? ? ? ? 0,
? ? ? ? ? ? ? ? ? ? ? ? 5 / 360,
? ? ? ? ? ? ? ? ? ? ? ? (5 + 350 / 6) / 360,
? ? ? ? ? ? ? ? ? ? ? ? (5 + (2 * 350) / 6) / 360,
? ? ? ? ? ? ? ? ? ? ? ? (5 + (3 * 350) / 6) / 360,
? ? ? ? ? ? ? ? ? ? ? ? (5 + (4 * 350) / 6) / 360,
? ? ? ? ? ? ? ? ? ? ? ? (5 + (5 * 350) / 6) / 360,
? ? ? ? ? ? ? ? ? ? ? ? (5 + (6 * 350) / 6) / 360,
? ? ? ? ? ? ? ? ? ? ? ? 1.0
? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? colors: [
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(255, 255, 0, 0),
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(255, 255, 0, 0),
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(255, 255, 255, 0),
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(255, 0, 255, 0),
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(255, 0, 255, 255),
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(255, 0, 0, 255),
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(255, 255, 0, 255),
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(255, 255, 0, 0),
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(255, 255, 0, 0),
? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? )),
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ? Container(
? ? ? ? ? ? child: ClipRRect(
? ? ? ? ? ? ? borderRadius: BorderRadius.circular(10),
? ? ? ? ? ? ? child: DecoratedBox(
? ? ? ? ? ? ? ? ? child: Container(
? ? ? ? ? ? ? ? ? ? height: _colorHeight,
? ? ? ? ? ? ? ? ? ? width: _colorwidth,
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? ? ? ? ? gradient: LinearGradient(
? ? ? ? ? ? ? ? ? ? ? begin: Alignment.topCenter,
? ? ? ? ? ? ? ? ? ? ? end: Alignment.bottomCenter,
? ? ? ? ? ? ? ? ? ? ? colors: [
? ? ? ? ? ? ? ? ? ? ? ? Color.fromARGB(0, 255, 255, 255),
? ? ? ? ? ? ? ? ? ? ? ? Colors.white,
? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? )),
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ? Container(
? ? ? ? ? ? ? child: Thumb(
? ? ? ? ? ? ? ? ? top: _top,
? ? ? ? ? ? ? ? ? Thumbsize: _Thumbsize,
? ? ? ? ? ? ? ? ? left: _left,
? ? ? ? ? ? ? ? ? color: _color)),
? ? ? ? ],
? ? ? ),
? ? );
? }
}
class Thumb extends StatelessWidget {
? const Thumb({
? ? Key key,
? ? @required double top,
? ? @required double Thumbsize,
? ? @required double left,
? ? @required Color color,
? }) ?: _top = top,
? ? ? ? _Thumbsize = Thumbsize,
? ? ? ? _left = left,
? ? ? ? _color = color,
? ? ? ? super(key: key);
? final double _top;
? final double _Thumbsize;
? final double _left;
? final Color _color;
? @override
? Widget build(BuildContext context) {
? ? return Positioned(
? ? ? ? top: _top - _Thumbsize / 2,
? ? ? ? left: _left - _Thumbsize / 2,
? ? ? ? child: GestureDetector(
? ? ? ? ? ? child: Container(
? ? ? ? ? child: Icon(
? ? ? ? ? ? Icons.circle,
? ? ? ? ? ? color: _color,
? ? ? ? ? ? size: _Thumbsize,
? ? ? ? ? ),
? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? borderRadius: BorderRadius.circular(10),
? ? ? ? ? ? boxShadow: [
? ? ? ? ? ? ? BoxShadow(
? ? ? ? ? ? ? ? blurRadius: 0.1, //陰影范圍
? ? ? ? ? ? ? ? spreadRadius: 0.001, //陰影濃度
? ? ? ? ? ? ? ? color: Colors.black, //陰影顏色
? ? ? ? ? ? ? ),
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? )));
? }
}下面是使用方法。
RectangleColorPicker(
? ?[initialColor: Colors.white,?
? ?colorWidth: 360,
? ?colorHeight: 150,
? ?onTapUpListener: (_color) { }
? ?colorListener: (_color) { }
? ?]
),具體效果圖：
總結(jié)
以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了兩種顏色選色板的使用，后面還會(huì)陸續(xù)發(fā)布一些flutter的組件使用教程。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Android開發(fā)-之五大布局詳解,現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
Flutter學(xué)習(xí)之構(gòu)建、布局及繪制三部曲
這篇文章主要給大家介紹了關(guān)于Flutter學(xué)習(xí)之構(gòu)建、布局及繪制三部曲的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Android使用getIdentifier()獲取資源Id的方法
這篇文章主要介紹了Android使用getIdentifier()獲取資源Id的方法,涉及Android針對(duì)控件資源的相關(guān)操作技巧,需要的朋友可以參考下2016-08-08
android Activity線性布局和表格布局實(shí)例講解
在activity的布局中，線性布局和表格布局是最簡(jiǎn)單的，這次分別從線性布局，表格布局以及線性布局和表格混合布局做了實(shí)驗(yàn)2013-11-11
Android編程入門之HelloWorld項(xiàng)目目錄結(jié)構(gòu)分析
這篇文章主要介紹了Android編程入門之HelloWorld項(xiàng)目目錄結(jié)構(gòu)分析,較為詳細(xì)的分析了Android項(xiàng)目的目錄結(jié)構(gòu)與具體作用,需要的朋友可以參考下2015-12-12
Android 多線程實(shí)現(xiàn)重復(fù)啟動(dòng)與停止的服務(wù)
這篇文章主要介紹了Android 多線程實(shí)現(xiàn)重復(fù)啟動(dòng)與停止的服務(wù)的相關(guān)資料,多線程環(huán)境下為了避免死鎖，一般提倡開放調(diào)用，開放調(diào)用可以避免死鎖，它的代價(jià)是失去原子性，這里說明重復(fù)啟動(dòng)與停止的服務(wù)，需要的朋友可以參考下2017-08-08
Android GridView不改變背景色實(shí)現(xiàn)網(wǎng)格線效果
這篇文章主要介紹了Android GridView不改變背景色實(shí)現(xiàn)網(wǎng)格線效果,需要的朋友可以參考下2016-03-03
Android實(shí)現(xiàn)動(dòng)畫效果的自定義下拉菜單功能
這篇文章主要介紹了Android實(shí)現(xiàn)動(dòng)畫效果的自定義下拉菜單功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
詳解Android中Activity的四大啟動(dòng)模式實(shí)驗(yàn)簡(jiǎn)述
本篇文章主要介紹了Android中Activity的四大啟動(dòng)模式實(shí)驗(yàn)簡(jiǎn)述，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
詳解Flutter如何在單個(gè)屏幕上實(shí)現(xiàn)多個(gè)列表
這篇文章主要為大家詳細(xì)介紹了Flutter如何在單個(gè)屏幕上實(shí)現(xiàn)多個(gè)列表,這些列表可以水平排列、網(wǎng)格格式、垂直排列,甚至是這些常用布局的組合,感興趣的小伙伴可以了解下2023-11-11