美文网首页
Flutter 账号设置页(2)获取相册中的图片和用相机拍照

Flutter 账号设置页(2)获取相册中的图片和用相机拍照

作者: 大队辅导猿 | 来源:发表于2020-08-06 13:26 被阅读0次
666.png

上篇文章主要写了Item的组件,和Visibility 的简单用法

这篇文章主要是图片的选择的使用方法

在原生开发中经常可见图片的选择的需求,这个插件完美实现Ios和Android上的图片选择功能,并且不需要处理权限的问题

首先添加依赖

在pubspec.yaml加入image_picker的依赖,版本号在github上找最新的即可。
我这里用的 如下

dependencies:
  image_picker: ^0.6.1+4

拍照

var image = await ImagePicker.pickImage(source: ImageSource.camera);

拍照

var image = await ImagePicker.pickImage(source: ImageSource.gallery);

下面看我在这里的具体用法,底部弹窗弹出:

/// 底部弹窗
  void _showSelectionDialog(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (ctx) {
        return Container(
          color: Colors.white,
          height: 170,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              GestureDetector(
                child: _itemCreat(context, '相机'),
                onTap: () {
                  Navigator.pop(context);
                  getImage(ImageSource.camera);
                },
              ),
              GestureDetector(
                child: _itemCreat(context, '相册'),
                onTap: () {
                  Navigator.pop(context);
                  getImage(ImageSource.gallery);
                },
              ),
              GestureDetector(
                child: Padding(
                  padding: EdgeInsets.only(top: 10),
                  child: _itemCreat(context, '取消'),
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              )
            ],
          ),
        );
      },
    );
  }

  Widget _itemCreat(BuildContext context, String title) {
    return Container(
      color: Colors.white,
      height: 50,
      width: MediaQuery.of(context).size.width,
      child: Center(
        child: Text(
          title,
          style: TextStyle(fontSize: 16, color: Colors.black),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

GIthub 点我点我

相关文章

网友评论

      本文标题:Flutter 账号设置页(2)获取相册中的图片和用相机拍照

      本文链接:https://www.haomeiwen.com/subject/cfdrrktx.html