Flutter拍照与选择照片并且保存到本地

简介: 本文使用:image_picker插件该插件已支持Android与IOS需要适配web的同学可以使用:image_picker_web(可以完成开发中的大部分需求,但有部分机型会出现调用相机时闪退问题)

本文使用:image_picker插件

该插件已支持Android与IOS

需要适配web的同学可以使用:image_picker_web

(可以完成开发中的大部分需求,但有部分机型会出现调用相机时闪退问题)

话不多说先上效果图:

拍照:

请添加图片描述

相册:
请添加图片描述

核心代码:

final picker = ImagePicker(); //初始化
///存放的图片
File _imgPath;

Future getImage(bool isTakePhoto) async {
  try {
    var pickedFile = await picker.getImage(
        source: isTakePhoto ? ImageSource.camera : ImageSource.gallery);
    if (pickedFile != null) {
      setState(() {
        _imgPath = File(pickedFile.path);
      });
    } else {
      print('没有选择任何图片');
    }
  } catch (e) {
    print("该手机不支持相机");
  }
}

具体代码:

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class ImageTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ImageState();
}

class ImageState extends State<ImageTest> {
  final picker = ImagePicker();
  File _imgPath;

  Future getImage(bool isTakePhoto) async {
    try {
      var pickedFile = await picker.getImage(
          source: isTakePhoto ? ImageSource.camera : ImageSource.gallery);
      if (pickedFile != null) {
        setState(() {
          _imgPath = File(pickedFile.path);
        });
      } else {
        print('没有选择任何图片');
      }
    } catch (e) {
      print("该手机不支持相机");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          MaterialButton(
              minWidth: 100,
              height: 100,
              color: Colors.blue,
              onPressed: () {
                getImage(true);
              },
              child: Text(
                "拍照",
                style: TextStyle(fontSize: 32, color: Colors.white),
              )),
          SizedBox(
            height: 30,
          ),
          MaterialButton(
              minWidth: 100,
              height: 100,
              color: Colors.blue,
              onPressed: () {
                getImage(false);
              },
              child: Text("选择照片",
                  style: TextStyle(fontSize: 32, color: Colors.white))),
          _imgPath != null
              ? Image.file(
                  _imgPath,
                  fit: BoxFit.cover,
                )
              : Center(
                  child: Text(
                  "没有选择照片",
                  style: TextStyle(fontSize: 32, color: Colors.black)s,
                ))
        ],
      ),
    );
  }
}

注意:此处保存的图片存放在缓存中,如果需要保存到本地则需使用image_gallery_saver,用于保存。

本章中,若各位同学有遇到机型不兼容问题,可以私信博主,建议真机调试哦~

欢迎留言纠正 ~ 不妨给个点赞哈哈

相关文章
|
Dart 开发工具 开发者
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
218 0
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
|
Dart API Android开发
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(二)
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(二)
302 0
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(二)
|
开发工具 Android开发 iOS开发
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(一)
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(一)
192 0
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(一)
|
开发工具 Android开发
【Flutter】Flutter 拍照示例 ( Android 应用兼容 Android X | Gradle 版本号 | Gradle 插件版本号 | Android X 支持 | SDK 版本 )(二)
【Flutter】Flutter 拍照示例 ( Android 应用兼容 Android X | Gradle 版本号 | Gradle 插件版本号 | Android X 支持 | SDK 版本 )(二)
229 0
【Flutter】Flutter 拍照示例 ( Android 应用兼容 Android X | Gradle 版本号 | Gradle 插件版本号 | Android X 支持 | SDK 版本 )(二)
|
API 开发工具 Android开发
【Flutter】Flutter 拍照示例 ( Android 应用兼容 Android X | Gradle 版本号 | Gradle 插件版本号 | Android X 支持 | SDK 版本 )(一)
【Flutter】Flutter 拍照示例 ( Android 应用兼容 Android X | Gradle 版本号 | Gradle 插件版本号 | Android X 支持 | SDK 版本 )(一)
255 0
【Flutter】Flutter 拍照示例 ( Android 应用兼容 Android X | Gradle 版本号 | Gradle 插件版本号 | Android X 支持 | SDK 版本 )(一)
|
Dart 开发工具 开发者
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(二)
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(二)
213 0
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(二)
|
开发工具
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(一)
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(一)
255 0
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(一)
|
Android开发 iOS开发
在 Flutter App 中使用相机和图库/照片选取图像
在 Flutter App 中添加图像选取器 — 使用相机和图库/照片选取图像 图像选择器是我们经常需要的用户配置文件和其他内容的常见组件。我们将使用此插件。 步骤 1 — 将依赖项添加到pubspec.yaml文件。
574 0
|
1月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
22天前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
59 3