33_Flutter之拍照和选择相册
Flutter之拍照和选择相册
一.在.yaml文件中导入image_picker插件,并pub get下载依赖
dependencies:
flutter:
sdk: flutter
image_picker: ^0.6.2+1
二.平台兼容
-
针对ios平台,需要在Info.plist文件中定义相机、相册、录音的使用说明
NSCameraUsageDescription 拍照功能说明 NSMicrophoneUsageDescription 录音功能说明 NSPhotoLibraryUsageDescription 相册功能说明 -
针对android平台，需要适配androidX
-
在android/gradle/wrapper/gradle-wrapper.properties更改gradle版本为4.10.2及其以上版本
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip -
在android/build.gradle中,将
dependencies { classpath 'com.android.tools.build:gradle:3.2.1' }替换成
dependencies { classpath 'com.android.tools.build:gradle:3.3.0' } -
在android/gradle.properties中,加入
android.enableJetifier=true android.useAndroidX=true -
在android/app/build.gradle中,确保compileSdkVersion 和 targetSdkVersion至少为28
-
在 android/app/build.gradle中,将
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"改为
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" -
在dependencies {}中,将
androidTestImplementation 'com.android.support.test:runner:1.0.2'
-
androidTestImplementation ‘com.android.support.test.espresso:espresso-core:3.0.2’
```
改为
```
androidTestImplementation 'androidx.test:runner:1.1.1'
androidTestImplementation ‘androidx.test.espresso:espresso-core:3.1.1’
```
3.通过拍照获取图片
-
引入image_picker依赖
import 'package:image_picker/image_picker.dart'; -
通过
ImagePicker.pickImage(source: ImageSource.camera);实现拍照,由于ImagePicker.pickImage方法返回的是一个Future对象,所以可以配合async以及await来获取到最后的图片路径
void getImage() async { File image = await ImagePicker.pickImage(source: ImageSource.camera); }
4.通过选择相册获取图片
用法和通过拍照选择图片类似,只是在调用ImagePicker.pickImage方法时,传入的参数不再是ImageSource.camera,而是ImageSource.gallery
5.示例
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:ui';
class ImagePickerWidget extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return _ImagePickerState();
}
}
class _ImagePickerState extends State {
List _imageList = [];
double screenWidth = 0;
@override
Widget build(BuildContext context) {
MediaQueryData mediaQuery = MediaQueryData.fromWindow(window);
screenWidth = mediaQuery.size.width;
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(
"ImagePickerWidget",
),
),
body: Container(
child: ListView(
scrollDirection: Axis.vertical,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: Wrap(
direction: Axis.horizontal,
spacing: 5.0,
runSpacing: 5.0,
children: _buildImageWidgetList(),
),
)
],
),
),
);
}
List _buildImageWidgetList() {
List imageWidgetList = [];
for(int i=0; i<_imageList.length; i++) {
imageWidgetList.add(
Stack(
children: [
Container(
width: ((screenWidth - 20.0)/3).floorToDouble(),
height: 100.0,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xffe0e0e0),
width: 2.0
),
borderRadius: BorderRadius.circular(5.0)
),
child: ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: Image.file(_imageList[i], fit: BoxFit.cover,),
),
),
Positioned(
right: 5,
top: 5,
child: ClipOval(
child: GestureDetector(
onTap: () {
_imageList.removeAt(i);
setState(() {});
},
child: Container(
width: 24,
height: 24,
color: Color(0xa9000000),
child: Icon(Icons.close, size: 24, color: Colors.white,),
),
),
)
)
],
)
);
}
imageWidgetList.add(
GestureDetector(
onTap: () {
showModalBottomSheet(context: context, builder: (context) {
return SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: () async {
Navigator.pop(context);
File image = await ImagePicker.pickImage(source: ImageSource.camera);
print(image.path);
if(!_imageList.contains(image)) {
_imageList.add(image);
setState(() {});
}
},
child: Container(
alignment: Alignment.center,
height: 44.0,
padding: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xfff2f2f2),
width: 1.0
)
)
),
child: Text(
"拍照",
style: TextStyle(
fontSize: 16.0
),
),
),
),
GestureDetector(
onTap: () async {
Navigator.pop(context);
File image = await ImagePicker.pickImage(source: ImageSource.gallery);
print(image.path);
if(!_imageList.contains(image)) {
_imageList.add(image);
setState(() {});
}
},
child: Container(
alignment: Alignment.center,
height: 44.0,
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Text(
"选择相册",
style: TextStyle(
fontSize: 16.0
),
),
),
)
],
)
);
});
},
child: Container(
width: ((screenWidth - 20.0)/3).floorToDouble(),
height: 100.0,
decoration: BoxDecoration(
border: Border.all(
color: Color(0xffe0e0e0),
width: 1.0
),
borderRadius: BorderRadius.circular(5.0)
),
child: Center(
child: Icon(Icons.add_photo_alternate, size: 70, color: Color(0xffd0d0d0)),
),
),
)
);
return imageWidgetList;
}
}