当前位置:首页 » 《关注互联网》 » 正文

Flutter拍照与选择照片并且保存到本地_txaz6的博客

1 人参与  2021年08月22日 16:03  分类 : 《关注互联网》  评论

点击全文阅读


本文使用: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,用于保存。

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

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

我是阿T一个幽默的程序员 我们下期再见~

添加我为你的好友,领取源码以及Flutter学习资料~

在这里插入图片描述

加入我们吧,一起学习,一起进步~

在这里插入图片描述


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/25900.html

选择  图片  保存  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1