Flutter中拍照/图片选择功能

轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！下面是Flutter中拍照和图片选择的功能。

核心知识点：

1.使用了flutter中image_picker的三方来实现图片选择功能。

2.Wrap基础组件(实现自动换行)

3.Stack层叠布局控件和Positioned(固定叉号位置）

4.GestureDetector 手势(实现点击效果)

5.ClipOval组件(实现圆角效果)

效果图如下：

单图选取.gif

核心代码如下：

  /// 封装图片面板
  _generateImages() {
    return _images.map((file){
      return Stack(
        children: [
          ClipRRect(
            //圆角效果
            borderRadius: BorderRadius.circular(10),
            child: Image.file(file,width: 120,height: 90,fit:BoxFit.fill),
          ),
          Positioned(
            right: 5,
            top: 5,
            child: GestureDetector(
              onTap: (){
                setState(() {
                  _images.remove(file);
                });
              },
              child: ClipOval(
                //圆角删除按钮
                child: Container(
                  padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(color: Colors.black54),
                  child: Icon(Icons.close,size: 20,color: Colors.white,),
                ),
              ),
            ),
          ),
        ],
      );
    }).toList();
  }

Demo下载地址：take_photo_demo.