Flutter之拍照和选择相册
一.在.yaml文件中导入image_picker插件,并pub get下载依赖
dependencies: flutter: sdk: flutter image_picker: ^0.6.2+1二.平台兼容
针对ios平台,需要在Info.plist文件中定义相机、相册、录音的使用说明
<key>NSCameraUsageDescription</key><string>拍照功能说明</string><key>NSMicrophoneUsageDescription</key><string>录音功能说明</string><key>NSPhotoLibraryUsageDescription</key><string>相册功能说明</string>针对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=trueandroid.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<StatefulWidget> createState() { // TODO: implement createState return _ImagePickerState(); }}class _ImagePickerState extends State<ImagePickerWidget> { List<File> _imageList = <File>[]; 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: <Widget>[ Padding( padding: EdgeInsets.all(5.0), child: Wrap( direction: Axis.horizontal, spacing: 5.0, runSpacing: 5.0, children: _buildImageWidgetList(), ), ) ], ), ), ); } List<Widget> _buildImageWidgetList() { List<Widget> imageWidgetList = <Widget>[]; for(int i=0; i<_imageList.length; i++) { imageWidgetList.add( Stack( children: <Widget>[ 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: <Widget>[ 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; }}
