flutter 多次上传照片组件

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:yl_etf/api/api_services.dart';
import 'package:yl_etf/common/services_locator.dart';
import 'package:yl_etf/generated/assets.dart';
import 'package:yl_etf/utils/util.dart';
import 'package:yl_etf/widgets/public_dropdown.dart';

class Camera extends StatefulWidget {
  const Camera({Key? key, required this.callBack}) : super(key: key);
  final Function callBack;
  @override
  State<Camera> createState() => _CameraState();
}

class _CameraState extends State<Camera> {
  ApiServices services = serviceLocator<ApiServices>();

  List data = [
    {'label': '相机', 'value': '相机'},
    {'label': '相册', 'value': '相册'},
  ];

  List submitData = [Assets.dafultImage];

  ///上传图片
  void uploadPaymentDocument(String filePath) async {
    BLDUtil.showLoading(status: '正在上传图片');
    final res = await services.uploadImage(filePath: filePath);
    if (res.isSuccess) {
      BLDUtil.toast('上传成功');
      submitData.insert(0, res.data.toString());
      widget.callBack(submitData);
      setState(() {});
    } else {
      BLDUtil.toast('上传失败');
    }
  }

  /*拍照*/
  _takePhoto() async {
    final ImagePicker _picker = ImagePicker();
    final XFile? image = await _picker.pickImage(source: ImageSource.camera);
    if (image != null) {
      uploadPaymentDocument(image.path);
    }
  }

  /*相册*/
  _openGallery() async {
    final ImagePicker _picker = ImagePicker();
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      uploadPaymentDocument(image.path);
    }
  }

  _delectImageData(e) {
    setState(() {
      submitData.removeAt(e);
    });
    widget.callBack(submitData);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          submitData.isEmpty
              ? Container()
              : Wrap(
                  crossAxisAlignment: WrapCrossAlignment.center,
                  runSpacing: 3.0,
                  children: submitData
                      .asMap()
                      .keys
                      .map((e) => submitData[e] == Assets.dafultImage
                          ? GestureDetector(
                              onTap: () {
                                publicDropdownFunction(context,
                                    callback: (value, select) {
                                  if (value['value'] == '相机') {
                                    _takePhoto();
                                  } else {
                                    _openGallery();
                                  }
                                }, defaultIndex: 0, data: data, title: '请选择方式');
                              },
                              child: Container(
                                alignment: Alignment.center,
                                width: 100,
                                height: 100,
                                margin: const EdgeInsets.only(top: 20),
                                decoration: const BoxDecoration(
                                    color: Color(0xfff7f7f7),
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(10))),
                                child: Image.asset(Assets.dafultImage),
                              ),
                            )
                          : Stack(
                              children: [
                                Container(
                                  margin:
                                      const EdgeInsets.only(right: 20, top: 10),
                                  color:
                                      const Color(0xffCCCCCC).withOpacity(.2),
                                  child: CachedNetworkImage(
                                    width: 100,
                                    height: 100,
                                    imageUrl: submitData[e],
                                    imageBuilder: (context, imageProvider) =>
                                        Container(
                                      decoration: BoxDecoration(
                                        image: DecorationImage(
                                            image: imageProvider,
                                            fit: BoxFit.cover),
                                      ),
                                    ),
                                    errorWidget: (context, url, error) =>
                                        const Icon(Icons.error),
                                  ),
                                ),
                                Positioned(
                                    right: 10,
                                    child: GestureDetector(
                                      onTap: () {
                                        _delectImageData(e);
                                      },
                                      child: const Icon(
                                        Icons.cancel,
                                        color: Colors.red,
                                      ),
                                    ))
                              ],
                            ))
                      .toList(),
                ),
        ],
      ),
    );
  }
}