Open In App

Camera Access in Flutter

Last Updated : 07 Mar, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

To add images from the camera in Flutter, we’ll use the image_picker package. For this, you’ll need to use your real device.

Follow the below steps to display the images from the camera

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter


Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add image_picker as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Dart
dependencies:
      flutter:
        sdk: flutter
      image_picker: ^1.1.2

Now run the below command in the terminal.

flutter pub get


Step 3: Importing the Dependency

Use the below line of code in the main.dart file to import the image_picker dependency.

import 'package:image_picker/image_picker.dart';


Step 4: Follow the below flow

Create a button: To access the camera.

Dart
 ElevatedButton(
      style: ElevatedButton.styleFrom(
                 backgroundColor: Colors.green,
                 foregroundColor: Colors.white
             ),
      child: Text('Select Image from Camera'),
      onPressed: selectFromCamera,
),


selectFromCamera:

Dart
 Future<void> selectFromCamera() async {
    final ImagePicker picker = ImagePicker();
    // Use the instance method pickImage from the ImagePicker instance
    final XFile? pickedFile =
        await picker.pickImage(source: ImageSource.camera);
    if (pickedFile != null) {
      setState(() {
        cameraFile = File(pickedFile.path);
      });
    }
  }


Display the captured picture

Show the captured picture, if the user doesn’t capture anything, then show “Sorry, nothing selected!”.

Dart
 SizedBox(
      height: 200.0,
      width: 300.0,
      child: cameraFile == null
          ? Center(child: Text('Sorry, nothing selected!'))
          : Center(child: Image.file(cameraFile!)),
),


Complete Source Code

main.dart:

Dart
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) {
    return MaterialApp(
      home: CameraAccess(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class CameraAccess extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CameraAccessState();
  }
}

class CameraAccessState extends State<CameraAccess> {
  File? cameraFile; // Use nullable File as initially there's no image

  Future<void> selectFromCamera() async {
    final ImagePicker picker = ImagePicker();
    // Use the instance method pickImage from the ImagePicker instance
    final XFile? pickedFile =
        await picker.pickImage(source: ImageSource.camera);
    if (pickedFile != null) {
      setState(() {
        cameraFile = File(pickedFile.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Camera Access"),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        actions: <Widget>[
          Text("GFG", textScaleFactor: 3),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green, foregroundColor: Colors.white),
              child: Text('Select Image from Camera'),
              onPressed: selectFromCamera,
            ),
            SizedBox(
              height: 200.0,
              width: 300.0,
              child: cameraFile == null
                  ? Center(child: Text('Sorry, nothing selected!'))
                  : Center(child: Image.file(cameraFile!)),
            ),
          ],
        ),
      ),
    );
  }
}


Output:

When no image is selected, the following will result:

c1


When the button is tapped, the mobile’s camera will be opened to capture the image, as shown below:

When the image is captured, it will be displayed on the screen, as shown below:

c2

Next Article

Similar Reads