短视频商城源码，flutter 拍照以及选择相册多张图片组件封装

flutter正式发布以来，官方库和三方库也是该有的功能都有了，可以说是选择颇多，但是还是建议按照官方的来，毕竟再怎么搞，自己也不能搬起石头砸自己的脚，按照正版的永远没错。
这里我选择的是image_picker，photo，这两个库，具体使用哪个版本，可以点进去查看最新的版本号，不过如果你的androidX版本过低，会产生一些兼容问题，这个问题是所有最新的库都有可能存在的问题，由于我用的是一年前老项目，不太清楚谷歌新初始化的脚手架，有没有存在此问题，具体方法，放于另一篇文章讲解。

image_picker
用于短视频商城源码中的相机打开，虽然此库也可以选择图片，但是只能选择单张图片，至少我用的这个版本只能选一张，所有就需要再引入photo库来解决选择多张的问题。

首先声明我们需要的数据结构：

import 'package:photo/photo.dart';
import 'package:photo_manager/photo_manager.dart';
import 'package:image_picker/image_picker.dart';

class PickImageResponse {
  final List<String> paths; // 用于上传
  final List<File> files; // 用于展示用的缩略图

  PickImageResponse({this.paths, this.files});
}

封装打开相机方法：

final ImagePicker picker = ImagePicker();
// 打开相机
Future<PickImageResponse> Function() openCamera = () async {
  final PickedFile img = await picker.getImage(source: ImageSource.camera);
  if (img.path == null) return PickImageResponse();
  return PickImageResponse(paths: [img.path], files: [File(img.path)]);
};

photo
用于打开相册，选择多张图片。

// 选择相册多张图片
Future<PickImageResponse> Function(BuildContext, int) pickImageFromAlbum =
    (BuildContext context, int rest) async {
  List<AssetEntity> imgList = await PhotoPicker.pickAsset(
    context: context,
    themeColor: Color(0xff00c295),
    textColor: Colors.white,
    padding: 1.0,
    dividerColor: Colors.grey,
    disableColor: Colors.grey.shade300,
    itemRadio: 0.88,
    maxSelected: rest,
    provider: I18nProvider.chinese,
    rowCount: 3,
    thumbSize: 150,
    sortDelegate: SortDelegate.common,
    checkBoxBuilderDelegate: DefaultCheckBoxBuilderDelegate(
      activeColor: Colors.white,
      unselectedColor: Colors.white,
      checkColor: Color(0xff00c295),
    ),
    badgeDelegate: DurationBadgeDelegate(),
    pickType: PickType.onlyImage,
  );
  if (imgList == null || imgList.isEmpty) return PickImageResponse();

  List<String> r = [];
  List<File> f = [];
  for (var e in imgList) {
    var file = await e.file;
    f.add(file);
    r.add(file.absolute.path);
  }
  return PickImageResponse(paths: r, files: f);
};

上面是我配的一套ui，你可以根据需求进行相关修改。

由于有个bottom-sheet选择弹层，这里我就直接用了flutter自身的ios风格ui库进行了一次二次封装

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

class CupertinoActionSheetOptions {
  final List<dynamic> items;
  final void Function(int) callback;
  final String title;
  final String message;

  CupertinoActionSheetOptions(
      {@required this.items, this.callback, this.title, this.message});
}

// 底部普通弹出菜单 - ios风格
void Function(BuildContext, CupertinoActionSheetOptions) bottomSheet =
    (BuildContext context, CupertinoActionSheetOptions options) {
  showCupertinoModalPopup(
      context: context,
      builder: (BuildContext ctx) {
        return CupertinoActionSheet(
          cancelButton: CupertinoActionSheetAction(
              onPressed: () {
                router.back(context);
              },
              child: Text(
                '取消',
                style: TextStyle(color: Color(0xffcdcdcd)),
              )),
          actions: options.items
              .map((item) => CupertinoActionSheetAction(
                  onPressed: () {
                    final int idx = options.items.indexOf(item);
                    if (options.callback != null) {
                      options.callback(idx);
                    }
                    router.back(context, idx);
                  },
                  child: Text(item.toString())))
              .toList(),
        );
      });
  return;
};

最后封装成统一对外的方法：

// 打开选择框
void Function(BuildContext, int, Function(PickImageResponse))
    pickImageFromCameraOrAlbum =
    (BuildContext context, int rest, Function(PickImageResponse) callback) {
  bottomSheet(
      context,
      CupertinoActionSheetOptions(
          items: ['拍照', '相册'],
          callback: (int idx) async {
            if (idx == 0) return callback(await openCamera());
            return callback(await pickImageFromAlbum(context, rest));
          }));
  return;
};

选中之后缩略图的展示图下：

 imgList
       .map(
        (e) => Container(
       height: 80.0,
      width: 80.0,
       margin: EdgeInsets.only(right: 8.0),
      decoration: BoxDecoration(
         borderRadius:
             BorderRadius.all(Radius.circular(8.0)),
             image: DecorationImage(
                 fit: BoxFit.cover,
                 image: FileImage(e,),
             ),
         color: Color(0xFFF0F0F0),
      )
).toList()
// 或者直接使用 Image.file(file)