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

发布于 1周前 作者 sinazl 来自 Flutter

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

此插件将支持当前操作系统中自带的所有原生颜色选择器。

实际上仅在iOS 14及以上版本中可用。

使用方法

  1. 通过运行以下静态方法来打开颜色选择器（origin必须是一个有效的Rect -> 参见完整示例以获取帮助）：
FlutterNativeColorpicker.open(origin);

这只会打开颜色选择器，但不会监听颜色输入。

  1. 若要监听输入，请启动一个监听器：
listener = FlutterNativeColorpicker.startListener((col) {
  setState(() {
    _color = col;
  });
});

重要提示：请确保在释放视图时取消监听！

@Override
void dispose() {
  listener?.cancel();
  super.dispose();
}

完整示例

以下是完整的示例代码，展示了如何在应用中使用flutter_native_colorpicker插件。

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

import 'package:flutter_native_colorpicker/flutter_native_colorpicker.dart';

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

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

class _MyAppState extends State<MyApp> {
  GlobalKey key = GlobalKey();
  Color _color = Colors.black;
  StreamSubscription? listener;

  // 平台消息是异步的，因此我们在异步方法中进行初始化。
  Future<void> openColorpicker() async {
    final box = key.currentContext?.findRenderObject();

    if (!(box is RenderBox)) {
      throw StateError('Render object is not a render box');
    }

    // 获取渲染对象的位置和大小
    final position = box.localToGlobal(Offset.zero);

    // 打开颜色选择器
    FlutterNativeColorpicker.open(position & box.size);

    // 启动监听器
    listener = FlutterNativeColorpicker.startListener((col) {
      setState(() {
        _color = col;
      });
    });
  }

  [@override](/user/override)
  void dispose() {
    // 取消监听器
    listener?.cancel();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            children: [
              // 创建一个按钮，点击时打开颜色选择器
              TextButton(
                key: key,
                onPressed: () {
                  openColorpicker();
                },
                child: Text('打开颜色选择器'),
              ),
              // 显示选中的颜色
              Text(
                '此文本会正确地改变颜色',
                style: TextStyle(color: _color),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_native_colorpicker插件来实现颜色选择器的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了flutter_native_colorpicker依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_native_colorpicker: ^0.6.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以按照以下步骤使用flutter_native_colorpicker：

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

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

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

class ColorPickerScreen extends StatefulWidget {
  @override
  _ColorPickerScreenState createState() => _ColorPickerScreenState();
}

class _ColorPickerScreenState extends State<ColorPickerScreen> {
  Color selectedColor = Colors.black;

  void _pickColor(BuildContext context) async {
    final Color picked = await FlutterNativeColorPicker.pickColor(
      context: context,
      initialColor: selectedColor,
      enableAlpha: true, // 是否启用透明度选择
      displayThumbColor: true, // 是否显示颜色缩略图
      pickerAreaHeightPercent: 0.8, // 颜色选择器占屏幕高度的百分比
    );

    setState(() {
      if (picked != null) selectedColor = picked;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: selectedColor,
              child: Center(
                child: Text(
                  '${selectedColor.toArgb()}',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _pickColor(context),
              child: Text('Pick Color'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个颜色选择器按钮和一个显示所选颜色的容器。当用户点击“Pick Color”按钮时，将打开原生颜色选择器，允许用户选择颜色。选择完成后，颜色将被显示在容器中，并在按钮上方显示颜色的ARGB值。

这个示例代码演示了如何初始化颜色选择器、处理颜色选择回调以及更新UI以显示所选颜色。你可以根据需要进一步自定义和扩展这个示例。

回到顶部