Blog Details

img
Development

Camera Access in Flutter

Spoke Right / 31 Oct, 2023

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.

flutter create 

Step 2: Delete the default code from the main.dart file.

Step 3: Add the dependency to your pubspec.yaml file:

dependencies

Step 4: Use the below code in the main.dart file :

main.dart:

  • Dart




import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';

  

void main() {

  runApp(new MyApp());

}

  

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return new MaterialApp(

      home: new CameraAccess(),

      debugShowCheckedModeBanner: false,

    );

  }

}

  

class CameraAccess extends StatefulWidget {

  @override

  State createState() {

    return new CameraAccessState();

  }

}

  

class CameraAccessState extends State {

  File cameraFile;

  

  @override

  Widget build(BuildContext context) {

    //display image selected from gallery

    selectFromCamera() async {

      cameraFile=await ImagePicker.pickImage(

        source: ImageSource.camera,

        // maxHeight: 50.0,

        // maxWidth: 50.0,

      );

      setState(() {});

    }

  

    return new Scaffold(

      appBar: new AppBar(

        title: new Text("Camera Access"),

        backgroundColor: Colors.green,

        actions: [

          Text("GFG",textScaleFactor: 3,)

        ],

      ),

      body: new Builder(

        builder: (BuildContext context) {

          return Center(

            child: new Column(

              mainAxisAlignment: MainAxisAlignment.center,

              children: [

                new RaisedButton(

                  child: new Text('Select Image from Camera'),

                  onPressed: selectFromCamera

                ),

                SizedBox(

                  height: 200.0,

                  width: 300.0,

                  child: cameraFile == null

                      ? Center(child: new Text('Sorry nothing selected!!'))

                      : Center(child: new Image.file(cameraFile)),

                )

              ],

            ),

          );

        },

      ),

    );

  }

}

Output:

When no image is selected, it will result:

camera access button

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:

Explanation:

  • Import image_picker package.
  • Create async selectFromCamera() function and await for camera image.
  • After loading the image from the camera, the image will be displayed on the screen.

0 comments

Warning: PHP Startup: Unable to load dynamic library 'imagick.so' (tried: /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so: cannot open shared object file: No such file or directory), /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so: cannot open shared object file: No such file or directory)) in Unknown on line 0