Flutter颜色选择器插件reactive_color_picker的使用
Flutter颜色选择器插件reactive_color_picker的使用
reactive_color_picker 是一个用于与 reactive_forms 配合使用的颜色选择器插件。它封装了 flutter_colorpicker 库的功能，使得在表单中使用颜色选择器更加方便。
示例代码
以下是完整的示例代码，展示了如何使用 reactive_color_picker 插件。
import 'package:flutter/material.dart';
import 'package:reactive_color_picker/reactive_color_picker.dart';
import 'package:reactive_forms/reactive_forms.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// 构建表单
FormGroup buildForm() => fb.group({
'input': FormControl<Color>(),
'inputDisabled': FormControl<Color>(disabled: true),
'inputList': FormControl<List<Color>>(),
'material': FormControl<Color>(value: Colors.amber),
'colorPicker': FormControl<Color>(
value: Colors.red, validators: [Validators.required]),
'sliderColorPicker': FormControl<Color>(value: Colors.lime),
});
[@override](/user/override)
Widget build(BuildContext context) {
final textController = TextEditingController();
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(),
body: SafeArea(
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 20.0,
),
child: ReactiveFormBuilder(
form: buildForm,
builder: (context, form, child) {
return Column(
children: [
// 第一部分：颜色选择器
_Section(
title: const Text('颜色选择器'),
child: ReactiveColorPicker<Color>(
formControlName: 'colorPicker',
),
),
// 第二部分：自定义颜色选择器
_Section(
title: const Text('自定义颜色选择器'),
child: ReactiveColorPicker<Color>(
formControlName: 'colorPicker',
pickerAreaHeightPercent: 0.7,
displayThumbColor: true,
labelTypes: const [],
hexInputController: textController,
portraitOnly: true,
colorPickerBuilder: (pickColor, color) {
return ListTile(
title: const Text('颜色选择器'),
trailing: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.grey.shade400,
),
),
),
onTap: pickColor,
);
},
colorPickerDialogBuilder: (colorPicker) {
final border = OutlineInputBorder(
borderSide:
const BorderSide(color: Color(0xFFD77243)),
borderRadius: BorderRadius.circular(12),
);
return AlertDialog(
scrollable: true,
titlePadding: EdgeInsets.zero,
contentPadding: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
content: Column(
children: [
colorPicker,
Padding(
padding:
const EdgeInsets.fromLTRB(16, 0, 16, 16),
child: Row(
children: [
Container(
height: 40,
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
decoration: BoxDecoration(
border: Border.all(
color: const Color(0xFFD77243),
),
borderRadius:
BorderRadius.circular(12),
),
child: const Center(
child: Text(
'HEX',
style: TextStyle(
color: Color(0xFF0F1111),
fontSize: 12,
fontWeight: FontWeight.w400,
),
),
),
),
const SizedBox(width: 8),
Expanded(
child: SizedBox(
height: 40,
child: TextField(
decoration: InputDecoration(
enabledBorder: border,
focusedBorder: border,
border: border,
counterText: '',
),
controller: textController,
style: const TextStyle(
color: Color(0xFF0F1111),
fontSize: 12,
fontWeight: FontWeight.w400,
),
autofocus: true,
maxLength: 9,
),
),
),
],
),
),
],
),
);
},
),
),
// 第三部分：块颜色选择器
_Section(
title: const Text('块颜色选择器'),
child: ReactiveBlockColorPicker<Color>(
formControlName: 'input',
),
),
// 第四部分：禁用的块颜色选择器
_Section(
title: const Text('禁用的块颜色选择器'),
child: ReactiveBlockColorPicker<Color>(
formControlName: 'inputDisabled',
),
),
// 第五部分：多块颜色选择器
_Section(
title: const Text('多块颜色选择器'),
child: ReactiveMultipleBlockColorPicker<List<Color>>(
formControlName: 'inputList',
),
),
// 第六部分：材质颜色选择器
_Section(
title: const Text('材质颜色选择器'),
child: ReactiveMaterialColorPicker<Color>(
formControlName: 'material',
),
),
// 第七部分：滑块颜色选择器
_Section(
title: const Text('滑块颜色选择器'),
child: ReactiveSliderColorPicker<Color>(
formControlName: 'sliderColorPicker',
),
),
// 提交按钮
ElevatedButton(
child: const Text('提交'),
onPressed: () {
if (form.valid) {
// 打印表单值
print(form.value);
} else {
form.markAllAsTouched();
}
},
),
],
);
},
),
),
),
),
);
}
}
// 自定义小节组件
class _Section extends StatelessWidget {
final Widget title;
final Widget child;
const _Section({
required this.title,
required this.child,
});
[@override](/user/override)
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
title,
const SizedBox(height: 8),
child,
],
),
);
}
}
代码解释
-
导入必要的包
import 'package:flutter/material.dart'; import 'package:reactive_color_picker/reactive_color_picker.dart'; import 'package:reactive_forms/reactive_forms.dart'; -
构建表单
FormGroup buildForm() => fb.group({ 'input': FormControl<Color>(), 'inputDisabled': FormControl<Color>(disabled: true), 'inputList': FormControl<List<Color>>(), 'material': FormControl<Color>(value: Colors.amber), 'colorPicker': FormControl<Color>(value: Colors.red, validators: [Validators.required]), 'sliderColorPicker': FormControl<Color>(value: Colors.lime), }); -
构建UI
[@override](/user/override) Widget build(BuildContext context) { final textController = TextEditingController(); return MaterialApp( theme: ThemeData(primarySwatch: Colors.blue), home: Scaffold( appBar: AppBar(), body: SafeArea( child: SingleChildScrollView( physics: const BouncingScrollPhysics(), padding: const EdgeInsets.symmetric( horizontal: 20.0, vertical: 20.0, ), child: ReactiveFormBuilder( form: buildForm, builder: (context, form, child) { return Column( children: [ _Section( title: const Text('颜色选择器'), child: ReactiveColorPicker<Color>( formControlName: 'colorPicker', ), ), // 其他颜色选择器组件 ... ], ); }, ), ), ), ), ); } -
自定义小节组件
class _Section extends StatelessWidget { final Widget title; final Widget child; const _Section({ required this.title, required this.child, }); [@override](/user/override) Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.only(bottom: 16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ title, const SizedBox(height: 8), child, ], ), ); } }
更多关于Flutter颜色选择器插件reactive_color_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter颜色选择器插件reactive_color_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何使用 reactive_color_picker 插件的示例代码。这个插件允许你在 Flutter 应用中轻松集成颜色选择器。
首先，确保你的 pubspec.yaml 文件中包含 reactive_color_picker 依赖项：
dependencies:
flutter:
sdk: flutter
reactive_color_picker: ^2.0.0 # 请确保使用最新版本
然后运行 flutter pub get 以获取依赖项。
接下来，你可以在你的 Flutter 应用中使用 ReactiveColorPicker。以下是一个完整的示例，展示了如何在 Flutter 应用中使用 reactive_color_picker：
import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_color_picker/reactive_color_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _formGroup = fb.group({
'color': ['#FFFFFF'], // 初始颜色为白色
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Reactive Color Picker Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: ReactiveForm(
formGroup: _formGroup,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ReactiveColorPickerField<Color>(
formControlName: 'color',
decoration: InputDecoration(
labelText: 'Choose a color',
),
builder: (context, color) {
return Container(
width: 50,
height: 50,
color: color ?? Colors.transparent,
);
},
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
// 获取选中的颜色
final selectedColor = _formGroup.value['color'];
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Selected color: $selectedColor'),
),
);
},
child: Text('Show Selected Color'),
),
],
),
),
),
);
}
}
在这个示例中，我们使用了 reactive_forms 包来管理表单状态，这是与 reactive_color_picker 配合使用的常见做法。ReactiveColorPickerField 是一个自定义字段，它允许用户选择一个颜色，并将该颜色值绑定到表单控件中。
解释
- 依赖项：确保
pubspec.yaml中包含reactive_forms和reactive_color_picker。 - 表单组：使用
fb.group创建一个表单组，并初始化颜色值为白色 (#FFFFFF)。 - ReactiveColorPickerField：使用
ReactiveColorPickerField创建一个颜色选择器字段，并将其绑定到表单控件color。 - 显示颜色：使用
ElevatedButton按钮，点击按钮时显示选中的颜色。
注意事项
- 请确保你已经安装了
reactive_forms包，因为它提供了ReactiveForm和formGroup等核心功能。 - 根据你的需求，你可能需要调整颜色选择器的样式和布局。
这个示例提供了一个基本框架，你可以根据需要进行扩展和修改。
