How to Capture Image from Camera in Flutter

In this example, we are going to show you how to capture images from the Camera with an Image Picker and From the default Camera in Flutter. You will learn to show a preview of the live camera and capture it. See the example below.

You can pick an image from the camera with image_picker flutter package. But it will use device default Camera UI to capture images. To add this package to your project, add the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.4+8

Now, import the package in your script:

import 'package:image_picker/image_picker.dart';

Now you can pick image using Camera:

final ImagePicker _picker = ImagePicker();

final XFile? photo = await _picker.pickImage(source: ImageSource.camera);

You can convert XFile to FIle with the code below:

File photofile = File(photo!.path)

In this method, we will use our own UI to preview the live camera feed and capture images with a button click. To capture an image, add the camera package to your project by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.9.4+11

Now, import the package in the script:

import 'package:camera/camera.dart';

Now, see the example below for reference.

For More Details: How to Show Live Image Preview from Camera in Flutter App

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

Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  List<CameraDescription>? cameras; //list out the camera available
  CameraController? controller; //controller for camera
  XFile? image; //for captured image

  @override
  void initState() {
    loadCamera();
    super.initState();
  }

  loadCamera() async {
      cameras = await availableCameras();
      if(cameras != null){
        controller = CameraController(cameras![0], ResolutionPreset.max);
                    //cameras[0] = first camera, change to 1 to another camera
                    
        controller!.initialize().then((_) {
            if (!mounted) {
              return;
            }
            setState(() {});
        });
      }else{
        print("NO any camera found");
      }
  }

  @override
  Widget build(BuildContext context) {
    
    return  Scaffold(
          appBar: AppBar( 
              title: Text("Capture Image from Camera"),
              backgroundColor: Colors.redAccent,
          ),
          body: Container( 
            child: Column(
              children:[
                  Container(
                      height:300,
                      width:400,
                      child: controller == null?
                          Center(child:Text("Loading Camera...")):
                                !controller!.value.isInitialized?
                                  Center(
                                    child: CircularProgressIndicator(),
                                  ):
                                  CameraPreview(controller!)
                  ),

                  ElevatedButton.icon( //image capture button
                    onPressed: () async{
                        try {
                          if(controller != null){ //check if contrller is not null
                              if(controller!.value.isInitialized){ //check if controller is initialized
                                  image = await controller!.takePicture(); //capture image
                                  setState(() {
                                    //update UI
                                  });
                              }
                          }
                        } catch (e) {
                            print(e); //show error
                        }
                    },
                    icon: Icon(Icons.camera),
                    label: Text("Capture"),
                  ),

                  Container( //show captured image
                     padding: EdgeInsets.all(30),
                     child: image == null?
                           Text("No image captured"):
                           Image.file(File(image!.path), height: 300,), 
                           //display captured image
                  )
              ]
            )
          ),
           
       );
  }
}

Here, we have a live camera preview, a button to capture the image.