首先必須注意一點:在升級flutter1.9+之后,flutter默認的iOS項目為swift,Android的默認項目為kotlin,而且通過IDEA創建的flutter項目,即使勾選了語言為oc,但是創建后的項目仍然是swift,頗為頭疼.這里我們講解的是基於iOS的OC和Android的JAVA來做的,畢竟我還是水手還沒上岸成為干貨(功力不足)。總之先跑通,再深究。
image_picker使用方法
首先添加依賴
在pubspec.yaml加入image_picker的依賴,版本號在github上找最新的即可。
如下:最新的是可以在這里找到:https://pub.dev/flutter/packages?q=image_picker,輸入:image_picker即可搜索到最新版本,這里用老版本(穩)
依賴添加完成點擊右上角的 Packages get 出現finished及可。
使用
依賴添加完成之后我們就可以正常使用了
是不是超級簡單,我們權限申請都不需要管。
下面是完整代碼:
import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; //在pubspec.yaml加入image_picker的依賴,image_picker: ^0.5.0+3 void main() { runApp( MaterialApp( title: 'Flutter gesture', // home: TutorialHome(), home: AuthenticationId(), )); } class AuthenticationId extends StatefulWidget { @override _AuthenticationIdState createState() => _AuthenticationIdState(); } class _AuthenticationIdState extends State<AuthenticationId>{ var 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; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("認證"), elevation: 0.0, ), body: SingleChildScrollView( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( child: imgPath == null ? Text('請選擇拍照'):Image.file(imgPath), ), RaisedButton( onPressed: takePhoto, child: Text("拍照"), ), RaisedButton( onPressed: openGallery, child: Text("選擇照片"), ), ], ), )); } }
注意事項
當圖片過長超過顯示寬高度的話,可能會報 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(單個子控件的滾動布局控件) 即可。
原文不足的地方我這里(上面)已經補全了。
原文出處:https://blog.csdn.net/yuzhiqiang_1993/article/details/88345232()