Camera Access in Flutter
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 <APP_NAME>
Step 2: Delete the default code from the main.dart file.
Step 3: Add the dependency to your pubspec.yaml file:
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<StatefulWidget> createState() { return new CameraAccessState(); } } class CameraAccessState extends State<CameraAccess> { 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: <Widget>[ Text("GFG",textScaleFactor: 3,) ], ), body: new Builder( builder: (BuildContext context) { return Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ 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:
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.
Contact Us