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:
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.