Flutter颜色选择及相机拍照插件camera_color_picker的使用

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

Flutter颜色选择及相机拍照插件camera_color_picker的使用

camera_color_picker 是一个用于通过摄像头选择颜色的 Flutter 小部件。

注意:此插件仍在开发中。

安装

首先,在 pubspec.yaml 文件中添加 camera_color_picker 作为依赖项:

dependencies:
  camera_color_picker: ^0.0.1

基本示例

演示-基本

Color currentColor = Colors.blueAccent;

CameraColorPicker(
  currentColor: currentColor,
  onColorChanged: (Color color) {
    currentColor = color;
    setState(() {});
  },
)

演示-2

Color currentColor = Colors.blueAccent;

CameraColorPicker(
  currentColor: currentColor,
  onColorChanged: (Color color) {
    currentColor = color;
    setState(() {});
  },
  child: Container(
    child: Icon(
      Icons.camera_alt,
      color: currentColor,
      size: 66,
    ),
  ),
)

示例代码

以下是完整的示例代码,演示了如何在 Flutter 应用中使用 camera_color_picker 插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这是你的应用的根小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Camera Color Picker Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Camera Color Picker Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

// 当前选择的颜色
Color currentColor = Colors.blueAccent;

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 示例-1 基本实现
            CameraColorPicker(
              currentColor: currentColor,
              onColorChanged: (Color color) {
                currentColor = color;
                setState(() {});
              },
            ),
            const SizedBox(height: 50),

            // 示例-2 如果你想修改按钮的外观,但使用没有 `onTap` 功能的容器
            CameraColorPicker(
              currentColor: currentColor,
              onColorChanged: (Color color) {
                currentColor = color;
                setState(() {});
              },
              child: Icon(
                Icons.icecream_sharp,
                color: currentColor,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,关于在Flutter中使用颜色选择及相机拍照插件cameracolor_picker,以下是一个简单的代码示例,展示如何集成这两个功能。

首先,确保在pubspec.yaml文件中添加必要的依赖:

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.10.0+3  # 请检查最新版本号并替换
  color_picker: ^0.4.0  # 请检查最新版本号并替换

然后,运行flutter pub get来安装这些依赖。

接下来,让我们编写一个简单的Flutter应用,其中包括颜色选择和相机拍照功能。

主应用代码 (main.dart)

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:color_picker/color_picker.dart';

List<CameraDescription> cameras;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  cameras = await availableCameras();
  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> {
  CameraController? controller;
  Color selectedColor = Colors.black;

  @override
  void initState() {
    super.initState();
    if (cameras.isNotEmpty) {
      controller = CameraController(cameras[0], ResolutionPreset.medium);
      controller!.initialize().then((_) {
        if (!mounted) {
          return;
        }
        setState(() {});
      });
    }
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  Future<void> _takePicture() async {
    if (!controller!.value.isInitialized) {
      return null;
    }
    XFile? image = await controller!.takePicture();
    // 在这里你可以处理拍摄的图片,例如保存到设备或显示在UI上
    print(image?.path);
  }

  Future<void> _pickColor() async {
    final Color pickedColor = await showColorPicker(
      context: context,
      initialColor: selectedColor,
      pickerColor: Colors.blue,
      enableAlpha: false,
      displayThumbColor: true,
    );
    if (pickedColor != null) {
      setState(() {
        selectedColor = pickedColor;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera & Color Picker Demo'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: controller!.value.isInitialized
                ? CameraPreview(controller!)
                : Container(
                    child: CircularProgressIndicator(),
                  ),
          ),
          ElevatedButton(
            onPressed: _takePicture,
            child: Text('Take Picture'),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _pickColor,
            child: Text('Pick Color'),
          ),
          SizedBox(height: 20),
          Container(
            width: 100,
            height: 100,
            color: selectedColor,
            child: Center(
              child: Text(
                'Selected Color',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Android 权限配置 (AndroidManifest.xml)

android/app/src/main/AndroidManifest.xml中添加必要的相机权限:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-feature android:name="android.hardware.camera" android:required="true" />
    <uses-feature android:name="android.hardware.camera.autofocus" />

    <!-- 其他配置 -->

</manifest>

iOS 权限配置 (Info.plist)

ios/Runner/Info.plist中添加必要的相机权限:

<key>NSCameraUsageDescription</key>
<string>Need camera access to capture images</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Need photo library access to save images</string>
<key>NSMicrophoneUsageDescription</key>
<string>Need microphone access to record audio</string>

注意事项

  1. 相机插件版本:确保你使用的camera插件版本与Flutter SDK版本兼容。
  2. 权限请求:在实际应用中,你需要在运行时请求权限,尤其是在iOS上。
  3. UI设计:示例代码中的UI设计非常简单,你可以根据需要进行自定义。

这段代码展示了如何在Flutter应用中集成颜色选择和相机拍照功能。希望这对你有所帮助!

回到顶部