Flutter学习第九天:实现拍照,本地图片选择的简单Demo实现。

废话少说,先看一下效果,主要功能:
1.可以选择多张本地图片
2.可以实现拍照
3.可以实现选择图片排列
4.可以实现图片的删除


在这里插入图片描述
在这里插入图片描述

1.导入依赖

1.依赖如下

image_pickers: ^1.0.8+7

如果先了解更多的功能,可以去看这个依赖说明地址

2.导入依赖步骤

导入框架前得把build.gradle的版本改为19到29之间,如图所示:


在这里插入图片描述

我使用的软件为android studio,步骤如下图:


在这里插入图片描述

2.所有代码如下:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_pickers/image_pickers.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<File> _image=[];

  Future getImage() async {
    List<Media> _listImagePaths = await ImagePickers.pickerPaths(
        galleryMode: GalleryMode.image,
        selectCount: 2,
        showGif: false,
        showCamera: true,
        compressSize: 500,
        uiConfig: UIConfig(uiThemeColor: Color(0xffff0f50)),
        cropConfig: CropConfig(enableCrop: false, width: 2, height: 1));

    setState(() {
      if (_listImagePaths != null) {
        for(int i=0;i<_listImagePaths.length;i++) {
          _image.add(File(_listImagePaths[i].path.toString()));
        }
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Center(
        child:Wrap(
          spacing: 5,
          runSpacing: 5,
          children: _genImages(),
        )
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }


  _genImages() {
    return _image.map((file){
      return Stack(
        children:<Widget> [
          ClipRRect(
            borderRadius:BorderRadius.circular(5),
            child: Image.file(file,width: 90,height: 90,fit: BoxFit.fill,),
          ),Positioned(
            right: 5,
            top: 5,
            child:GestureDetector(
              onTap: (){
                setState(() {
                  _image.remove(file);
                });
              },
              child: ClipOval(
                child: Container(
                  padding: EdgeInsets.all(3),
                  decoration: BoxDecoration(color: Colors.black54),
                  child: Icon(Icons.close,size: 18,color: Colors.white,),
                ),
              ),
            ),
          )
        ],
      );
    }).toList();
  }
}

代码解析:

继承的类为StatefulWidget型,因为与UI组件存在交互,需要使用setState方法,如图所示:

在这里插入图片描述

因为Flutter的布局格式有点像俄罗斯套娃,所有基本结构如下:
在这里插入图片描述

组件名 作用
Center 内部居中显示
Wrap 流布局,布局格式和Row表现很像,但Row只能是单行,Wrap可以多行
Stack 把所有的子widget都是重叠放在一起的,一个与Positioned组件一起使用,通过绝对定位来控制左右上下的距离
ClipRRectt 通过borderRadius属性来设置图片圆角
Image.file 加载本地图片

依赖的使用:

 List<Media> _listImagePaths = await ImagePickers.pickerPaths(
        galleryMode: GalleryMode.image, 
        selectCount: 2,  
        showGif: false, 
        showCamera: true, 
        compressSize: 500, 
        uiConfig: UIConfig(uiThemeColor: Color(0xffff0f50)), 
        cropConfig: CropConfig(enableCrop: false, width: 2, height: 1));

属性的作用:

属性名 作用
galleryMode 选择 image or video
selectCount 选择图片的最大数量
showCamera 显示相机按钮
cropConfig 裁剪配置,主要对图片使用,对视频不可用
compressSize 当图片大小小于compressSize时将不压缩
uiConfig 选择图片或选择视频页面的主题
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,858评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,372评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,282评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,842评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,857评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,679评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,406评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,311评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,767评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,945评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,090评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,785评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,420评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,988评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,101评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,298评论 3 372
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,033评论 2 355

推荐阅读更多精彩内容

  • 轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!下面是Flutter中拍照和图片选择的功能。 核心知识...
    翀鹰精灵阅读 3,392评论 0 4
  • 废话少说,本文分四个部分,css、js、知识点一、知识点二、React(部分问题没有给出答案,后续更新) css面...
    666同学阅读 1,099评论 0 0
  • 一、Unity简介 1. Unity界面 Shift + Space : 放大界面 Scene界面按钮渲染模式2D...
    MYves阅读 8,211评论 0 22
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,567评论 0 11
  • 彩排完,天已黑
    刘凯书法阅读 4,218评论 1 3