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

By | January 8, 2019

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

 

 

Watch Video Tutorial

 

[java]
dependencies:
flutter:
sdk: flutter
….

image_picker: ^0.4.10
…..
[/java]

 
Usage

 
To open the gallery
 

[java]
Future<File> imageFile;

//Open gallery
pickImageFromGallery(ImageSource source) {
setState(() {
imageFile = ImagePicker.pickImage(source: source);
});
}
….
[/java]

 
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.

[java]
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,
);
}
},
);
}
[/java]

 

Complete Example

[java]
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);
},
),
],
),
),
);
}
}
[/java]

 
Thats it.

Please leave your valuable comments below.

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

  1. 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
  2. Vijayakumar s

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

    Reply
  3. 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 *