Flutter图片选择插件ux_images

Flutter图片选择插件ux_images_picker的使用

ux_images_picker 是一个用于从Android和iOS图像库中选择图片/视频，并使用相机拍摄图片/视频的Flutter插件。它还支持将图片/视频保存到相册/图库。

支持的功能

从照片库中选择多张图片或视频（微信样式）
使用相机拍摄图片或视频
自定义比例裁剪图片
按质量或最大大小压缩图片
将图片/视频保存到相册/图库
当前支持的语言包括：
- 系统语言
- 中文
- 繁体中文
- 英语
- 日语
- 法语
- 韩语
- 德语
- 越南语

安装

对于iOS：

<key>NSCameraUsageDescription</key>
<string>Example usage description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Example usage description</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Example usage description</string>

对于Android：

minSdkVersion 21

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

dependencies:
  images_picker: ^newest

导入包：

import "package:images_picker/images_picker.dart";

使用方法

简单选择图片

Future<void> getImage() async {
  List<Media> res = await ImagesPicker.pick(
    count: 3,
    pickType: PickType.image,
  );
  // Media
  // .path
  // .thumbPath (path for video thumb)
  // .size (kb)
}

简单选择视频

Future<void> getVideo() async {
  List<Media> res = await ImagesPicker.pick(
    count: 3,
    pickType: PickType.video,
  );
  // Media
  // .path
  // .thumbPath (path for video thumb)
  // .size (kb)
}

打开相机

Future<void> openCamera() async {
  List<Media> res = await ImagesPicker.openCamera(
    pickType: PickType.image,
    maxTime: 15, // 录制视频的最大时间
  );
}

添加GIF支持

Future<void> addGifSupport() async {
  List<Media> res = await ImagesPicker.pick(
    gif: true, // 默认为true
    // 其他参数...
  );
}

添加最大视频时长限制

Future<void> addMaxVideoDuration() async {
  List<Media> res = await ImagesPicker.pick(
    maxTime: 30, // 秒
    // 其他参数...
  );
}

添加裁剪功能

Future<void> addCropFunction() async {
  List<Media> res = await ImagesPicker.pick(
    cropOpt: CropOption(
      aspectRatio: CropAspectRatio.custom,
      cropType: CropType.rect, // 目前仅适用于Android
    ),
    // 其他参数...
  );
}

添加压缩功能

Future<void> addCompressFunction() async {
  List<Media> res = await ImagesPicker.pick(
    quality: 0.8, // 仅适用于Android
    maxSize: 500, // 仅适用于iOS (kb)
    // 其他参数...
  );
}

设置语言

Future<void> setLanguage() async {
  List<Media> res = await ImagesPicker.pick(
    language: Language.English,
    // 你可以设置为Language.System以跟随手机语言
  );
}

将文件保存到相册

Future<void> saveFileToAlbum() async {
  bool res = await ImagesPicker.saveImageToAlbum(File("path/to/file"));
  print(res);
}

将网络文件保存到相册

由于HTTP请求在插件中不可控（例如进度），你必须提前下载文件。

Future<void> saveNetworkFileToAlbum() async {
  File file = await downloadFile('https://cdn.chavesgu.com/logo.png');
  bool res = await ImagesPicker.saveImageToAlbum(file, albumName: "");
  print(res);
}

Future<File> downloadFile(String url) async {
  Dio dio = Dio();
  String savePath = Directory.systemTemp.path + '/' + url.split('/').last;
  await dio.download(url, savePath,
      options: Options(responseType: ResponseType.bytes));
  print(savePath);
  File file = File(savePath);
  return file;
}

所有参数

// 用于选择图片/视频
int count = 1,
PickType pickType = PickType.image,
bool gif = true,
int maxTime = 120,
CropOption cropOpt,
int maxSize,
double quality,

// 用于相机
PickType pickType = PickType.image,
int maxTime = 15,
CropOption cropOpt,
int maxSize,
double quality,

proguard规则

-keep class com.luck.picture.lib.** { *; }

-dontwarn com.yalantis.ucrop**
-keep class com.yalantis.ucrop** { *; }
-keep interface com.yalantis.ucrop** { *; }

许可证

MIT许可证

以下是完整的示例代码：

import 'dart:io';

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

import 'package:images_picker/images_picker.dart';

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

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

class _MyAppState extends State<MyApp> {
  String? path;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Column(
          children: [
            ElevatedButton(
              child: Text('选择'),
              onPressed: () async {
                List<Media>? res = await ImagesPicker.pick(
                  count: 3,
                  pickType: PickType.all,
                  language: Language.System,
                  maxTime: 30,
                  // maxSize: 500,
                  cropOpt: CropOption(
                    // aspectRatio: CropAspectRatio.wh16x9,
                    cropType: CropType.circle,
                  ),
                );
                print(res);
                if (res != null) {
                  print(res.map((e) => e.path).toList());
                  setState(() {
                    path = res[0].thumbPath;
                  });
                  // bool status = await ImagesPicker.saveImageToAlbum(File(res[0]?.path));
                  // print(status);
                }
              },
            ),
            ElevatedButton(
              child: Text('打开相机'),
              onPressed: () async {
                List<Media>? res = await ImagesPicker.openCamera(
                  // pickType: PickType.video,
                  pickType: PickType.image,
                  quality: 0.8,
                  maxSize: 800,
                  // cropOpt: CropOption(
                  //   aspectRatio: CropAspectRatio.wh16x9,
                  // ),
                  maxTime: 15,
                );
                print(res);
                if (res != null) {
                  print(res[0].path);
                  setState(() {
                    path = res[0].thumbPath;
                  });
                }
              },
            ),
            ElevatedButton(
              onPressed: () async {
                File file = await downloadFile('https://cdn.chavesgu.com/logo.png');
                bool res = await ImagesPicker.saveImageToAlbum(file, albumName: "chaves");
                print(res);
              },
              child: Text('保存网络图片到相册'),
            ),
            ElevatedButton(
              onPressed: () async {
                File file = await downloadFile('https://cdn.chavesgu.com/SampleVideo.mp4');
                bool res = await ImagesPicker.saveVideoToAlbum(file, albumName: "chaves");
                print(res);
              },
              child: Text('保存网络视频到相册'),
            ),
            path != null
                ? Container(
                    height: 200,
                    child: Image.file(
                      File(path!),
                      fit: BoxFit.contain,
                    ),
                  )
                : SizedBox.shrink(),
          ],
        ),
      ),
    );
  }

  Future<File> downloadFile(String url) async {
    Dio dio = Dio();
    String savePath = Directory.systemTemp.path + '/' + url.split('/').last;
    await dio.download(url, savePath,
        options: Options(responseType: ResponseType.bytes));
    print(savePath);
    File file = File(savePath);
    return file;
  }
}

更多关于Flutter图片选择插件ux_images_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼

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

当然，以下是一个使用 ux_images_picker 插件在 Flutter 中实现图片选择的代码示例。ux_images_picker 是一个流行的 Flutter 插件，用于从设备相册中选择图片。

首先，确保在 pubspec.yaml 文件中添加 ux_images_picker 依赖：

dependencies:
  flutter:
    sdk: flutter
  ux_images_picker: ^最新版本号  # 请替换为最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，在您的 Dart 文件中实现图片选择功能。以下是一个完整的示例：

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

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

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

class ImagePickerScreen extends StatefulWidget {
  @override
  _ImagePickerScreenState createState() => _ImagePickerScreenState();
}

class _ImagePickerScreenState extends State<ImagePickerScreen> {
  List<Asset> _selectedImages = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Demo'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 4.0,
              ),
              itemCount: _selectedImages.length,
              itemBuilder: (context, index) {
                Asset asset = _selectedImages[index];
                return Image.file(
                  File(asset.path),
                  fit: BoxFit.cover,
                );
              },
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              final List<Asset> resultList = await UxImagePicker.pickAssets(
                context,
                maxAssets: 9,
                requestType: RequestType.image,
                selectedAssets: _selectedImages.map((e) => AssetEntityImageProvider(e)).toList(),
              );

              if (resultList != null && resultList.isNotEmpty) {
                setState(() {
                  _selectedImages = resultList;
                });
              }
            },
            child: Text('Select Images'),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

我们首先导入了 flutter 和 ux_images_picker 包。
创建了一个 MyApp 无状态小部件作为应用的根。
在 ImagePickerScreen 有状态小部件中，我们维护了一个 _selectedImages 列表来存储选中的图片。
使用 GridView.builder 来显示已选中的图片。
使用 UxImagePicker.pickAssets 方法来打开图片选择器，并处理选中的图片。

注意：AssetEntityImageProvider 是 photo_manager 包中的类，ux_images_picker 依赖于 photo_manager。确保您理解这些依赖关系，并根据需要添加 photo_manager 到您的 pubspec.yaml 文件中。

这样，您就可以使用 ux_images_picker 插件在 Flutter 应用中实现图片选择功能了。