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

CircleColorPickerView

使用

...
body: Center(
    child: ColorPickerView(
        initialColor: Colors.red,
        radius: 120,
        thumbRadius: 10,
        colorListener: (color) => print(color.value),
    ),
),
...

如果你不知道如何展示颜色选择器，你可以使用 circle_color_picker_view。结合这两个包的示例可以在这里找到。

完整示例代码

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

void main() => runApp(ColorPickerApp());

class ColorPickerApp extends StatefulWidget {
  [@override](/user/override)
  _ColorPickerAppState createState() => _ColorPickerAppState();
}

class _ColorPickerAppState extends State<ColorPickerApp> {
  // 当前选中的颜色
  Color currentColor = Color(0xffffd600);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ColorPicker",
      home: Scaffold(
        appBar: AppBar(
          title: Text("ColorPicker"),
        ),
        body: Align(
          alignment: Alignment.topCenter,
          child: Column(
            children: [
              // 颜色选择器
              ColorPickerView(
                initialColor: currentColor, // 初始颜色
                colorListener: (color) {
                  // 当颜色发生变化时更新当前颜色
                  setState(() {
                    currentColor = color;
                  });
                },
              ),
              // 添加间距
              const Padding(
                padding: EdgeInsets.only(top: 20),
              ),
              // 显示当前颜色
              Container(
                width: 150,
                height: 50,
                color: currentColor,
                alignment: Alignment.center,
                child: Text(
                  currentColor.value.toRadixString(16).toUpperCase(), // 将颜色值转换为十六进制字符串并显示
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

sinazl 1楼•2 个月前

更多关于Flutter颜色选择器插件circle_color_picker_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用circle_color_picker_view插件的一个示例。这个插件允许你使用圆形颜色选择器来选择颜色。首先，你需要确保你的Flutter项目中已经添加了这个插件。如果还没有添加，可以在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  circle_color_picker_view: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来，你可以在Flutter应用中使用这个颜色选择器。以下是一个简单的示例代码，展示如何集成和使用circle_color_picker_view：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  Color selectedColor = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circle Color Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 200,
              height: 200,
              color: selectedColor,
              child: Center(
                child: Text(
                  '#${selectedColor.value.toRadixString(16).toUpperCase()}',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      title: Text('Select Color'),
                      content: SingleChildScrollView(
                        child: CircleColorPickerView(
                          initialColor: selectedColor,
                          onColorChanged: (color) {
                            setState(() {
                              selectedColor = color;
                            });
                            Navigator.of(context).pop();
                          },
                        ),
                      ),
                    );
                  },
                );
              },
              child: Text('Pick Color'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

依赖添加：在pubspec.yaml文件中添加circle_color_picker_view依赖。
导入包：在Dart文件中导入circle_color_picker_view包。
主应用：创建一个简单的Flutter应用，其中包含一个颜色显示区域和一个按钮来打开颜色选择器对话框。
颜色显示：使用Container显示当前选中的颜色，并在其中显示颜色的十六进制代码。
颜色选择器对话框：点击按钮时，显示一个包含CircleColorPickerView的对话框。当颜色改变时，更新状态并关闭对话框。

这个示例展示了如何在Flutter应用中使用circle_color_picker_view插件来选择颜色，并将选中的颜色显示在界面上。希望这个示例对你有帮助！