Gallery Access in Flutter

30 Aug, 2020
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.
android
Flutter
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - Asset Image
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Stack Widget
Flutter - Search Bar