iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0
Mobile Development

畢業專題拯救計畫系列 第 13

Flutter中的Third-Party Libraries--三個photo Libraries

  • 分享至 

  • xImage
  •  

image_picker、image_gallery_saver 和 photo_view 是 Flutter 中常用的三個插件,通常一起使用來實現圖片處理的功能。這些插件可以幫助我們建立一個完整的圖片處理應用,從選擇圖片、保存圖片到查看圖片,都能輕鬆實現。

image_picker

image_picker 是一個從手機相冊選擇圖片或直接用相機拍照的插件。可以輕鬆加入到任何需要圖片上傳的應用中。

final ImagePicker _picker = ImagePicker();

// 從相冊中選取圖片
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);

// 使用相機拍照
final XFile? photo = await _picker.pickImage(source: ImageSource.camera);

// 獲取圖片的路徑
if (image != null) {
  String path = image.path;
}

photo_view

image_gallery_saver 是用來把圖片或影片保存到手機相冊的插件。當用戶創建了一張新圖片或者編輯了一張圖片時,可以用這個插件來將它保存到本地相冊。

import 'package:photo_view/photo_view.dart';

// 在一個圖片查看頁面中使用 PhotoView
PhotoView(
  imageProvider: AssetImage('assets/sample_image.png'),  // 本地圖片
  minScale: PhotoViewComputedScale.contained,
  maxScale: PhotoViewComputedScale.covered * 2,
);

image_gallery_saver

photo_view 是一個功能強大的圖片查看插件,可以支持縮放、拖動和旋轉等操作,就像手機內建的相簿一樣。

import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'dart:typed_data';

// 保存圖片到相冊
final result = await ImageGallerySaver.saveImage(Uint8List.fromList(imageBytes));

添加到 pubspec.yaml

要使用這三個插件,需要在 pubspec.yaml 文件中添加 dependencies:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.1.2  
  image_gallery_saver: ^2.0.3  
  photo_view: ^0.15.0  

三個組合起來使用的demo長這樣:
https://ithelp.ithome.com.tw/upload/images/20240830/20163322tEU9GQ7vV3.png

https://ithelp.ithome.com.tw/upload/images/20240830/20163322D4PBC2LFqO.png

https://ithelp.ithome.com.tw/upload/images/20240830/20163322Y8Kuz5fqsi.png
我們明天見~


上一篇
Flutter中的Third-Party Libraries-- table_calendar
下一篇
Flutter中的Third-Party Libraries--Fluttertoast
系列文
畢業專題拯救計畫22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言