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

最新推荐文章于 2024-04-16 06:08:23 发布

郭_栋

最新推荐文章于 2024-04-16 06:08:23 发布

阅读量447

点赞数

分类专栏： flutter util 文章标签： flutter

本文链接：https://blog.csdn.net/jellywfguo/article/details/128711791

版权

flutter 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

util

2 篇文章 0 订阅

订阅专栏

文章介绍了在Flutter中使用image_picker插件创建一个自定义的图片选择器，包括从相机和相册选择图片，以及处理用户取消选择的情况。提供的代码示例展示了如何调用插件并处理返回的File对象。

摘要由CSDN通过智能技术生成

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

引用插件：

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