Flutter 相册选择图片和相机拍照

Flutter 获取相册中的图片和用相机拍照

  在原生开发中,拍照及从图库选择图片是非常常见的需求,而且原生的图片选择第三方库也有很多并且很完善了。Flutter 也给我们提供了好用的图片选择插件,iOS 和 Android 都可以使用!

使用方法

  首先添加依赖:
Flutter 相册选择图片和相机拍照_第1张图片
  在 pubspec.yaml 加入 image_picker 的依赖,然后 ctrl + s 保存即可。在 Flutter 三方库找最新。

使用

  依赖添加完成之后我们就可以正常使用了,首先要导包:

import 'package:image_picker/image_picker.dart';

  我们先来看看 ImagePicker 提供的方法,目前有两个,选图片和选视频。其中选择图片可以通过图库和相机的方式获得。

拍照

 var image = await ImagePicker.pickImage(source: ImageSource.camera);

相册

 var image = await ImagePicker.pickImage(source: ImageSource.gallery);

  是不是超级简单,我们权限申请都不需要管。

  下面是完整代码:

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

class ImagePickerWidget extends StatefulWidget {
  @override
  State createState() {
    return _ImagePickerState();
  }
}

class _ImagePickerState extends State {
  var _imgPath;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ImagePicker"),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              _ImageView(_imgPath),
              RaisedButton(
                onPressed: _takePhoto,
                child: Text("拍照"),
              ),
              RaisedButton(
                onPressed: _openGallery,
                child: Text("选择照片"),
              ),
            ],
          ),
        ));
  }

  /*图片控件*/
  Widget _ImageView(imgPath) {
    if (imgPath == null) {
      return Center(
        child: Text("请选择图片或拍照"),
      );
    } else {
      return Image.file(
        imgPath,
      );
    }
  }

  
  /*拍照*/
  _takePhoto() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _imgPath = image;
    });
  }

  /*相册*/
  _openGallery() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _imgPath = image;
    });
  }
}

你可能感兴趣的:(Flutter学习实践指南)