Flutter图片处理插件flutter_picture_plugin的使用

Flutter插件 flutter_picture_plugin 可以帮助开发者轻松调用原生设备的相机和相册功能。本文将通过一个完整的示例展示如何在 Flutter 应用中集成并使用该插件。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 flutter_picture_plugin 依赖：

dependencies:
  flutter_picture_plugin: ^1.0.0 # 请根据实际版本号进行调整

运行以下命令以安装依赖：

flutter pub get

2. 初始化插件

在 main.dart 文件中初始化插件，并设置回调方法来接收从原生端返回的数据。

以下是完整的代码示例：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_picture_plugin/flutter_picture_plugin.dart'; // 导入插件

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  /// 当前选中的照片路径
  String _pickPath = "";
  /// 显示的图片状态描述
  String _picturesShowState = '未打开';

  @override
  void initState() {
    super.initState();
    // 注册插件回调
    FlutterPicturePlugin.channel.setMethodCallHandler((call) => callBack(call));
  }

  /// 处理插件回调
  callBack(MethodCall call) {
    print('_callBack(MethodCall call) in');
    switch (call.method) {
      case "callback_photo": // 接收原生端返回的照片路径
        upDatePicture(call);
        break;
    }
  }

  /// 更新页面上的图片路径
  upDatePicture(MethodCall call) {
    if (!mounted) return;
    setState(() {
      _pickPath = call.arguments;
    });
  }

  /// 打开设备的相机
  openCamera() async {
    String openCameraState;
    try {
      openCameraState = await FlutterPicturePlugin.openCamera() ?? '未检测到状态';
    } on PlatformException {
      openCameraState = '打开相机失败！';
    }

    if (!mounted) return;

    setState(() {
      _picturesShowState = openCameraState;
    });
  }

  /// 打开设备的相册
  openAlbum() async {
    String openAlbumState;
    try {
      openAlbumState = await FlutterPicturePlugin.openAlbum() ?? '未知状态';
    } on PlatformException {
      openAlbumState = '打开相册失败！';
    }

    if (!mounted) return;

    setState(() {
      _picturesShowState = openAlbumState;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter插件 调用安卓原相机、相册'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 显示选中的图片
              Container(
                width: 135,
                height: 135,
                margin: const EdgeInsets.symmetric(vertical: 20),
                decoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(100)),
                  image: _pickPath.isNotEmpty
                      ? DecorationImage(
                          image: FileImage(File(_pickPath)),
                          fit: BoxFit.cover,
                        )
                      : null,
                ),
              ),
              Text('当前状态: $_picturesShowState\n'), // 显示状态信息
              ElevatedButton(
                onPressed: openCamera,
                child: const Text('打开相机'),
              ),
              ElevatedButton(
                onPressed: openAlbum,
                child: const Text('打开相册'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

功能说明

1. 打开相机：

   • 调用 openCamera() 方法，会弹出设备的原生相机界面。
   • 返回值为选中的图片路径或错误信息。

2. 打开相册：

   • 调用 openAlbum() 方法，会弹出设备的原生相册界面。
   • 返回值为选中的图片路径或错误信息。

3. 图片预览：

   • 使用 FileImage 加载本地文件作为图片源，并通过 BoxFit.cover 适配容器大小。

效果图

运行上述代码后，应用界面如下：

• 点击“打开相机”按钮时，会跳转到设备相机界面。
• 点击“打开相册”按钮时，会跳转到设备相册界面。
• 选择图片后，会在界面上显示所选图片。

注意事项

1. 权限配置：
   • 在 Android 设备上，需要在 AndroidManifest.xml 中添加相机和存储权限：

     <uses-permission android:name="android.permission.CAMERA"/>
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
     

   • 在 iOS 设备上，需要在 Info.plist 中添加相机和相册权限描述：

     <key>NSCameraUsageDescription</key>
     <string>我们需要访问您的相机</string>
     <key>NSPhotoLibraryUsageDescription</key>
     <string>我们需要访问您的相册</string>