Flutter Tutorial – Select an image from Gallery and show in Imageview

By | January 12, 2019
9 Comments

For selecting an image from the Gallery or Camera roll in Flutter, we need to include a library in pubspec.yaml file under the dependencies that is present in the root of your project.

Demo Video

 

Video Player

 

Watch Video Tutorial

 

dependencies:
  flutter:
    sdk: flutter
....
 
  image_picker: ^0.4.10
.....

 
Usage

 
To open the gallery
 

Future<File> imageFile;
 
 //Open gallery
  pickImageFromGallery(ImageSource source) {
    setState(() {
      imageFile = ImagePicker.pickImage(source: source);
    });
  }
....

 
Show Image in the UI
 

Once the user selects the image, show it in the UI.

The below method will update UI, once the user selects the image.

Widget showImage() {
    return FutureBuilder<File>(
      future: imageFile,
      builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            snapshot.data != null) {
          return Image.file(
            snapshot.data,
            width: 300,
            height: 300,
          );
        } else if (snapshot.error != null) {
          return const Text(
            'Error Picking Image',
            textAlign: TextAlign.center,
          );
        } else {
          return const Text(
            'No Image Selected',
            textAlign: TextAlign.center,
          );
        }
      },
    );
  }

 

Complete Example

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
 
class PickImageDemo extends StatefulWidget {
  PickImageDemo() : super();
 
  final String title = "Flutter Pick Image demo";
 
  @override
  _PickImageDemoState createState() => _PickImageDemoState();
}
 
class _PickImageDemoState extends State<PickImageDemo> {
  Future<File> imageFile;
 
  pickImageFromGallery(ImageSource source) {
    setState(() {
      imageFile = ImagePicker.pickImage(source: source);
    });
  }
 
  Widget showImage() {
    return FutureBuilder<File>(
      future: imageFile,
      builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            snapshot.data != null) {
          return Image.file(
            snapshot.data,
            width: 300,
            height: 300,
          );
        } else if (snapshot.error != null) {
          return const Text(
            'Error Picking Image',
            textAlign: TextAlign.center,
          );
        } else {
          return const Text(
            'No Image Selected',
            textAlign: TextAlign.center,
          );
        }
      },
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            showImage(),
            RaisedButton(
              child: Text("Select Image from Gallery"),
              onPressed: () {
                pickImageFromGallery(ImageSource.gallery);
              },
            ),
          ],
        ),
      ),
    );
  }
}

 
Thats it.

Please leave your valuable comments below.

9 thoughts on “Flutter Tutorial – Select an image from Gallery and show in Imageview”

  2. ettbeck

    Thanks – This is really helpful. Would you know how can one get the path/identity of the picked image (say to save in a database) which could help in retrieving the image at a later point programmatically? Thanks in advance!

    Reply ↓
  3. Vijayakumar s

    Hi, i had use this same code but image is not fetching, error showing the Error Picking Image

    Reply ↓
  7. sushant

    finding error : cannot find symbol
    return FileProvider.getUriForFile(activity, fileProviderName, file);
    ^
    symbol: variable FileProvider

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *