📜  Flutter的图库访问

📅  最后修改于: 2021-09-02 05:45:51             🧑  作者: Mango

我们可以使用Flutter的image_picker包从图库中添加图像。为此,您需要使用真实设备。

按照以下步骤显示图库中的图像:

第 1 步:创建一个新的flutter应用程序:

flutter create 

第 2 步:现在,从 main 中删除代码。 dart文件以添加您自己的代码。

第 3 步:将依赖项添加到您的pubspec.yaml文件中:

公共规格

第 4 步:在下面的代码中使用 主要的。dart文件

主要的。dart

Dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
  
void main() {
  runApp(new MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new GalleryAccess(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class GalleryAccess extends StatefulWidget {
  @override
  State createState() {
    return new GalleryAccessState();
  }
}
  
class GalleryAccessState extends State {
  File galleryFile;
  
  @override
  Widget build(BuildContext context) {
    //display image selected from gallery
    imageSelectorGallery() async {
      galleryFile = await ImagePicker.pickImage(
        source: ImageSource.gallery,
        // maxHeight: 50.0,
        // maxWidth: 50.0,
      );
      setState(() {});
    }
  
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Gallery Access'),
        backgroundColor: Colors.green,
        actions: [
          Text("GFG",textScaleFactor: 3,)
        ],
      ),
      body: new Builder(
        builder: (BuildContext context) {
          return Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                new RaisedButton(
                  child: new Text('Select Image from Gallery'),
                  onPressed: imageSelectorGallery,
                ),
                SizedBox(
                  height: 200.0,
                  width: 300.0,
                  child: galleryFile == null
                      ? Center(child: new Text('Sorry nothing selected!!'))
                      : Center(child: new Image.file(galleryFile)),
                )
              ],
            ),
          );
        },
      ),
    );
  }
}


输出:

当没有选择图像时,将导致:

界面

按下按钮后,它将要求访问您设备上的照片、媒体和文件,如下所示:

当授予访问照片的权限并且从图库中选择任何图像时,它将显示在屏幕上,如下所示:

解释:

  • main.js中导入image_picker。dart文件。
  • 对于图库图片,我们有异步函数imageSelectorGallery()等待图库图片。
  • 加载后将显示图像。
想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!