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 版本 )
234 0
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
|
Dart API Android开发
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(二)
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(二)
310 0
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(二)
|
开发工具 Android开发 iOS开发
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(一)
【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )(一)
206 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 版本 )(二)
240 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 版本 )(一)
263 0
【Flutter】Flutter 拍照示例 ( Android 应用兼容 Android X | Gradle 版本号 | Gradle 插件版本号 | Android X 支持 | SDK 版本 )(一)
|
Dart 开发工具 开发者
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(二)
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(二)
220 0
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(二)
|
开发工具
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(一)
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(一)
264 0
【Flutter】Flutter 拍照示例 ( 创建应用 | 安装 image_picker 插件 )(一)
|
Android开发 iOS开发
在 Flutter App 中使用相机和图库/照片选取图像
在 Flutter App 中添加图像选取器 — 使用相机和图库/照片选取图像 图像选择器是我们经常需要的用户配置文件和其他内容的常见组件。我们将使用此插件。 步骤 1 — 将依赖项添加到pubspec.yaml文件。
590 0
|
3月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
2月前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
65 8