Flutter图片选择增强插件image_picker_pro的使用

简介

当您尝试添加一个包（如image_picker）来从图库或相机中选择图片时，可能会遇到许多问题，例如：

• 如果您的应用程序支持多主题，image_picker可能无法响应。
• 如果您的应用程序支持多语言，image_picker可能无法响应。
• 如果您的应用程序有良好的设计和用户体验，image_picker可能会破坏这一切，因为image_picker具有传统的图库显示界面。

在image_picker_plus中，我们解决了所有这些问题，并提供了许多其他功能，例如：

• 您可以自定义图库的UI。
• 您可以选择并裁剪选定的图像，具有不同的宽高比。
• 您可以显示照片和视频，并从中进行选择。
• 您可以显示图库、相机和视频，并允许用户从中选择。

安装

iOS

camera插件可以在任何版本的iOS上编译，但其功能需要iOS 10或更高版本。如果要为iOS 9编译，请确保在使用任何相机插件功能之前，通过编程检查设备运行的iOS版本。例如，可以使用device_info_plus插件来检查iOS版本。

在ios/Runner/Info.plist中添加两行：

• 一行带有键Privacy - Camera Usage Description和使用描述。
• 另一行带有键Privacy - Microphone Usage Description和使用描述。

如果以文本形式编辑Info.plist，则添加以下内容：

<key>NSCameraUsageDescription</key>
<string>your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>your usage description here</string>

Android

在android/app/build.gradle文件中，将最低Android SDK版本更改为21（或更高），并将编译SDK更改为31（或更高）。

compileSdkVersion 33
minSdkVersion 21

在AndroidManifest.xml中添加以下权限：

<manifest>
    ...
    <application
        android:requestLegacyExternalStorage="true"
    ...
    </application>
    <uses-permission android:name="android.permission.INTERNET"/>
    ...
</manifest>

1. 添加依赖

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

dependencies:
  image_picker_plus: [last_version]

2. 安装依赖

可以通过命令行安装包：

使用pub命令：

$ pub get image_picker_plus

使用Flutter命令：

$ flutter pub add image_picker_plus

3. 导入包

在Dart代码中导入：

import 'package:image_picker_plus/image_picker_plus.dart';

使用示例

以下是一个完整的示例代码，展示如何使用image_picker_plus插件来选择图片和视频。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImagePickerExample(),
    );
  }
}

class ImagePickerExample extends StatefulWidget {
  @override
  _ImagePickerExampleState createState() => _ImagePickerExampleState();
}

class _ImagePickerExampleState extends State<ImagePickerExample> {
  FileEntity? _selectedFile;

  Future<void> _pickImage() async {
    final result = await ImagePickerPlus().pickImage(
      source: PickerSourceType.galleryAndCamera,
      mediaType: MediaType.imageAndVideo,
      cropStyle: CropStyle.circle,
      cropAspectRatio: CropAspectRatio.ratio16x9,
    );

    if (result.isSuccessful) {
      setState(() {
        _selectedFile = result.files.first;
      });
    } else {
      print('Error: ${result.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Plus Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_selectedFile != null)
              Image.file(
                _selectedFile!.file,
                width: 200,
                height: 200,
                fit: BoxFit.cover,
              )
            else
              Icon(Icons.image, size: 100, color: Colors.grey),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image or Video'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明

1. 导入包：

   import 'package:image_picker_plus/image_picker_plus.dart';

   导入image_picker_plus包。

2. 初始化状态：

   FileEntity? _selectedFile;

   定义一个变量 _selectedFile 来存储选中的文件。

3. 选择图片或视频：

   Future<void> _pickImage() async {
     final result = await ImagePickerPlus().pickImage(
       source: PickerSourceType.galleryAndCamera,
       mediaType: MediaType.imageAndVideo,
       cropStyle: CropStyle.circle,
       cropAspectRatio: CropAspectRatio.ratio16x9,
     );

   调用ImagePickerPlus().pickImage方法，允许用户从图库或相机中选择图片或视频，并设置裁剪样式和宽高比。

4. 更新UI：

   if (result.isSuccessful) {
     setState(() {
       _selectedFile = result.files.first;
     });
   }

   如果选择成功，更新UI以显示选中的图片或视频。

5. 显示图片或视频：

   if (_selectedFile != null)
     Image.file(
       _selectedFile!.file,
       width: 200,
       height: 200,
       fit: BoxFit.cover,
     )

   如果有选中的文件，则显示图片或视频。

6. 按钮触发选择操作：

   ElevatedButton(
     onPressed: _pickImage,
     child: Text('Pick Image or Video'),
   )