提问人:Карим Бозжанов 提问时间:11/16/2023 更新时间:11/16/2023 访问量:52
如何在 flutter 中不使用 image_picker 或其他包的情况下从图库中获取图像
How to get images from gallery without using image_picker or other packages in flutter
问:
我需要从图库中获取所有图像,而无需在 flutter 中使用 image_picker 或其他包。
我尝试使用image_picker。但事实证明,它不能使用。收到图像后如何显示所选图像的预览?
答:
您可以查看后台的工作原理,并检查其本机实现以确定可以使用的本机方法。image_picker
请参阅此页面,了解如何在 Flutter 应用中运行原生代码(您也可以在不使用包的情况下运行): https://docs.flutter.dev/platform-integration/platform-channels
问题是,为什么你不能使用包?如果前者不起作用,它们应该很容易通过 pub.dev 甚至作为本地依赖项包含在您的中。pubspec.yaml
为了显示预览,我知道将文件复制到应用程序的临时目录(您可以与 path_provider一起使用),之后您可以在应用程序中显示为预览。image_picker
getTemporaryDirectory()
Image.file
是的,你可以做到。查看下面的代码段。
1.首先,您应该将可变 As 类型设为类型。File
File? _imageFile;
2.然后你应该做一个选择图像的方法,就像下面一样,
Future<void> _selectImageFromGallery() async {
final picker = ImagePicker();
final pickedImage = await picker.pickImage(source: ImageSource.gallery);
if (pickedImage != null) {
setState(() {
_imageFile = File(pickedImage.path);
});
}
}
3.现在您可以访问以下代码等图像。
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Select Image from Gallery'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_imageFile != null
? Image.file(
_imageFile!,
width: 200,
height: 200,
)
: Text('No image selected'),
SizedBox(height: 20),
ElevatedButton(
onPressed: _selectImageFromGallery,
child: Text('Select Image'),
),
],
),
),
);
}
完整代码部分
class UploadImage extends StatefulWidget {
const UploadImage({super.key});
@override
State<UploadImage> createState() => _UploadImageState();
}
class _UploadImageState extends State<UploadImage> {
File? _imageFile;
Future<void> _selectImageFromGallery() async {
final picker = ImagePicker();
final pickedImage = await picker.pickImage(source: ImageSource.gallery);
if (pickedImage != null) {
setState(() {
_imageFile = File(pickedImage.path);
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Select Image from Gallery'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_imageFile != null
? Image.file(
_imageFile!,
width: 200,
height: 200,
)
: Text('No image selected'),
SizedBox(height: 20),
ElevatedButton(
onPressed: _selectImageFromGallery,
child: Text('Select Image'),
),
],
),
),
);
}
}
**如果您想使用 filepicker 尝试以下步骤,
1.在使用此方法之前,您应该添加一些软件包,
file_picker: ^5.5.0
您可以使用此链接获取它
现在你可以像这样导入它了'package:file_picker/file_picker.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
class UploadImage extends StatefulWidget {
const UploadImage({super.key});
@override
State<UploadImage> createState() => _UploadImageState();
}
class _UploadImageState extends State<UploadImage> {
File? file;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Upload Image'),
),
body: SingleChildScrollView(
child: Center(
child: Column(
children: [
file != null
? Image.file(file!)
: Image.asset('assets/images/defult.png'),
TextButton(
onPressed: () {
pickFile();
},
child: const Text('Pick a file'),
),
],
),
),
),
);
}
pickFile() async {
FilePickerResult? result =
await FilePicker.platform.pickFiles(type: FileType.image);
if (result != null) {
setState(() {
file = File(result.files.single.path ?? "");
});
}
}
尝试这样,您现在可以解决您的问题。
您可以在 MediaStore 中查询图像文件。
如果您拥有READ_MEDIA_IMAGES权限,您将获得设备上的所有文件。
评论
tried using image_picker. But it turned out that it cannot be used.
嗯......我们不相信。请解释为什么不这样做。