在 Flutter 中构建图像选择器【Flutter 专题 9】

作者：坚果前端

2021 年 11 月 27 日
本文字数：5603 字
阅读完需：约 18 分钟

图片选择器是任何应用程序中使用最广泛的组件之一。许多流行的应用程序，例如微信、咸鱼、小红书等，都有一个图片选择器，使用户可以从他们的设备中选择文件作为个人资料图片或与他们的朋友分享。

移动应用程序中图片选择器的最常见用例是为用户配置文件设置头像。在本教程中，我将向您展示如何在 Flutter 中创建图片选择器。我们将构建一个示例 Flutter 应用程序，使用户能够从图库中选择照片或从设备的相机拍摄照片。

以下是我们将介绍的内容：

什么是 Flutter 中的 image_picker？
构建 Flutter 图片选择器应用程序
添加 image_picker 插件
创建小部件
测试我们的 Flutter 图片选择器应用

什么是 Flutter 中的`image_picker`？

在 Flutter 中从头开始编写图片选择器小部件会很乏味。Flutter 带有一个图片选择器插件，用于从设备图库中选择图片或从相机拍摄新照片。

该image_picker插件从ImagePicker它导出的类中公开了一些有用的方法：

import 'package:image_picker/image_picker.dart';
ImagePicker picker = ImagePicker();

复制代码

该picker实例具有我们将调用以打开图片选择对话框的公共方法。让我们来看看这些方法。

`pickImage`

XFile? image = await picker.pickImage(source: ImageSource.gallery);

复制代码

该pickImage方法打开选择对话框并显示手机的图库，从中选择图片。该sourceARG 指出该图片是从相册选择。

此处，source设置为ImageSource.gallery，因此图片是从用户的图库中选择的。

XFile? image = await picker.pickImage(source: ImageSource.camera);

复制代码

在上面的示例中，图片取自设备相机。此方法打开相机并选取用户拍摄的图片。该source: ImageSource.cameraarg 是什么打开设备上的照相机。

`pickVideo`

XFile? image = await picker.pickVideo(source: ImageSource.gallery);

复制代码

此方法会打开一个选择对话框以从手机图库中选择视频。pickVideo 当您希望从图库或手机的摄像机中选取视频时，可以使用 argsource: ImageSource.gallery 方法。从手机的图库中选择视频。

XFile? photo = await picker.pickVideo(source: ImageSource.camera);

复制代码

此方法允许用户从相机中选取视频。argsource: ImageSource.camera打开手机的摄像机，以便用户可以录制视频。然后将录制的视频用作选取的视频。

`pickMultiImage`

List<XFile>? images = await picker.pickMultiImage(source: ImageSource.gallery);

复制代码

pickMultiImage使用户可以选择多个图片。argsource: ImageSource.gallery允许我们从手机图库中选择图片。

List<XFile>? photos = await picker.pickMultiImage(source: ImageSource.camera);

复制代码

构建 Flutter 图片选择器应用程序

现在我们已经回顾了image_picker插件中的方法，让我们构建一个示例 Flutter 图片选择器应用程序，看看它们在实践中是如何工作的。

在我们开始之前，请确保您的机器中已经安装了以下工具和二进制文件。

Flutter SDK：我们将使用它来编译、创建和运行我们的 Flutter 项目。它有一个 CLI 工具，flutter使我们能够从终端执行这些操作
VS Code：这是可选的，但非常适合编写 Flutter 项目。VS Code 有很棒的插件来增强你的 Flutter 编码体验
Android Studio：这个二进制文件是一个用于构建和编译原生 Android 项目的 IDE。我们还可以使用 Android Studio 创建、编译和运行 Flutter 项目。但大多数情况下，我们需要 Android Studio 来运行模拟器并从 VS Code 编译我们的 Flutter 项目

搭建 Flutter 项目的脚手架

现在我们已经完成了必要的工具和二进制文件的安装，是时候构建我们的 Flutter 图片选择器示例应用程序了。

首先，让我们搭建一个 Flutter 项目：

flutter create imagepickerprj

复制代码

这将在名为imagepickerprj. 一系列命令将级联我们的终端。在终端的末尾，您将看到运行新生成项目的说明：

In order to run your application, type:
  $ cd imagepickerprj  $ flutter run
To enable null safety, type:
  $ cd imagepickerprj  $ dart migrate --apply-changes
Your application code is in imagepickerprj/lib/main.dart.

复制代码

我们现在不会运行它，但让我们进入到文件夹中：

cd imagepickerprj

复制代码

添加`image_picker`插件

下一步是将image_picker插件添加到我们的 Flutter 项目中。

打开pubspec.yaml文件并将其添加image_picker到该dependencies部分：

dependencies:  flutter:    sdk: flutter  image_picker: ^0.8.2

复制代码

如果您使用的是 VS Code，它会在image_picker您保存pubspec.yaml文件后自动拉入。如果您不使用 VS Code，请运行以下命令以获取最新添加的依赖项：

flutter pub get

复制代码

创建小部件

在我们的imagepickerprj项目中，我们的主文件位于lib/文件夹中。这是main.dart文件，它是任何 Flutter 项目/应用程序的入口点。这就是我们将开始添加大部分代码的地方。

Flutter 已经为我们设置了一些代码，但除了MyApp小部件之外我们不需要它。让我们从那里开始：

void main() {  runApp(MyApp());}
class MyApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: HomePage(),    );  }}

复制代码

我们的 Flutter 图片选择器应用程序将有两个屏幕：

HomePage将列出两个按钮：Pick Image from Gallery, 和Pick Image from Camera。该Pick Image from Gallery会打开一个ImageFromGalleryEx屏幕，我们可以从我们的图库中选择一个图片，同时Pick Image from Camera会打开一个ImageFromGalleryEx屏幕，我们可以从我们的相机拍摄照片，并使用图片作为摄取的图片
ImageFromGalleryEx将处理从相册和相机中挑选图片。它将根据发送给它的源类型知道要处理什么。它还将显示选择的图片

现在让我们对它们进行编码。

`HomePage`

enum ImageSourceType { gallery, camera }
class HomePage extends StatelessWidget {  void _handleURLButtonPress(BuildContext context, var type) {    Navigator.push(context,        MaterialPageRoute(builder: (context) => ImageFromGalleryEx(type)));  }
  @override  Widget build(BuildContext context) {    return Scaffold(        appBar: AppBar(          title: Text("Image Picker 示例"),        ),        body: Center(          child: Column(            children: [              MaterialButton(                color: Colors.blue,                child: Text(                  "Pick Image from 相册",                  style: TextStyle(                      color: Colors.white70, fontWeight: FontWeight.bold),                ),                onPressed: () {                  _handleURLButtonPress(context, ImageSourceType.gallery);                },              ),              MaterialButton(                color: Colors.blue,                child: Text(                  "Pick Image from 相机",                  style: TextStyle(                      color: Colors.white70, fontWeight: FontWeight.bold),                ),                onPressed: () {                  _handleURLButtonPress(context, ImageSourceType.camera);                },              ),            ],          ),        ));  }}

复制代码

我们有一个枚举，ImageSourceType，用于保存图片源类型、gallery,和相机。在HomePage小部件中，我们有一个方法，_handleURLButtonPress。此方法使用 arg type，它带有的任何值ImageSourceType。它会打开ImageFromGalleryEx小部件，将图片源类型传递给小部件类。

在该build方法中，我们看到它渲染了两个按钮，正如我们之前所说的：Pick Image from Gallery、和Pick Image from Camera。每个按钮上都onPressed设置了一个事件。_handleURLButtonPress当按钮被按下时，事件调用该方法。

该Pick Image from Gallery按钮将传递ImageSourceType.gallery给ImageFromGalleryEx小部件，告诉它我们将从图库中选择一个图片。该Pick Image from Camera按钮将传递ImageSourceType.camera给ImageFromGalleryEx小部件，告诉它打开手机的相机并将拍摄的照片作为所选图片。

现在，让我们对ImageFromGalleryEx小部件进行编码。

`ImageFromGalleryEx`

class ImageFromGalleryEx extends StatefulWidget {  final type;  ImageFromGalleryEx(this.type);
  @override  ImageFromGalleryExState createState() => ImageFromGalleryExState(this.type);}
class ImageFromGalleryExState extends State<ImageFromGalleryEx> {  var _image;  var imagePicker;  var type;
  ImageFromGalleryExState(this.type);
  @override  void initState() {    // ignore: todo    // TODO: implement initState    super.initState();    imagePicker = new ImagePicker();  }
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(          title: Text(type == ImageSourceType.camera              ? "Image from 相机"              : "Image from 相册")),      body: Column(        children: <Widget>[          SizedBox(            height: 52,          ),          Center(            child: GestureDetector(              onTap: () async {                var source = type == ImageSourceType.camera                    ? ImageSource.camera                    : ImageSource.gallery;                XFile image = await imagePicker.pickImage(                    source: source,                    imageQuality: 50,                    preferredCameraDevice: CameraDevice.front);                setState(() {                  _image = File(image.path);                });              },              child: Container(                width: 200,                height: 200,                decoration: BoxDecoration(color: Colors.red[200]),                child: _image != null                    ? Image.file(                        _image,                        width: 200.0,                        height: 200.0,                        fit: BoxFit.fitHeight,                      )                    : Container(                        decoration: BoxDecoration(color: Colors.red[200]),                        width: 200,                        height: 200,                        child: Icon(                          Icons.camera_alt,                          color: Colors.grey[800],                        ),                      ),              ),            ),          )        ],      ),    );  }}

复制代码

在这里，我们有一个有状态的小部件ImageFromGalleryEx，，和ImageFromGalleryExState，它保存ImageFromGalleryEx小部件的状态。

在ImageFromGalleryExState小部件内部，我们有以下变量：

_image 保存选择的图片，无论是从相册还是从相机
imagePicker持有ImagePicker类的实例
type保存小部件要使用的图片源的类型。它从小HomePage部件传递给小部件

我们还有一个initState方法，它首先插入到小部件树中。我们使用这个方法来初始化和创建ImagePicker类的实例，然后将它分配给imagePicker变量。

build方法内部是Container小部件，它是小部件的子Center部件。我们Image.file根据_image变量的条件渲染。如果_image不是 null 或 undefined，那么我们知道它有一个图片，然后我们Image.file通过将_image变量传递给它来渲染小部件。

这Image.file是一个小部件，用于从设备的本地存储渲染图片。如果_image变量中没有任何内容，我们将渲染Container小部件。这将Container显示一个相机图标。

该GestureDetector是所有这些部件的父级。它的onTap注册了一个事件。当点击其中的小部件时会触发此事件GestureDetector。该onTap处理程序将调用pickImage从方法imagePicker的实例。它从type变量中推断出图片的来源并将其传递给pickImage方法。然后通过图片质量 ( imageQuality: 50)，最后通过首选相机设备preferredCameraDevice: CameraDevice.front。这导致它选择我们手机的前置摄像头。

现在，pickImage返回一个XFile实例。我们引用返回image.path的XFile实例image并将其传递给以File从中创建File实例。这个XFile实例是我们_image通过以下方式设置的状态：

setState(() {    _image = File(image.path);});

复制代码

这将导致ImageFromGalleryExState重新渲染并且Image.file将在_image变量中显示图片。

现在我们已经完成了代码，让我们测试运行我们的应用程序。

测试我们的 Flutter 图片选择器应用

打开您的 Android 模拟器，并从您的终端运行以下命令：

flutter run

复制代码

这将编译并构建项目，然后在您的 Android 模拟器中运行该应用程序。

如果您使用的是 VS Code，则可以运行上述命令，或者只需lib/main.dart在编辑器中右键单击，然后单击run Without Debugging或Start Debugging。

该应用程序将在您的 Android 模拟器中打开。

结论

我们在本教程中学到了很多东西。我们首先介绍 Flutter 图像选择器组件的常见用例。然后，我们介绍了image_pickerFlutter 的插件。我们演练了如何初始化插件的ImagePicker类image_picker并回顾了ImagePicker类中的方法。

最后，我们构建了一个 Flutter 项目来演示如何image_picker在实际场景中使用该插件。

在GitHub 上查找此项目的源代码。

发布于: 12 小时前阅读数: 6

原文链接:【http://xie.infoq.cn/article/9ce345114b7fee4f8e187a134】。

坚果前端

关注

此间若无火炬，我便是唯一的光 2020.10.25 加入

公众号：“坚果前端”，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

发布

暂无评论

创作场景

在 Flutter 中构建图像选择器【Flutter 专题 9】

什么是 Flutter 中的image_picker？

pickImage

pickVideo

pickMultiImage

构建 Flutter 图片选择器应用程序

搭建 Flutter 项目的脚手架

添加image_picker插件

创建小部件

HomePage

ImageFromGalleryEx

测试我们的 Flutter 图片选择器应用

结论

坚果前端

评论

什么是 Flutter 中的`image_picker`？

`pickImage`

`pickVideo`

`pickMultiImage`

添加`image_picker`插件

`HomePage`

`ImageFromGalleryEx`