image_picker 图片选择插件

官网的示例比较复杂,因为它融合了视频选择及预览,此处将其分开出来展现,方便理解

选择图片

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_card/utils/diy_toast.dart';
import 'package:image_picker/image_picker.dart';

class ImageUploadWidget extends StatefulWidget {
  final bool? isMulti;
  const ImageUploadWidget({super.key, this.isMulti = true});

  
  State<ImageUploadWidget> createState() => _ImageUploadWidgetState();
}

class _ImageUploadWidgetState extends State<ImageUploadWidget> {
  final ImagePicker _picker = ImagePicker();
  List<XFile>? _fileList = [];

  Future _getImage() async {
    try {
      // 选择相册,单张和多张的方法不同
      if (widget.isMulti == false) {
        final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
        setState(() {
          if (pickedFile != null) {
            _fileList = <XFile>[pickedFile];
          }
        });
      } else {
        final pickedFile = await _picker.pickMultiImage();
        setState(() {
          _fileList = pickedFile;
        });
      }
    } catch (e) {
      setState(() {
        showToast(e.toString());
      });
    }
  }

  
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _getImage();
      },
      child: _fileList!.isEmpty
          ? const Text('选择图片')
          : Wrap(
              spacing: 10.0,
              runSpacing: 10.0,
              children: _createImage(),
            ),
    );
  }

  List<Widget> _createImage() {
    return _fileList!.map((e) {
      return FractionallySizedBox(
        widthFactor: 0.3,
        child: Image.file(File(e.path)),
      );
    }).toList();
  }
}

该插件目前暂不支持多选的时候限制最大选择数量,根据git上面的讨论得知是因为平台的限制,目前已得知iOS平台可以,Android需要高版本才支持,但未看到插件官方给出相关示例。下面是通过代码来限制最大选择数量的示例,虽然可以得到最终结果,但是效果不太好

Future galleryImage() async {
if (images.length == 0 || images.length < 4) {
  var pics = await ImagePicker().pickMultiImage(imageQuality: 10);
  if (pics != null && pics.length < 5) {
    photos = pics;
    pics.forEach((element) {
      images.add(File(element.path));
      update();
      print('length: ${images.length}');
    });
  update();
}
Last Updated:
Contributors: af