Flutter獲取相冊中的圖片和用相機拍照
在原生開發中,拍照及從圖庫選擇圖片是非常常見的需求,而且原生的圖片選擇第三方庫也有很多並且很完善了。
Flutter也給我們提供了好用的圖片選擇插件,ios和Android都能用的呦!
image_picker
先上圖
Flutter拍照:
Flutter選擇圖片
使用方法
首先添加依賴
在pubspec.yaml加入image_picker的依賴,版本號在github上找最新的即可。
如下:
依賴添加完成點擊右上角的 Packages get 出現finished及可。
使用
依賴添加完成之後我們就可以正常使用了
首先要導包:
import 'package:image_picker/image_picker.dart';
我們先來看看ImagePicker提供的方法,目前有兩個,選圖片和選視頻。
其中選擇圖片可以通過圖庫和相機的方式獲得。
我們主要來看看圖片
拍照
var image = await ImagePicker.pickImage(source: ImageSource.camera);
相冊
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
是不是超級簡單,在Android上權限申請都不需要管。
下面是完整代碼:
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
class ImagePickerWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ImagePickerState();
}
}
class _ImagePickerState extends State<ImagePickerWidget> {
var _imgPath;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ImagePicker"),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
_ImageView(_imgPath),
RaisedButton(
onPressed: _takePhoto,
child: Text("拍照"),
),
RaisedButton(
onPressed: _openGallery,
child: Text("選擇照片"),
),
],
),
));
}
/*圖片控件*/
Widget _ImageView(imgPath) {
if (imgPath == null) {
return Center(
child: Text("請選擇圖片或拍照"),
);
} else {
return Image.file(
imgPath,
);
}
}
/*拍照*/
_takePhoto() async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_imgPath = image;
});
}
/*相冊*/
_openGallery() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_imgPath = image;
});
}
}
注意事項
當圖片過長超過顯示寬高度的話,可能會報 The overflowing RenderFlex has an orientation of Axis.vertical. 這個錯,且底部會有黃色的警告。
具體報錯信息大概如下:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10595): The following message was thrown during layout:
I/flutter (10595): A RenderFlex overflowed by 177 pixels on the bottom.
I/flutter (10595):
I/flutter (10595): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (10595): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (10595): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (10595): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (10595): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (10595): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (10595): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (10595): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (10595): like a ListView.
這裏我們直接使用 SingleChildScrollView(單個子控件的滾動佈局控件) 即可。
需要demo的可以下載: Flutter拍照和相冊選擇圖片Demo
如果你覺得本文對你有幫助,麻煩動動手指頂一下,算是對本文的一個認可。也可以關注我的 Flutter 博客專欄,我會不定期的更新,如果文中有什麼錯誤的地方,還望指正,轉載請註明轉自喻志強的博客 ,謝謝!