ImagePicker In Flutter

Hello everyone In this blog, we will learn and implement new things in flutter. Here we will learn how to use an ImagePicker in a flutter with a camera and gallery functionality. In this blog, we will share the easiest and best way to implement an ImagePicker in flutter using a plugin.

As we all know flutter uses both Android and iOS. So we need to integrate it with both platforms.

ImagePicker in flutter is basically used for picking an image from the gallery or maybe from the camera. So that we can use it accordingly.

Check exciting flutter app development services from Mobikul.

So let’s start to implement the ImagePicker. So just follow these steps and make it. Let’s open your project if you have otherwise created a new flutter project.

Step1: Add the image_picker dependency to pubspec.yaml file.

Step2: Run “flutter pub get” in the root directory of your app.

image_picker: ^0.8.4+9

1	image_picker: ^0.8.4+9

Therefore In order to check the updated version of the dependency click here.

Step3: We just need to set request Legacy External Storage to true Android > app > src > main >AndroidManifest.xml for Android setup.

android:requestLegacyExternalStorage="true"

1	android:requestLegacyExternalStorage="true"

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

Project > ios > Runner > Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<key>NSCameraUsageDescription</key>
<key>NSMicrophoneUsageDescription</key>

<key>NSPhotoLibraryUsageDescription</key>

<key>NSCameraUsageDescription</key>

<key>NSMicrophoneUsageDescription</key>

Step5: Now start the coding for the same.

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

class MyPicker extends StatefulWidget {
  const MyPicker({Key? key}) : super(key: key);

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

class _MyPickrState extends State<MyPicker> {
  File? imageFile;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Image Picker"),
        ),
        body: imageFile == null
            ? Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Center(
                      child: Container(
                          height: 150,
                          width: 200,
                          child: Image.network(
                              'https://www.lifewire.com/thmb/P856-0hi4lmA2xinYWyaEpRIckw=/1920x1326/filters:no_u'
                              'pscale():max_bytes(150000):strip_icc()/cloud-upload-a30f385a928e44e199a62210d578375a.jpg')),
                    ),
                    Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: RaisedButton(
                              onPressed: () {
                                imageFromGallery();
                              },
                              child: Text("GALLERY"),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: RaisedButton(
                              onPressed: () {
                                imageFromCamera();
                              },
                              child: Text("CAMERA"),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              )
            : Center(
                child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      "Your Uploaded Image",
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                    ),
                  ),
                  Container(
                    height: 200,
                    width: 200,
                    child: Image.file(
                      imageFile!,
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              )));
  }

  imageFromGallery() async {
    PickedFile? pickedFile = await ImagePicker()
        .getImage(source: ImageSource.gallery, maxHeight: 200, maxWidth: 200);
    if (pickedFile != null) {
      setState(() {
        imageFile = File(pickedFile.path);
      });
    }
  }

  imageFromCamera() async {
    PickedFile? pickedFile = await ImagePicker()
        .getImage(source: ImageSource.camera, maxHeight: 200, maxWidth: 200);
    if (pickedFile != null) {
      setState(() {
        imageFile = File(pickedFile.path);
      });
    }
  }
}

100

101

102

103

104

105

106

107

import 'dart:io';

import 'package:image_picker/image_picker.dart';

import 'package:flutter/material.dart';

class MyPicker extends StatefulWidget {

const MyPicker({Key? key}) : super(key: key);

@override

_MyPickrState createState() => _MyPickrState();

}

class _MyPickrState extends State<MyPicker> {

File? imageFile;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Image Picker"),

body: imageFile == null

? Container(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Center(

child: Container(

height: 150,

width: 200,

child: Image.network(

'https://www.lifewire.com/thmb/P856-0hi4lmA2xinYWyaEpRIckw=/1920x1326/filters:no_u'

'pscale():max_bytes(150000):strip_icc()/cloud-upload-a30f385a928e44e199a62210d578375a.jpg')),

Center(

child: Row(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Padding(

padding: const EdgeInsets.all(8.0),

child: RaisedButton(

onPressed: () {

imageFromGallery();

child: Text("GALLERY"),

Padding(

padding: const EdgeInsets.all(8.0),

child: RaisedButton(

onPressed: () {

imageFromCamera();

child: Text("CAMERA"),

)

: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Padding(

padding: const EdgeInsets.all(8.0),

child: Text(

"Your Uploaded Image",

style: TextStyle(

color: Colors.black,

fontWeight: FontWeight.bold,

fontSize: 20),

Container(

height: 200,

width: 200,

child: Image.file(

imageFile!,

fit: BoxFit.cover,

)));

}

imageFromGallery() async {

PickedFile? pickedFile = await ImagePicker()

.getImage(source: ImageSource.gallery, maxHeight: 200, maxWidth: 200);

if (pickedFile != null) {

setState(() {

imageFile = File(pickedFile.path);

});

}

imageFromCamera() async {

PickedFile? pickedFile = await ImagePicker()

.getImage(source: ImageSource.camera, maxHeight: 200, maxWidth: 200);

if (pickedFile != null) {

setState(() {

imageFile = File(pickedFile.path);

});

}

Finally, we can run the code and as a result, we can see the below output.

Conclusion

Congratulations!! You have learned how to use ImagePicker in a flutter.

For more detail, you can refer to the official doc of a flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Thanks for reading!!.

Reference

https://pub.dev/packages/image_picker

ImagePicker image_picker

Ayush Agrawal

27 Apr, 2023
Updated by - anchit
25 Feb, 2022
Updated by - Ayush Agrawal

. . .

ImagePicker In Flutter

Conclusion

Reference

Leave a Comment Cancel Reply

Message Sent!