【flutter util】拍照或选择相册图片

最近要做个上传图片的操作,想要实现以下弹出效果,我觉得挺简单就去网上翻,也没找到个简单现成的。我把自己刚写好的贴出来,这样下次我就能百度到自己了,自己写是不可能的,严格遵守面向百度编程原则。

 

引用插件:

image_picker: ^0.8.6

 调用:


File? choseFile = await ImageUtils.chosePhotoOnAlbumOrCamera(context: context);

有一点注意,由于取消选择或点击阴影部分,chosePhotoOnAlbumOrCamera方法会返回null,要记得考虑这种情况,特别是已经选择过一张照片需要二次选择的时候。

附代码:

import 'dart:io';

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

class ImageUtils {
  /**
   * 选择图片
   */
  static Future<File?> getImage({required ImageSource source, int quality = 100}) async {
    XFile? file = await ImagePicker().pickImage(source: source, imageQuality: quality);
    if (file == null) {
      return null;
    } else {
      return File(file.path);
    }
  }

  static Future<File?> chosePhotoOnAlbumOrCamera({required BuildContext context}) async {
    File? file;
    await showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        builder: (context) {
          return Container(
            decoration:
                BoxDecoration(color: Colors.white, borderRadius: BorderRadius.vertical(top: Radius.circular(10))),
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                InkWell(
                    onTap: () async {
                      file = await getImage(source: ImageSource.camera);
                      Navigator.pop(context);
                    },
                    child: Container(padding: EdgeInsets.symmetric(vertical: 15), child: Text("拍照"))),
                Divider(height: 1),
                InkWell(
                    onTap: () async {
                      file = await getImage(source: ImageSource.gallery);
                      Navigator.pop(context);
                    },
                    child: Container(padding: EdgeInsets.symmetric(vertical: 15), child: Text("相册"))),
                Divider(height: 1, color: Colors.black),
                InkWell(
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: Container(padding: EdgeInsets.symmetric(vertical: 15), child: Text("取消")),
                ),
              ],
            ),
          );
        });
    return file;
  }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭_栋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值