在 Flutter 移動應用程序中,如何選擇圖片並上傳
在 Flutter 移動應用程序中,你可以使用 `ImagePicker` 庫來選擇圖片並上傳。以下是一個示例:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
class ImageUploader extends StatefulWidget {
@override
_ImageUploaderState createState() => _ImageUploaderState();
}
class _ImageUploaderState extends State<ImageUploader> {
File _imageFile;
Future<void> pickImage() async {
final imageFile = await ImagePicker().getImage(source: ImageSource.gallery);
if (imageFile != null) {
setState(() {
_imageFile = File(imageFile.path);
});
}
}
Future<void> uploadImage() async {
// TODO: Implement image upload logic
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Uploader'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (_imageFile != null) ...[
Image.file(_imageFile),
SizedBox(height: 20),
ElevatedButton(
onPressed: uploadImage,
child: Text('Upload Image'),
),
] else ...[
Text('No image selected.'),
],
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: pickImage,
tooltip: 'Pick Image',
child: Icon(Icons.add_photo_alternate),
),
);
}
}
在上面的示例中,我們首先使用 `ImagePicker` 庫從圖庫中選擇了一個圖片。然後,我們使用 `File` 類將所選圖片存儲到 `_imageFile` 變量中,並在應用程序中顯示它。最後,我們添加了一個上傳按鈕,當用戶單擊時,它將觸發 `uploadImage` 函數,該函數是你需要實現的圖片上傳邏輯。
注意:請不要忘記在 `pubspec.yaml` 文件中添加 `image_picker` 庫的依賴。
留言
張貼留言