编辑
2025-01-01
前端
00
请注意,本文编写于 128 天前,最后修改于 128 天前,其中某些信息可能已经过时。

目录

1. 添加依赖
2. 配置平台相关设置
Android
iOS
3. 使用 image_picker 选择图片

image_picker 是 Flutter 中一个非常常用的插件,用于从设备的相册或相机中选择图片或视频。以下是如何在 Flutter 项目中使用 image_picker 的详细步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 image_picker 插件的依赖。

yaml
dependencies: flutter: sdk: flutter image_picker: ^0.8.5+3 # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 配置平台相关设置

Android

android/app/src/main/AndroidManifest.xml 文件中添加以下权限:

xml
<uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

iOS

ios/Runner/Info.plist 文件中添加以下键值对:

xml
<key>NSCameraUsageDescription</key> <string>我们需要访问您的相机以拍摄照片。</string> <key>NSPhotoLibraryUsageDescription</key> <string>我们需要访问您的相册以选择照片。</string>

3. 使用 image_picker 选择图片

以下是一个简单的示例,展示如何使用 image_picker 从相册中选择图片或使用相机拍摄照片。

flutter
import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; import 'dart:io'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: ImagePickerExample(), ); } } class ImagePickerExample extends StatefulWidget { @override _ImagePickerExampleState createState() => _ImagePickerExampleState(); } class _ImagePickerExampleState extends State<ImagePickerExample> { File? _image; Future<void> _pickImage(ImageSource source) async { final picker = ImagePicker(); final pickedFile = await picker.pickImage(source: source); if (pickedFile != null) { setState(() { _image = File(pickedFile.path); }); } } @override Widget 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: Column( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ FloatingActionButton( onPressed: () => _pickImage(ImageSource.camera), tooltip: 'Take Photo', child: Icon(Icons.camera), ), SizedBox(height: 10), FloatingActionButton( onPressed: () => _pickImage(ImageSource.gallery), tooltip: 'Pick from Gallery', child: Icon(Icons.photo_library), ), ], ), ); } }

image.png

中间遇到过和gradle版本不对应情况,升级到最新的8.12然后就行,运行的时候发现

Error picking image: MissingPluginException(No implementation found for method pickImage on channel plugins.flutter.io/image_picker)

只要执行一次flutter clean就好

本文作者:yowayimono

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!