我爱模板网 > 建站教程 > APP开发,混合APP >  Flutter从相册选择图片和相机拍照(image_picker)正文

Flutter从相册选择图片和相机拍照(image_picker)

Flutter获取相册中的图片和用相机拍照
    在原生开发中,拍照及从图库选择图片是非常常见的需求,而且原生的图片选择第三方库也有很多并且很完善了。
    Flutter也给我们提供了好用的图片选择插件,ios和Android都能用的 image_picker

    Flutter拍照:



    Flutter选择图片:



使用方法
    一、在pubspec.yaml加入image_picker的依赖,版本号在github上找最新的即可。

    如下:
1dependencies:
2    image_picker: ^0.6.2+1
    添加完依赖,在VSCODE,直接Ctrl+s保存,会自动get到本地。

    二、IOS中要获取权限:
    找到:<project root>/ios/Runner/Info.plist,添加下面代码,描述自己根据需求写即可:
1<key>NSPhotoLibraryUsageDescription</key>
2<string>XXX需要获取相册权限</string>
3<key>NSCameraUsageDescription</key>
4<string>XXX需要获取相机权限</string>
5<key>NSMicrophoneUsageDescription</key>
6<string>XXX需要获取麦克风权限</string>
    三、导包
1import 'package:image_picker/image_picker.dart';
    四、使用
    拍照
1var image = await ImagePicker.pickImage(source: ImageSource.camera);
    相册
1var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    五、完整代码:
01import 'package:flutter/material.dart';
02import 'dart:io'//这个必须引入,因为用到了File
03import 'package:image_picker/image_picker.dart';
04 
05class ImagePickerWidget extends StatefulWidget {
06  @override
07  State<StatefulWidget> createState() {
08    return _ImagePickerState();
09  }
10}
11 
12class _ImagePickerState extends State<ImagePickerWidget> {
13  File _imgPath;
14 
15  @override
16  Widget build(BuildContext context) {
17    return Scaffold(
18        appBar: AppBar(
19          title: Text("ImagePicker"),
20        ),
21        body: SingleChildScrollView(
22          child: Column(
23            children: <Widget>[
24              _ImageView(_imgPath),
25              RaisedButton(
26                onPressed: _takePhoto,
27                child: Text("拍照"),
28              ),
29              RaisedButton(
30                onPressed: _openGallery,
31                child: Text("选择照片"),
32              ),
33            ],
34          ),
35        ));
36  }
37 
38  /*图片控件*/
39  Widget _ImageView(imgPath) {
40    if (imgPath == null) {
41      return Center(
42        child: Text("请选择图片或拍照"),
43      );
44    } else {
45      return Image.file(
46        imgPath,
47      );
48    }
49  }
50 
51  
52  /*拍照*/
53  _takePhoto() async {
54    var image = await ImagePicker.pickImage(source: ImageSource.camera);
55 
56    setState(() {
57      _imgPath = image;
58    });
59  }
60 
61  /*相册*/
62  _openGallery() async {
63    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
64    setState(() {
65      _imgPath = image;
66    });
67  }
68}


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:Flutter No Material widget found报错的解决办法 下一篇:Flutter之CircleAvatar组件,圆形和圆角图片
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢