Imagepicker Widget in Flutter | Gallery Made easy

Imagepicker Widget in Flutter – Gallery Made easy

Imagepicker widget in Flutter makes the life so much easy by bridging Photo gallery in Flutter. In this article we will read more about using the ImagePicker Plugin/Widget to create a good gallery like app.

Even before we jump into that, we will be requiring the one important plugin – image_picker

dependencies:
  image_picker: ^0.6.1+4

This will also require you to add an import statement in the main.dart(or whichever is the main file).

import 'package:image_picker/image_picker.dart';

Once these two are added, incase the application has to be used for IOS, make sure to add the following changes in info.plist file.

  • NSPhotoLibraryUsageDescription – describe why your app needs permission for the photo library. This is called Privacy – Photo Library Usage Description in the visual editor.
  • NSCameraUsageDescription – describe why your app needs access to the camera. This is called Privacy – Camera Usage Description in the visual editor.
  • NSMicrophoneUsageDescription – describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy – Microphone Usage Description in the visual editor.

Image Picker Widget – Basics

To make use of this ImagePicker widget, just call the class ImagePicker. There are two possibilities from this class.

  • Choose an Image or Choose a Video
  • Choose one of the above from a Gallery or a Camera Source directly

The above are possible through the method callbacks.

  • ImagePicker.pickImage() with source as ImageSource.gallery or ImageSource.camera
  • or ImagePicker.pickVideo() with the sources as mentioned above.

Both the calls above mentioned are async calls(Read more about FutureBuilder Widget and Asynchronous operations). Hence, it requires to setState() on the image/video that is selected.

The ImagePicker.<source call> returns a file location of the image/video. It is upto us to load the Image using the Image.file() call.

All of this are pieced together in the below example code. To know more about it read it in the next section.

ImagePicker Widget – Example Application

The below example app creates a Image Picker button which lets you to choose either a Image from gallery or directly from the Camera.

The next section contains the app images. Also find code explanation below.

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(ImagePickerApp());

class ImagePickerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Imagepicker Widget',
home: ImagePickerWidget(),
);
}
}

class ImagePickerWidget extends StatefulWidget {
ImagePickerWidget({Key key}) : super(key: key);

@override
_ImagePickerWidgetState createState() => _ImagePickerWidgetState();
}

class _ImagePickerWidgetState extends State {

File _image;
@override
void initState() {
super.initState();
}

void open_camera()
async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});

}
void open_gallery()
async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sample Imagepicker Widget"),
backgroundColor: Colors.black45,),
body: Center(
child: Container(
child: Column(
children: [
Container(
color: Colors.black12,
height: 300.0,
width: 900.0,
child: _image == null ? Text("Still waiting!") : Image.file(_image),),
FlatButton(
color: Colors.deepOrangeAccent,
child: Text("Open Camera", style: TextStyle(color: Colors.white),),
onPressed: (){
open_camera();
},),
FlatButton(
color: Colors.limeAccent,

child:Text("Open Gallery", style: TextStyle(color: Colors.black),),
onPressed: (){
open_gallery();
},
)
],
),
),
)

);

}
}
Image Picker in Flutter
Image Picker in Flutter
ImagePicker Widget
ImagePicker Widget
ImagePicker Widget
ImagePicker Widget

ImagePicker Widget – Conclusion

The Image Picker Widget is a useful/handy plugin to create faster access to Gallery or Camera source directly. Eventhough the Widget itself cannot be customised, the already available Plugin supports both the IOS and Android alike without any additional changes! Its definitely a win-win situation!

If you require additional customisation, you might have to create the entire logic from scratch at this moment – Sad face 🙁

Leave a Comment

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