Flutter图片与文件选择插件image_and_file_picker_utility的使用

Flutter图片与文件选择插件image_and_file_picker_utility的使用

简介

这个Flutter包简化了从相机和相册中选择图片的过程，具有内置权限处理、图像裁剪、保存所选相机图像、图像压缩和文件选择功能。它旨在为在Flutter应用程序中处理图像和文件提供一个易于使用的解决方案。

功能

• 从相机和相册选择图像，并进行权限处理
• 相机和存储的权限处理
• 图像裁剪功能
• 将所选相机图像保存到设备
• 图像压缩以优化存储使用
• 文件选择并进行权限处理

Flutter兼容性

开始使用

要将该包集成到您的Flutter项目中，请按照以下步骤操作：

第一步：添加依赖

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

dependencies:
  image_and_file_picker_utility: ^0.0.7

然后运行：

flutter pub get

第二步：Android设置

在AndroidManifest.xml中添加权限：

<uses-permission android:name="android.hardware.camera" />
<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" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>

在application标签中添加活动用于裁剪图像：

<application>
    <activity
        android:name="com.yalantis.ucrop.UCropActivity"
        android:exported="true"
        android:screenOrientation="portrait"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar" 
    </activity>
</application>

第三步：iOS设置

在Podfile中添加权限如下：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',
        'PERMISSION_CAMERA=1',
        'PERMISSION_PHOTOS=1',
      ]
    end
  end
end

在info.plist文件中添加权限使用：

<key>NSPhotoLibraryUsageDescription</key>
<string>我们的应用程序需要访问照片的权限</string>
<key>NSCameraUsageDescription</key>
<string>我们的应用程序需要访问相机的权限</string>

使用方法

图像

通过底部菜单选择图像：

await ImagePickerUtil().showImagePickerBottomSheet(
  context: context, // 上下文
  isCropImage: true, // 是否裁剪图像
  savePickedCameraImageToStorage: true, // 是否保存所选相机图像到存储
  pickImageImageQuality: 100, // 图像质量
  onImageSelection: (File? pickedImage) {}, // 回调函数
);

从相机选择图像：

File? file = await getFromCameraWithPermissionCheck(
  context: context, // 上下文
  permissionDescriptionText: "需要访问相机的权限", // 权限描述文本
  isCrop: true, // 是否裁剪
  saveCameraImage: true, // 是否保存相机图像
);

从相册选择图像：

File? file = await getFromGalleryWithPermissionCheck(
  context: context, // 上下文
  permissionDescriptionText: '需要访问相册的权限', // 权限描述文本
  isCrop: true, // 是否裁剪
);

图像裁剪：

import 'package:image_cropper/image_cropper.dart';

File? file = await cropImage(
  file: File("path"), // 图像路径
  context: context, // 上下文
);

文件

import 'package:file_picker/file_picker.dart';

final List<File>? pickedFileList = await FilePickerUtil().getFilePicker(
  allowMultiple: true, // 是否允许多选
  allowCompression: true, // 是否允许压缩
  fileType: FileType.any, // 文件类型
  context: context, // 上下文
  /// 当您想要选择特定扩展名的文件时，请选择类型为FileType.custom并通过allowedExtensions参数传递扩展名
  // fileType:FileType.custom,
  // allowedExtensions: ['jpg', 'pdf', 'doc'],
);

权限处理

存储权限：

bool isPermissionGranted = await PermissionHandler().getStoragePermission(
  context: context, // 上下文
  permissionDescriptionText: "需要访问文件的权限", // 权限描述文本
);

相机权限：

bool isPermissionGranted = await PermissionHandler().getCameraPermission(
  context: context, // 上下文
  permissionDescriptionText: "需要访问相机的权限", // 权限描述文本
);

照片权限（仅适用于iOS）：

bool isPermissionGranted = await PermissionHandler().getPhotosPermission(
  context: context, // 上下文
  permissionDescriptionText: "需要访问照片的权限", // 权限描述文本
);

打开设置以处理拒绝权限：

await PermissionHandler().openSettings();

示例截图

完整示例Demo

import 'package:flutter/material.dart';
import 'package:image_and_file_picker_utility/image_and_file_picker_utility.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 Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExampleScreen(),
    );
  }
}

class ExampleScreen extends StatefulWidget {
  const ExampleScreen({super.key});

  [@override](/user/override)
  _ExampleScreenState createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  File? _pickedImage;

  void _pickImageFromCamera() async {
    final file = await getFromCameraWithPermissionCheck(
      context: context,
      permissionDescriptionText: "需要访问相机的权限",
      isCrop: true,
      saveCameraImage: true,
    );
    setState(() {
      _pickedImage = file;
    });
  }

  void _pickImageFromGallery() async {
    final file = await getFromGalleryWithPermissionCheck(
      context: context,
      permissionDescriptionText: '需要访问相册的权限',
      isCrop: true,
    );
    setState(() {
      _pickedImage = file;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (_pickedImage != null)
              Image.file(_pickedImage!),
            ElevatedButton(
              onPressed: _pickImageFromCamera,
              child: Text('Pick Image from Camera'),
            ),
            ElevatedButton(
              onPressed: _pickImageFromGallery,
              child: Text('Pick Image from Gallery'),
            ),
          ],
        ),
      ),
    );
  }
}