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();
}