在 Flutter App 中使用相机和图库/照片选取图像

简介: 在 Flutter App 中添加图像选取器 — 使用相机和图库/照片选取图像图像选择器是我们经常需要的用户配置文件和其他内容的常见组件。我们将使用此插件。步骤 1 — 将依赖项添加到pubspec.yaml文件。

在 Flutter App 中添加图像选取器 — 使用相机和图库/照片选取图像

图像选择器是我们经常需要的用户配置文件和其他内容的常见组件。我们将使用此插件

步骤 1 — 将依赖项添加到pubspec.yaml文件。

environment:
  sdk: ">=2.7.0 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.4
复制代码

步骤 2 - 配置本机平台

接下来,我们需要配置本机设置。对于Android平台,不需要任何东西。对于 iOS,打开在 ios/Runner 文件夹下找到的 Info.plist 文件,然后添加以下键。

<key>NSPhotoLibraryUsageDescription</key>
<string>Allow access to photo library</string>
<key>NSCameraUsageDescription</key>
<string>Allow access to camera to capture photos</string>
<key>NSMicrophoneUsageDescription</key>
<string>Allow access to microphone</string>
复制代码

步骤 3 — 图像选取器功能

在我们屏幕的 StatefulWidget 的 State 类中,声明一个 File 变量来保存用户选取的图像。

File _image;
复制代码

现在编写两个函数,分别通过相机和照片库选择图像。可选参数 imageQuality 接受 0 到 100 之间的任何值,你可以根据应用所需的大小和质量进行调整。获取图像文件后,我们将其保存到_image变量中并调用setState(),以便它可以显示在屏幕中。

_imgFromCamera() async {
  File image = await ImagePicker.pickImage(
    source: ImageSource.camera, imageQuality: 50
  );
  setState(() {
    _image = image;
  });
}
_imgFromGallery() async {
  File image = await  ImagePicker.pickImage(
      source: ImageSource.gallery, imageQuality: 50
  );
  setState(() {
    _image = image;
  });
}
复制代码

步骤4 - 创建用于选择相机/图库的选项选择器

接下来,编写一个用于显示底部工作表的函数,供用户选择相机或图库选项。

void _showPicker(context) {
  showModalBottomSheet(
      context: context,
      builder: (BuildContext bc) {
        return SafeArea(
          child: Container(
            child: new Wrap(
              children: <Widget>[
                new ListTile(
                    leading: new Icon(Icons.photo_library),
                    title: new Text('Photo Library'),
                    onTap: () {
                      _imgFromGallery();
                      Navigator.of(context).pop();
                    }),
                new ListTile(
                  leading: new Icon(Icons.photo_camera),
                  title: new Text('Camera'),
                  onTap: () {
                    _imgFromCamera();
                    Navigator.of(context).pop();
                  },
                ),
              ],
            ),
          ),
        );
      }
    );
}
复制代码

步骤 5 - 在屏幕上创建和配置图像视图

最后,让我们在屏幕上创建一个个人资料图片支架,该支架在单击时打开选择器,并显示所选图像。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: <Widget>[
        SizedBox(
          height: 32,
        ),
        Center(
          child: GestureDetector(
            onTap: () {
              _showPicker(context);
            },
            child: CircleAvatar(
              radius: 55,
              backgroundColor: Color(0xffFDCF09),
              child: _image != null
                  ? ClipRRect(
                      borderRadius: BorderRadius.circular(50),
                      child: Image.file(
                        _image,
                        width: 100,
                        height: 100,
                        fit: BoxFit.fitHeight,
                      ),
                    )
                  : Container(
                      decoration: BoxDecoration(
                          color: Colors.grey[200],
                          borderRadius: BorderRadius.circular(50)),
                      width: 100,
                      height: 100,
                      child: Icon(
                        Icons.camera_alt,
                        color: Colors.grey[800],
                      ),
                    ),
            ),
          ),
        )
      ],
    ),
  );
}
复制代码

全部完成,运行应用程序,

好的,今天的分享到这儿就和大家说再见了,感谢大家的阅读

\



相关文章
|
1月前
|
JSON Dart 安全
Flutter App混淆加固、保护与优化原理
Flutter App混淆加固、保护与优化原理
59 0
|
1月前
|
XML Java Android开发
Android Studio App开发之使用相机拍摄照片和从相册中选取图片(附源码 超详细必看)
Android Studio App开发之使用相机拍摄照片和从相册中选取图片(附源码 超详细必看)
291 0
|
1月前
|
XML 前端开发 Java
Android App开发图像加工中卡片视图CardView和给图像添加装饰的讲解以及实战(附源码 简单易懂)
Android App开发图像加工中卡片视图CardView和给图像添加装饰的讲解以及实战(附源码 简单易懂)
62 0
|
1月前
|
人工智能 自然语言处理 API
我用 Flutter Gemini 写了一个水贴 APP
本文通过 Flutter 插件 google_generative_ai 快速的集成了 google ai gemini 来实现一个水贴的工具。
我用 Flutter Gemini 写了一个水贴 APP
|
1月前
|
移动开发 小程序 API
【7月开发者日回顾】小程序回跳APP链路、相机组件等多个新能力计划公布!
【7月开发者日回顾】小程序回跳APP链路、相机组件等多个新能力计划公布!
41 2
|
1月前
|
存储 前端开发 Go
flutter+go构建的即时通讯app,ChatCraft
社交应用程序在世界各地都很流行,例如 Facebook、Line、Whatsapp。如果您渴望打造一款独具个性的社交平台,Chat-Craft项目将是您不可或缺的理想之选。Chat-Craft是一款跨平台移动应用,采用了Golang作为后端服务端技术,以及Flutter作为前端客户端技术。该应用旨在提供高效、稳定且跨平台的用户体验,将现代的移动应用开发技术和高性能的后端服务端技术相结合。在Chat-Craft项目中,作者精心雕琢了客户端UI,灵感汲取于各大即时通讯应用及最新的应用设计规范。
|
1月前
|
存储 容器
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
121 0
|
1月前
|
存储 编解码 Android开发
Flutter笔记:使用相机
Flutter笔记:使用相机
275 0
|
1月前
|
存储 Java 定位技术
【Android App】获取照片里的位置信息及使用全球卫星导航系统(GNSS)获取位置实战(附源码和演示 超详细)
【Android App】获取照片里的位置信息及使用全球卫星导航系统(GNSS)获取位置实战(附源码和演示 超详细)
191 0
|
1月前
|
XML Java Android开发
Android App开发之图像加工中给图像添加水波动态特效(附源码和演示视频 简单易懂)
Android App开发之图像加工中给图像添加水波动态特效(附源码和演示视频 简单易懂)
47 0