image picker in flutter with example

Hi Guys, Welcome to Proto Coders Point, In this Flutter tutorial we gonna learn how to use image picker plugin library in flutter application development.

Image Picker flutter library

A Flutter Plugin library for both iOS and Android that is been used to pick an images from mobile phone gallery or even you can take a new photo with the camera.

let’s straight away start implement the flutter image picker in our flutter app.

find the latest version of Image picker from official site.

Step 1: Adding required dependencies in to our flutter project

Once you have created a new Flutter project or open your existing flutter project to implement image picker flutter library.

Then you need to add image picker dependencies,

Open pubspec.yaml  then add the below lines

dependencies:
  image_picker: ^0.6.3+4 //add this line in pubspec.yaml file

Step 2: Import image_picker.dart file in main.dart

Now, as you have added the required library in your project now you need to import the picker library wherever required.

import 'package:image_picker/image_picker.dart';

For Example : In my case i have imported the library in main.dart file whcih is my main activity screen.

Step 3: Configuration

1. ANDROID IMAGE PICKER CONFIGURATION

When it comes to android their is no configuration required – the plugin should work out of the box.

2. IOS IMAGE PICKER CONFIGURATION

Add the following keys to your Info.plist file, located in

Project > ios > Runner > Info.plist

adding flutter permission for ios devices in info.plist

Copy paste the below permission in info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires read and write permission Photo Library</string>

used to ask uses to give permission for accessing photo library. This is Called Privacy – Photo Library Usage Description.

<key>NSCameraUsageDescription</key>
<string>This app requires read and write permission from the user.</string>

Used to take photo from device camera itself.

<key>NSMicrophoneUsageDescription</key>
<string>This app requires get access to micro phone</string>

if you intend to record an video by using camera, video offcourse need audio to be recorded, this permission is used to record audio from microphone.

Step4 : Explaination of Image Picker snippet code

File _image; //here we gonna store our image.
var image = await ImagePicker.pickImage(source: ImageSource.gallery);

image picking from gallery

Then, Here we are using ImagePicker Class to pick images from ImageSource.

var image = await ImagePicker.pickImage(source: ImageSource.camera);

Here, ImageSource can either be camera or gallery.

image capture in flutter app

Camera is you want to click a image from device camera.

Gallery is you want to pick/select image from gallery of mobile phone.

Picked image from gallery in flutter app

Complete Code for image picker in flutter

main.dart

import 'dart:ffi';
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File _image;

  Future getImagefromcamera() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }

  Future getImagefromGallery() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Image Picker Example"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Text(
              "Image Picker Example in Flutter",
              style: TextStyle(fontSize: 20),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: 200.0,
              child: Center(
                child: _image == null
                    ? Text("No Image is picked")
                    : Image.file(_image),
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              FloatingActionButton(
                onPressed: getImagefromcamera,
                tooltip: "pickImage",
                child: Icon(Icons.add_a_photo),
              ),
              FloatingActionButton(
                onPressed: getImagefromGallery,
                tooltip: "Pick Image",
                child: Icon(Icons.camera_alt),
              )
            ],
          )
        ],
      ),
    );
  }
}