【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
生活随笔
收集整理的這篇文章主要介紹了
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、image_picker 使用
- 二、image_picker 使用示例
- 三、相關資源
一、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),),);} }參考上述示例代碼 , 編寫自己的相機拍照代碼 ;
二、image_picker 使用示例
在 一 章節中的源碼示例是針對 image_picker 0.7.2+1 版本的 Flutter 插件給出的 , 這里由于我的 Flutter SDK 版本很低 , 無法使用最新插件 , 使用的是 image_picker: ^0.5.2 版本的插件 , 代碼略有不同 ;
舊版本拍照 :
ImagePicker.pickImage(source: ImageSource.camera);新版本拍照 :
/// ImagePicker 引擎實例final picker = ImagePicker();/// 獲取圖像的核心方法 final pickedFile = await picker.getImage(source: ImageSource.camera);代碼示例 :
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;/// 獲取攝像頭圖像的方法Future getImage() async {/// 需要導入 image_picker.dart 包/// import 'package:image_picker/image_picker.dart';final pickedFile = await ImagePicker.pickImage(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(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/15792071 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )
總結
以上是生活随笔為你收集整理的【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【错误记录】Flutter / Andr
- 下一篇: 【错误记录】Flutter 报错 ( C