[et_pb_section admin_label=”section”][et_pb_row admin_label=”row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Flutter Image Picker :

Flutter Image Picker is used to select image from device and set it to image widget.Almost every app will have to upload some images in terms of profile images and more.

Now a days every social networking sites like facebook, instagram, whatsapp has the ability to choose a image from device and upload it to user dashboard.

We can also provide restrictions on image size and type so that we can avoid issue regarding the size and formats based on the app requirements.

Not only images but videos, audio, documents all these data needs to be selected using a picker, providing the required formats for each file.

In this tutorial we will be dealing with a real time usage of flutter image picker by picking up image from gallery and populating into image view.

Project Structure :

This image depicts the usage of flutter image picker project implementation.

pubspec.yaml :

Add image_picker dependency to pubspec and update with latest version to avoid unwanted code level issues.

dependencies:
  flutter:
    sdk: flutter
  image_picker: 0.6.7+4

main.dart :

Initialize void main() and consider default class MyApp()

void main(){
  runApp(MyApp());
}

Open a image picker this can be either from android and iOS too.

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

Add a variable to fetch the image.

File _image;

Using set state get the selected path

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

Add a floating button to open image picker dialog

floatingActionButton: new FloatingActionButton(
  onPressed: getImage,
  tooltip: 'Pick Image',
  child: new Icon(Icons.add_a_photo),
),

Declare getImage method and using state we can reload the view with async method.

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

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

Set the image to Image Widget

Image.file(_image),

If no image is selected then we will provide “No image selected” text so that we can understand.

Text('No image selected.')

_image == null
    ? new Text('No image selected.')
    : new Image.file(_image),

Full Code :

Providing the full code for flutter image picker implementation in your app.

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

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(

      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  File _image;

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

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Image Picker Example'),
      ),
      body: new Center(
        child: _image == null
            ? new Text('No image selected.')
            : new Image.file(_image),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: new Icon(Icons.add_a_photo),
      ),

    );
  }
}

Output :

This screen depicts the usage of flutter image picker.

If you have any queries on this tutorial on flutter image picker do let us know in the comment section below.Do like, share for more interesting tutorials.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]