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

百度已收录   阅读次数: 184
2021-08-1120:56:28 发表评论
摘要

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

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

开篇寄语

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

前情提要

内容详情

以下内容是更改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>

如下图所示:

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

该依赖库在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会报错,不知何故。

生成效果如下图所示:

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: