Flutter 手机拍照,选取照片功能实战

先来看看今天要完成的效果图吧:

插件

在开发此功能前需要用到image_picker插件,这个插件是用来打开相机拍照,或打开相册选取照片用的

1.将image_picker: ^0.6.7+12添加到dependencies节点下

2.点击Pub get下载此插件

下载成功会提示:Process finished with exit code 0

在使用image_picker插件的时候,添加image_picker插件导包即可

import ‘package:image_picker/image_picker.dart’;

用到组件

• showModalBottomSheet() //底部面板
• GestureDetector() //手势监听
• Column()//垂直布局
• FloatingActionButton() //Floating按钮
• Wrap()//水平自动换行布局
• ListTile()//常与ListView配合使用
• ImagePicker()//相册选取图片或相机拍照获得图片
• Stack()//叠加布局
• ClipRRect()//圆角
• Positioned()//布局内设置布局常与Stack配合使用

基本所有的组件在Flutter 如何进行Flutter布局开发(1.3)中都提到过,这里只描述没见过的
GestureDetector:Flutter 如何进行Flutter点击事件响应和手势监听(1.5)

showModalBottomSheet

加粗是必传参数

showModalBottomSheet(
        backgroundColor: Colors.tealAccent,
        //点击时底部面板颜色
        barrierColor: Colors.amber,
        //点击时,底部面板以外的颜色
        shape: RoundedRectangleBorder(
            //设置样式
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20), topRight: Radius.circular(20))),
        isScrollControlled: false,
        //true 全屏 false 半屏
        isDismissible: true,
        //true外部可以点击  false外部不可以点击
        elevation: 40,
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: 140,
            child: Column(
              children: [
                _item("拍照", false),
                _item("从相册选择", true),
              ],
            ),
          );
        })

效果图:

ListTile

_item("拍照", false, "拍照哦"),
_item("从相册选择", true, "选取照片哦"),
/**
   *  title 主标题
   *  bool true相册选取 false拍照选取
   *  subTitle 副标题
   */
  _item(String title, bool bool, String subTitle) {
    return GestureDetector(
      child: ListTile(
        tileColor: Colors.teal,//背景色会把圆角覆盖掉!!
        //背景色
        subtitle: Text(subTitle),
        //副标题
        dense: true,
        //将字体缩小
        leading: Icon(
          bool ? Icons.ac_unit_outlined : Icons.add,
          size: 25,
        ),
        //左边显示图片
        trailing: Icon(Icons.android),
        //末尾显示图片
        contentPadding: EdgeInsets.all(3),
        //内边距 默认16
        title: Text(
          title,
        ),
        onTap: () {//短按
          setState(() {
            getImage(bool);
          });
        },
        onLongPress: (){//长按

        },
        selected: true,//如果选中,则颜色会跟随主题颜色
        enabled: true,//禁止点击事件
      ),
    );
  }

效果图:

可以根据Navigator.pop(context);来关闭弹出页面!

ImagePicker

ImagePicker是用来获取相册图片或者拍照图片的插件

import 'package:image_picker/image_picker.dart';
File _image;
  /**
   * ImageSource.camera 相机拍照
   * ImageSource.gallery 相册选取图片
   */
Future getImage() async {
    final pickedFile = await picker.getImage( ImageSource.camera);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

• ImageSource.camera 相机拍照
• ImageSource.gallery 相册选取图片

最后通过Image.file(_image);来设置对应的图片

imagePacker官方介绍

完整代码

上一章:Flutter Widget生命周期以及应用周期(1.6)

下一章:Flutter 图片缓存(2.1)

原创不易,您的点赞就是对我最大的支持!