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: <Widget>[
          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.
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容