推薦一款Flutter 插件 image_picker iOS和Android的Flutter插件

2021-01-12 勤與奮

一個適用於iOS和Android的Flutter插件,用於從圖像庫中獲取照片,並使用相機拍攝新照片。

本頭條核心宗旨

歡迎來到「技術剛剛好」作者,「技術剛剛好」是個人維護,每天至少更新一篇Flutter技術文章,實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術,那就跟我一起學習進步吧,你的贊,收藏,轉發是對我個人最大的支持,維護不易,歡迎關注。

技術剛剛好經歷

近幾年,移動端跨平臺開發技術層出不窮,從Facebook家的ReactNative,到阿里家WEEX,前端技術在移動端跨平臺開發中大展身手,技術剛剛好作為一名Android開發,經歷了從Reactjs到Vuejs的不斷學習。而在2018年,我們的主角變成了Flutter,這是Goolge開源的一個移動端跨平臺解決方案,可以快速開發精美的移動App。希望跟大家一起學習,一起進步!

本文核心要點

Flutter的Image Picker插件,IOS Android 都能使用,可以從圖片庫中讀取照片,照片的清晰度,大小都可查看,而且還支持拍照。

2019年12月10日 最近更新。獲取了17個點讚。目前版本是0.6.2 + 3更新內容如下:

author:從pubspec.yaml中刪除不推薦使用的欄位將插件遷移到pubspec平臺清單。需要Flutter SDK 1.10.0或更高版本。

添加教程

第一步去pubspec.yaml文件中添加如下代碼

dependencies: image_picker: ^0.6.2+3第二步點擊工具欄

flutter pub get

然後在需要的地方使用

import 'package:image_picker/image_picker.dart';IOS添加

將以下密鑰添加到您的Info.plist文件中<project root>/ios/Runner/Info.plist:

NSPhotoLibraryUsageDescription-描述您的應用為何需要照片庫權限。在視覺編輯器中,這稱為「 隱私-照片庫使用說明 」。NSCameraUsageDescription-說明為什麼您的應用需要訪問相機。在視覺編輯器中,這稱為「 隱私-相機使用說明 」。NSMicrophoneUsageDescription-說明您要錄製視頻的原因,為什麼您的應用需要使用麥克風。在可視編輯器中,這稱為「 隱私-麥克風使用說明 」。DEMO例子

import 'package:image_picker/image_picker.dart';class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { File _image; Future getImage() async { var image = await ImagePicker.pickImage(source: ImageSource.camera); setState(() { _image = image; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Image Picker Example'), ), body: Center( child: _image == null ? Text('No image selected.') : Image.file(_image), ), floatingActionButton: FloatingActionButton( onPressed: getImage, tooltip: 'Pick Image', child: Icon(Icons.add_a_photo), ), ); }}Android系統回收處理

Android系統(儘管很少)有時會在image_picker完成後殺死程序。發生這種情況時,我們丟失了從image_picker中選擇的數據。retrieveLostData在這種情況下,您可以用來檢索丟失的數據。例如:

Future<void> retrieveLostData() async { final LostDataResponse response = await ImagePicker.retrieveLostData(); if (response == null) { return; } if (response.file != null) { setState(() { if (response.type == RetrieveType.video) { _handleVideo(response.file); } else { _handleImage(response.file); } }); } else { _handleError(response.exception); }}謝謝觀看技術剛剛好的文章,技術剛剛好是個人維護,每天至少更新一篇Flutter技術文章,實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術,那就跟我一起學習進步吧,你的贊,收藏,轉發是對我個人最大的支持,維護不易,歡迎關注。

相關焦點

  • 從新手到Flutter架構師,一篇就夠!最全開源項目
    該插件支持ios和android平臺,使用的是ios的風格的UI效果。)image_pickerpub.dev/packages/im…根據庫名就可以知道,image_picker是一個用於從Android和iOS圖像庫中選擇圖像的庫,支持使用相機拍攝新照片。
  • Flutter 二維碼掃描插件
    'dart:async';import 'package:flutter/services.dart';import 'package:flutter_plugin_qrcode/flutter_plugin_qrcode.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {
  • 如何在Android Studio安裝Dart和Flutter插件
    工具Android StudioDart插件Flutter插件3、打開Settings窗口,選擇Plugins打開Settings窗口,選擇Plugins4、輸入flutter,搜索結果並點擊Install,進行安裝輸入flutter,搜索結果並點擊Install5、點擊Install
  • Flutter插件用於在移動平臺中播放視頻支持iOS和Android建議收藏
    這篇文章介紹一下在Flutter當中播放視頻,我們用到了第三方到一個插件,目前flutter上面還沒有原生支持,可以在pub.dev上面找一些插件來解決。本百家號核心宗旨歡迎來到「技術剛剛好」百家號,本百家號是個人維護,每天至少更新一篇Flutter技術文章,實時為大家播報Flutter最新消息。
  • Flutter加載網頁之官方webview_flutter講解
    前言最近在用flutter開發一個App,其中需要加載網頁,本來以為很簡單的一件事,卻遇到了不少坑,最後整整搞了一上午。對於加載網頁這個功能來說,flutter並沒有組件,反而是第三方開發了一些組件,目前比較常用的有二種: flutter_webview_plugin webview_flutterflutter_webview_plugin是目前用得最火的一種,也是比較好用的,但是它有個致命的缺點,它不支持「進入某個URL之前攔截」,這也是我放棄它的原因。
  • 跨平臺Flutter接入WebView,Android和IOS兩大平臺解決方案建收藏
    WebView與JS互相調用是一個剛需,作為Android開發者,我們都知道在手機中內置了一款高性能 webkit 內核瀏覽器,在 SDK 中封裝為一個叫做 WebView 組件。本文核心要點Flutter 的 WebView 出現已經有一段時間了,在 Flutter 插件社區官網搜索 WebView 即可搜索到比較流行的插件,如下圖所示:WebView其中 webview_flutter是官方維護的 WebView 插件,特性是基於原生和 Flutter SDK 封裝,繼承 StatefulWidget,因此支持內嵌於
  • Flutter中嵌套Android布局
    ,這時候就需要開發者自定義插件,開發者可以參考本文中的方法去進行自定義。創建Android中的布局: <io.flutter.embedding.android.FlutterView android:id="@+id/flutter_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight
  • 介紹一款Flutter工具集插件
    FlutterFire是一套Flutter插件 ,可讓Flutter應用程式使用Firebase服務。您可以按照一個示例說明如何在Firebase for Flutter代碼實驗室中使用這些插件。Flutter是Google的UI工具包,可通過單個代碼庫為行動裝置,Web和桌面構建漂亮的,本機編譯的應用程式。
  • 最新版flutter和android原生交互,必須掌握
    我之前也寫過一篇文章,講解了flutter 與android的原生交互,那個flutter版本是1.9.x,最新穩定版是1.17.5。我們就拿這個版本來講解下flutter與android原生交互。我們看到有個io/flutter/plugins/GeneratedPluginRegistrant,如果有這個類那就用我下面的方法來實現與android原生的交互。
  • Flutter應用開發之第一步(踩坑記)
    首先,flutter doctor會認為android有問題,這個可以通過修改環境變量來解決,之前用的環境變量名是ANDROID_HOME,現在是ANDROID_SDK_ROOT。其次是cocopods問題,雖然檢測出問題,但是實際上毫無影響。然後就是plugin問題,檢測不到flutter插件和dart插件,但實際上是安裝了。
  • 2020年Flutter和 React Native如何選擇
    如果你想要開發一款App,那麼選用什麼技術一定是你首要考慮的問題。其次採用什麼語言也是需要考慮的。是使用Java,還是Kotlin。是使用object-c,還是採用Swift。是原生開發還是混生開發,這些問題都是我們在開發App之前需要深思熟慮的。
  • Flutter 下載和配置
    Flutter工具配置1、 Git我們需要下載Git直接去Git官網下載並配置地址:https://git-scm.com2、Android開發工具下載地址:https://developer.android.google.cn
  • Flutter1.22發布|支持 iOS14,推出更多新功能
    我們的季度穩定版本中囊括了最新功能、性能改進和問題修復,且適用於多樣的生產環境。由於本季度是新版行動作業系統的發布季,因此這一版本側重於確保 Flutter 能夠有效支持 Android 11 和 iOS 14。針對這兩種作業系統的更新涉及大量的底層工作,以符合最新版 SDK 的規範,並確保所有功能都能通過我們廣泛的測試套件中的測試。
  • 最佳陣容 | Flutter Firebase 插件更新
    為了全面提升 Flutter 質量,在最近的進展更新中,我們宣布 Dart、Flutter 和 Firebase 領域的資深諮詢公司 Invertase 將接手 FlutterFire 插件的大部分開發和維護。宣布後不久,Invertase 已經取得了巨大進展,包括新的 Core、Authentication 和 Firestore 插件。
  • 2020年Flutter和 React Native如何選擇
    如果你想要開發一款App,那麼選用什麼技術一定是你首要考慮的問題。其次採用什麼語言也是需要考慮的。是使用Java,還是Kotlin。是使用object-c,還是採用Swift。是原生開發還是混生開發,這些問題都是我們在開發App之前需要深思熟慮的。
  • 教你如何使用Flutter和原生App混合開發
    │ └── Runner.xcworkspace├── lib│ └── main.dart├── pubspec.lock├── pubspec.yaml└── test└── widget_test.dart  在flutter的模塊項目中包含有一個隱藏的.android和.ios目錄這個目錄下是可運行的Android
  • Flutter如何快速做好App的圖標適配
    接觸Flutter一年多的時間,作為一名之前只做H5前端開發的老司機,對類原生App開發還是挺有興趣的,一點小小的發現和提升都會驚喜,希望能和大家一起學習進步,提升自己的能力,做出更好更優秀的APP應用。今天跟大家一起來學習如何做好Flutter App應用圖標的適配。
  • flutter常見問題
    下面總結一些在使用flutter開發過程中遇到的一些問題。flutter能不能打包成html?flutter理論上是支持打包成html代碼,但是如果使用了不支持html的包,就不能打包成html。flutter獲取屏幕大小MediaQuery.of(context).size.width和MediaQuery.of(context).size.heightflutte選擇圖片功能image_piceker提供圖片視頻選擇功能和拍照拍視頻功能,multi_image_picker可以選擇多個圖片flutter提示功能
  • 在 Flutter 中使用 TFLite 插件實現文字分類
    tflite_flutter 插件的核心特性:插件提供了與 TFLite Java 和 Swift API 相似的 Dart API,所以其靈活性和在這些平臺上的效果是完全一樣的;插件通過 dart:ffi 直接與 TensorFlow Lite
  • Flutter框架的安裝與環境配置
    3.Dart 語法結合Java與JavaScript語法特點,幾乎沒有令人不適的怪異語法,使Java系程式設計師倍感親切,快速上手4.推薦使用Android Studio,flutter,dart,甚至flushia,是Google重新發力打造的新生態工具,所以無論是從編譯、打包,還是後續插件化升級,都有一定的優勢1.2.