Gallery Access in Flutter

We can add images from the gallery using the image_picker package in Flutter. For this, you’ll need to use your real device.

Follow the below steps to display the images from the gallery:

Step 1:  Create a new flutter application:

flutter create <YOUR_APP_NAME>

Step 2: Now, delete the code from the main.dart file to add your own code.

Step 3: Add the dependency to your pubspec.yaml file:

Step 4: Use the below code in the main.dart file :

main.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<StatefulWidget> createState() {
    return new GalleryAccessState();
  }
}

class GalleryAccessState extends State<GalleryAccess> {
  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: <Widget>[
          Text("GFG",textScaleFactor: 3,)
        ],
      ),
      body: new Builder(
        builder: (BuildContext context) {
          return Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                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)),
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

Output:

When no image is selected, it will result:

When the button is pressed, it will ask for accessing photos, media, and files on your device as shown below:

When the permission is given to access photos and any image is selected from the gallery, it will be displayed on the screen as shown below:

Explanation:

• import image_picker package in main.dart file.
• for a gallery image, we have async function imageSelectorGallery() and await for gallery image.
• the image will be displayed after loaded.