How do I add a camera view with Image Picker plugin for Flutter?

Question

I'm trying to add a camera view to my widget using this plugin, but I haven't been able to find any code examples on setting up a camera view or taking a picture. I only see an example on retrieving images stored on the device. Any help is appreciated.

Answer 1

Starting with version 0.6.7 of the image_picker plugin, the API of the plugin changed slightly to allow for web implementations to exist.

The old methods that returned dart:io File objects were marked as deprecated, and a new set of methods that return PickedFile objects were introduced.

More information - ImagePicker Example

image_picker: ^0.6.7+14

add above dependency in pubspec.yaml

iOS developers – You need to add some key-value pairs in this file /ios/Runner/Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>Need to take picture from photo library</string>
<key>NSCameraUsageDescription</key>
<string>Need to take picture using Camera</string>

File _image;

final picker = ImagePicker();

Import these :

import ‘dart:io’; import ‘package:image_picker/image_picker.dart’;

 _getImage(ImageSource imageSource) async 
{
    PickedFile imageFile = await picker.getImage(source: imageSource);
//if user doesn't take any image, just return.
    if (imageFile == null) return;
    setState(
      () {
//Rebuild UI with the selected image.
        _image = File(imageFile.path);
      },
    );
  }

Call _getImage()

ElevatedButton.icon(
                  onPressed: () => _getImage(ImageSource.gallery),
                  icon: Icon(Icons.image),
                  label: Text('gallery'),
                ),
                ElevatedButton.icon(
                  onPressed: () => _getImage(ImageSource.camera),
                  icon: Icon(Icons.camera),
                  label: Text('camera'),
                ),

Answer 2

All we need to use image picker lib https://pub.dev/packages/image_picker

    File _storedImage;
    final imageFile = await ImagePicker.pickImage(
          source: ImageSource.camera,
          maxWidth: 600,
        );

      setState(() {
          _storedImage = imageFile;
        });

The imageFile variable will have File object which we used in showing widget

We can show file object in widget as

        Image.file(
                  _storedImage,
                  fit: BoxFit.cover,
                  width: double.infinity,
                  )

Update: Image Picker dependency is updated https://pub.dev/packages/image_picker Now use

ImagePicker picker = ImagePicker();
final pickedFile = await picker.getImage(source: ImageSource.camera);

Answer 3

Sample code for both Take picture and Pick image from gallery.

Step 1: Add this to your package's pubspec.yaml file:

dependencies:
  image_picker: ^0.6.1+4

Step 2: Android

Add user permission in AndroidManifest.xml

   <uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS

Add two rows to the ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Need library access to pick images</string>

Step 3: Now in your Dart code, you can use:

import 'package:image_picker/image_picker.dart';

step 4

Add this code

class ImagePickerData extends StatefulWidget {
  List Data;
  int ITId;
  ImagePickerData({this.Data, this.ITId});
  @override
  AttachmentState createState() => new AttachmentState();
}

class AttachmentState extends State<ImagePickerData> {
  File _image;

  @override
  Widget build(BuildContext context) {
    Future getCamera() async {
      var image = await ImagePicker.pickImage(source: ImageSource.camera);
      setState(() {
        _image = image;
      });
    }

    Future getGallery() async {
      var image = await ImagePicker.pickImage(source: ImageSource.gallery);
      setState(() {
        _image = image;
      });
    }

    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          height: 200.0,
          child: Center(
            child: _image == null
                ? Text('No image selected.')
                : Image.file(_image),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(bottom: 10.0),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    RaisedButton(
                        elevation: 4.0,
                        onPressed: () {
                          getGallery();
                        },
                        textColor: Colors.white,
                        padding: const EdgeInsets.all(0.0),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(80.0)),
                        child: Container(
                            decoration: const BoxDecoration(
                                gradient: LinearGradient(
                                  colors: <Color>[
                                    Color(0xFFf7418c),
                                    Color(0xFFfbab66),
                                  ],
                                ),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(80.0))),
                            padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
                            child: Row(
                              mainAxisSize: MainAxisSize.max,
                              children: <Widget>[
                                Text('Picture From Gallery',
                                    style: TextStyle(fontSize: 15)),
                              ],
                            ))),
                    RaisedButton(
                      elevation: 4.0,
                      onPressed: () {
                        getCamera();
                      },
                      textColor: Colors.white,
                      padding: const EdgeInsets.all(0.0),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(80.0)),
                      child: Container(
                          decoration: const BoxDecoration(
                              gradient: LinearGradient(
                                colors: <Color>[
                                  Color(0xFFf7418c),
                                  Color(0xFFfbab66),
                                ],
                              ),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(80.0))),
                          padding: const EdgeInsets.fromLTRB(30, 10, 30, 10),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Text('Take Picture',
                                  style: TextStyle(fontSize: 15)),
                            ],
                          )),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Answer 4

Flutter has a image picker plugin(image_picker: "^0.4.5") which allows access to the camera and gallery. such as

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

you can change the source to ImageSource.camera for get image from camera.

Answer 5

Flutter has a camera plugin which allows access to the camera, shows a camera view and allows to take pictures.

Hope this helps!