一个示例 Flutter 布局,它允许用户从他们设备的图库中选择图像或使用他们设备的相机拍照:
代码实现:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
class ImagePickerScreen extends StatefulWidget {
_ImagePickerScreenState createState() => _ImagePickerScreenState();
}
class _ImagePickerScreenState extends State<ImagePickerScreen> {
File _imageFile;
final _picker = ImagePicker();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Picker'),
),
body: Center(
child: _imageFile == null
? Text('No image selected')
: Image.file(_imageFile),
),
floatingActionButton: FloatingActionButton(
onPressed: _showImagePicker,
tooltip: 'Pick Image',
child: Icon(Icons.add_a_photo),
),
);
}
Future<void> _showImagePicker() async {
final imageSource = await showDialog<ImageSource>(
context: context,
builder: (context) => AlertDialog(
title: Text('Select Image Source'),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.pop(context, ImageSource.gallery),
child: Text('Gallery'),
),
FlatButton(
onPressed: () => Navigator.pop(context, ImageSource.camera),
child: Text('Camera'),
),
],
),
);
if (imageSource != null) {
final pickedFile = await _picker.getImage(source: imageSource);
setState(() {
_imageFile = File(pickedFile.path);
});
}
}
}
在此布局中,ImagePickerScreen 小部件显示一个默认显示“未选择图像”的文本小部件,但在选择图像时显示所选图像。 浮动操作按钮用于显示一个对话框,允许用户在画廊和相机之间选择作为图像源。
_picker 变量是 ImagePicker 类的实例,用于处理从用户选择的源中选择图像。 用户选择图像源后,_showImagePicker 函数会显示适当的源并使用 _picker 选择图像。 如果用户选择了有效图像,_imageFile 变量将设置为所选图像文件,并且更新小部件以显示所选图像。
我希望这个示例能为您在 Flutter 应用程序中实现图像选择器能为大家提供一个良好的起点!