Flutter如何实现从相册选取照片呢？使用这个依赖库帮你实现

摘要

flutter从相册启用照片，在不同的系统中需要开启不同的权限，同时只需要安装一个名为image_picker的依赖库，之后简单的几行代码，就可以实现这个功能了，而且不止是能够引用照片（多选），还能够引用视频，总之，这个依赖库在制作App中会很有用……

开篇寄语

flutter从相册启用照片，在不同的系统中需要开启不同的权限，同时只需要安装一个名为image_picker的依赖库，之后简单的几行代码，就可以实现这个功能了，而且不止是能够引用照片（多选），还能够引用视频，总之，这个依赖库在制作App中会很有用。

前情提要

• 《Flutter如何侦测运行的App是在哪个系统平台呢？非常简单实现》
• 《flutter制作App中如何放置Youtube视频，只需要使用这个依赖库》
• 《Flutter制作开屏画面（图片/文字/视频等）》

内容详情

以下内容是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

首先是安装image_picker这个依赖库，在terminal中输入以下命令：

flutter pub add image_picker

回车后就开始安装了，安装完成后，则需要开启iOS和Android的使用权限。

iOS文件夹中找到ios/Runner/Info.plist，添加以下代码：

<key>NSPhotoLibraryUsageDescription</key>
<string>Allow this app to access your photos</string>
<key>NSCameraUsageDescription</key>
<string>Allow access to camera to capture photos</string>
<key>NSMicrophoneUsageDescription</key>
<string>Allow access to microphone</string>

如下图所示：

该依赖库在0.81版本后，在Android4.3版本后就无需另外添加访问权限了。

做好以上准备后，就可以在main.dart文件放入以下代码了：

// ignore_for_file: prefer_const_constructors, prefer_typing_uninitialized_variables

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GalleryAccess(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class GalleryAccess extends StatefulWidget {
  const GalleryAccess({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return GalleryAccessState();
  }
}

class GalleryAccessState extends State<GalleryAccess> {
  var galleryFile;

  @override
  Widget build(BuildContext context) {
    //display image selected from gallery
    final picker = ImagePicker();
    // Implementing the image picker
    Future<void> _openImagePicker() async {
      final pickedImage = await picker.pickImage(
        source: ImageSource.gallery,
      );
      if (pickedImage != null) {
        setState(() {
          if (kIsWeb) {
            galleryFile = pickedImage.path.toString();
          } else {
            galleryFile = File(pickedImage.path);
          }
        });
      }
      setState(() {});
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Gallery Access'),
        backgroundColor: Colors.green,
      ),
      body: Builder(
        builder: (BuildContext context) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  child: Text('Select Image from Gallery'),
                  onPressed: _openImagePicker,
                ),
                SizedBox(
                  height: 200.0,
                  width: 300.0,
                  child: galleryFile == null
                      ? Center(child: Text('Sorry nothing selected!!'))
                      : Center(
                          child: kIsWeb
                              ? Image.network(galleryFile)
                              : Image.file(galleryFile),
                        ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

因为该依赖库到目前为止仅支持iOS，Android和Web，从网页端想要从本地路径引用图片，在这里添加了一个逻辑判断，判断是否运行的平台是网页版，如果是的话，则使用Image.network，如果不是的话则是Image.file，因为在网页版引用Image.file会报错，不知何故。

生成效果如下图所示：

• 

•