Adding an Image Picker in a Flutter App — Pick images using Camera and Gallery / Photos

Image Picker is a common component we often need for user-profiles and other stuff. We will be using this plugin by Flutter developers.

Step 1 — Add the dependency to your pubspec.yaml file.

image_picker: ^0.6.6+5

Step 2 — Configure native platforms

Next, we need to configure native settings. For the Android platform, nothing is needed. For iOS, open Info.plist file found under ios/Runner folder and add the following keys.

<key>NSPhotoLibraryUsageDescription</key>
<string>Allow access to photo library</string>

<key>NSCameraUsageDescription</key>
<string>Allow access to camera to capture photos</string>

<key>NSMicrophoneUsageDescription</key>
<string>Allow access to microphone</string>

Step 3 — Image Picker function

In our screen’s StatefulWidget’s State class, declare a File variable to hold the image picked by the user.

File _image;

Now write two functions for picking image via Camera and Photo Library respectively. The optional parameter imageQuality accepts any value between 0and 100, you can adjust it according to the size and quality required by your app. After obtaining the image file, we save it into the _image variable and call setState() so that it can be displayed in the screen.

_imgFromCamera() async {
  File image = await ImagePicker.pickImage(
    source: ImageSource.camera, imageQuality: 50
  );

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

_imgFromGallery() async {
  File image = await  ImagePicker.pickImage(
      source: ImageSource.gallery, imageQuality: 50
  );

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

Step 4 — Create an option chooser for selecting camera / gallery

Next, write a function for displaying a bottom sheet for the user for choosing the option of camera or gallery.

void _showPicker(context) {
  showModalBottomSheet(
      context: context,
      builder: (BuildContext bc) {
        return SafeArea(
          child: Container(
            child: new Wrap(
              children: <Widget>[
                new ListTile(
                    leading: new Icon(Icons.photo_library),
                    title: new Text('Photo Library'),
                    onTap: () {
                      _imgFromGallery();
                      Navigator.of(context).pop();
                    }),
                new ListTile(
                  leading: new Icon(Icons.photo_camera),
                  title: new Text('Camera'),
                  onTap: () {
                    _imgFromCamera();
                    Navigator.of(context).pop();
                  },
                ),
              ],
            ),
          ),
        );
      }
    );
}

Step 5 — Create and configure the Image view on screen

Finally, let us create a profile picture holder on the screen, which opens the chooser upon click, and displays the selected image.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Column(
      children: <Widget>[
        SizedBox(
          height: 32,
        ),
        Center(
          child: GestureDetector(
            onTap: () {
              _showPicker(context);
            },
            child: CircleAvatar(
              radius: 55,
              backgroundColor: Color(0xffFDCF09),
              child: _image != null
                  ? ClipRRect(
                      borderRadius: BorderRadius.circular(50),
                      child: Image.file(
                        _image,
                        width: 100,
                        height: 100,
                        fit: BoxFit.fitHeight,
                      ),
                    )
                  : Container(
                      decoration: BoxDecoration(
                          color: Colors.grey[200],
                          borderRadius: BorderRadius.circular(50)),
                      width: 100,
                      height: 100,
                      child: Icon(
                        Icons.camera_alt,
                        color: Colors.grey[800],
                      ),
                    ),
            ),
          ),
        )
      ],
    ),
  );
}

All done, Run the app and you should see something like this.

…

Originally published at Fabcoding.