Flutter（六十二）打开相册相机image_picker

官方提供的插件：image_picker https://pub.dev/packages/image_picker

安装

• pubspec.yaml 中添加：image_picker: ^0.6.7+4，或官网查看最新版

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  dio: ^3.0.9
  shared_preferences: ^0.5.8
  image_picker: ^0.6.7+4

• 安卓添加权限AndroidManifest.xml中

   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.CAMERA" />

示例代码

关键代码

import 'package:image_picker/image_picker.dart';
// 创建picker
final picker = ImagePicker();
// 调用方法  打开相册  相机
Future getImage() async {
    PickedFile pickedFile = await picker.getImage(source: ImageSource.gallery);// 相册
//    PickedFile pickedFile = await picker.getImage(source: ImageSource.camera);  // 相机
    if(pickedFile!=null){
      setState(() {
        path = pickedFile.path;// 选择的图片或照片的路径
      });
    }
// 显示图片
Image.file(
      File(path),
      width: 50,
      height: 50,
      fit: BoxFit.fitWidth,
    );

封装了一个组件

import 'dart:io';

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


class ImagePickerWidget extends StatefulWidget {
  @override
  _ImagePickerWidgetState createState() => _ImagePickerWidgetState();
}

class _ImagePickerWidgetState extends State<ImagePickerWidget> {

  final String typeAdd = "typeAdd";
  final String typeImage = "typeImage";
  double imageSize = 50;
  int max = 3;
  List<ImageItem> list = [];
  final picker = ImagePicker();

  Future getImage() async {
    PickedFile pickedFile = await picker.getImage(source: ImageSource.gallery);// 相册
//    PickedFile pickedFile = await picker.getImage(source: ImageSource.camera);  // 相机
    if(pickedFile!=null){
      setState(() {
        list.insert(0, ImageItem(typeImage, pickedFile.path));
      });
    }

  }
  @override
  void initState() {
    super.initState();
    list.add(ImageItem(typeAdd, ""));
  }

  Widget renderItem(BuildContext context, int index) {
    ImageItem item = list[index];
    if (item.type == typeAdd) {
      return GestureDetector(
        child: Image.asset(
          "images/icon_add_picture.png",
          width: imageSize,
          height: imageSize,
          fit: BoxFit.fill,
        ),
        onTap: getImage,
      );
    }
    return Image.file(
      File(item.path),
      width: imageSize,
      height: imageSize,
      fit: BoxFit.fitWidth,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 110*max/3,
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.symmetric(vertical: 10,horizontal: 16),
      color: Colors.white,
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 100,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 1),
        itemBuilder: (BuildContext context, int index) {
          return renderItem(context, index);
        },
        itemCount: list.length,
      ),
    );
  }
}

class ImageItem {
  String type;
  String path;

  ImageItem(this.type, this.path);
}