文章目錄

• 一、image_picker 使用
• 二、更新 Flutter SDK
• 三、image_picker 使用示例
• 四、相關資源

之前在 【Flutter】Flutter 拍照示例 ( 拍照并獲取照片源碼示例 | image_picker: ^0.5.2 版本 ) 博客中 , 使用 image_picker: ^0.5.2 版本開發拍照功能 , 出現各種問題 ;

現在更新成最新版本 image_picker 0.7.2+1 ;

注意 : 使用最新版本的 Flutter 插件 , 對應的 Flutter SDK 的版本也要更新到最新 ;

一、image_picker 使用

---

在 image_picker 插件主頁 有關于該 Flutter 插件如何使用的代碼示例 ;

/// 需要導入的相關庫 import 'dart:io';import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);} }class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {/// 圖像文件對象File _image;/// ImagePicker 引擎實例final picker = ImagePicker();Future getImage() async {// 獲取圖像的核心方法 final pickedFile = await picker.getImage(source: ImageSource.camera);setState(() {if (pickedFile != null) {_image = File(pickedFile.path);} else {print('No image selected.');}});}@overrideWidget 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),),);} }

參考上述示例代碼 , 編寫自己的相機拍照代碼 ;

二、更新 Flutter SDK

---

到 https://flutter.dev/docs/development/tools/sdk/releases 頁面下載最新的 Flutter SDK ;

下載完畢后 , 解壓 , 放到一個目錄中即可 ;

菜單欄 / File / Settings 對話框中設置最新的額 Flutter SDK 路徑 ;

三、image_picker 使用示例

---

在 pubspec.yaml 配置文件中 , 添加 image_picker 最新的依賴版本 ;

dependencies:image_picker: ^0.7.2+1

代碼示例 :

import 'dart:io';import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: '拍照示例'),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}/// 需要導入 dart:io 庫/// import 'dart:io';File _image;final picker = ImagePicker();/// 獲取攝像頭圖像的方法Future getImage() async {/// 需要導入 image_picker.dart 包/// import 'package:image_picker/image_picker.dart';final pickedFile = await picker.getImage(source: ImageSource.gallery);print("pickedFile : ${pickedFile.path}");setState(() {if (pickedFile != null) {_image = File(pickedFile.path);print("_image : ${_image}");} else {print('No image selected.');}});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),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),),);} }

運行效果 :

四、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_photo ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15847112 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker 0.7.2+1 | Flutter 最新 SDK 安装 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。