Flutter: Camera in iOS and Android — Part 1- Camera Preview.

Flutter How To: Simple | To the point | Short

Flutter User Level: Intermediate

Objective

Simple steps to add camera preview to your flutter application

Step 1:

Add the camera plugin dependency in your pubspec.yaml

dependencies:
 camera: ^0.10.0+1

for the latest: https://pub.dev/packages/camera

Step 2:

iOS:

1. Go to iOS/Runner/info.plist.
2. At a relevant paste camera usage description.

<key>NSCameraUsageDescription</key>
<string>Hello, sample permission to use the Camera</string>

Step 3:

Android

1. Make sure that the min SDK version is 21 or above.

minSdkVersion 21

Step 4:

Add the relevant import in the file you want to use the camera.

import 'package:camera/camera.dart';

Step 5:

Create a list of camera descriptions and camera controller.

late List<CameraDescription> _cameras;
late CameraController controller;

Step 6:

Create a method to initialise the _cameras and the controller

Future<void>? _initializeCamera() async {
 _cameras = await availableCameras();
 controller = CameraController(_cameras[0], ResolutionPreset.max);
 await controller.initialize();
}

Step 7:

I prefer using future builder to call the _initializeCamera method (Although there are multiple ways to do it)

@override
Widget build(BuildContext context) {
return FutureBuilder(
future: _initializeCamera(),
....
}

Step 8:

Return the camera preview widget and pass the controller to it.

@override
Widget build(BuildContext context) {
return FutureBuilder(
future: _initializeCamera(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
  return const Center(child: CircularProgressIndicator());
}
return CameraPreview(controller);
});
}

That’s all for this one. Next part coming soon..

You can find me on
LinkedIn — https://www.linkedin.com/in/knowabdur
Twitter: — https://twitter.com/AbdurDeveloper