Building a Smart Camera App in Flutter with

AI Filters !!

If you’re looking for the best Flutter app development company for your mobile application then feel free to

contact us at — support@flutterdevs.com

Introduction

What Is a Smart Camera App and Why Does It Matter in Flutter

Choosing the Right Architecture

Setting Up the Project: Dependencies and Configuration

App Entry Point and Service Initialization

Camera Controller — The Brain of the App

Permission Handling Inside the Controller

Camera Initialization and Stream Management

Camera Controls — Flash, Zoom, Focus, and Flip

Capture Flow — Stop Stream, Shoot, Navigate

Building the Camera View

The Preview Stack — Six Layers That Work as One

The Filter Strip UI

The Rule-of-Thirds Grid Overlay

Performance Optimization: Processing Frames Without Jank

Real-World Use Cases

Common Mistakes to Avoid

Conclusion and Next Steps

References

Introduction

A camera app that simply captures a photo is table stakes in 2025. What genuinely impresses users — and what keeps them coming back — is a camera experience that is intelligent: one that applies real-time AI-powered filters to the live viewfinder, processes frames without dropping a single animation frame, and delivers a silky-smooth shutter-to-gallery flow on both Android and iOS.

Flutter, backed by Google’s powerful ecosystem, gives us everything we need to build exactly this kind of app from scratch: the camera package for hardware access and live preview, LiveFilterService for on-device frame processing, GetX for reactive state management, and a rich widget toolkit for crafting animated filter strips, pulsing live indicators, and tap-to-focus overlays.

This guide walks you through building the Smart Camera AI app in Flutter — complete with a live filtered preview, a frame-gated processing pipeline, tap-to-focus, pinch-to-zoom, flash cycling, front/back camera switching, a rule-of-thirds grid overlay, haptic feedback, and a shutter animation. Every step uses the actual production code from the project.

What you will learn:

Initializing services at app launch using Get.putAsync()

Managing CameraController lifecycle — init, stream, dispose — inside a GetxController

Implementing a frame-gated LiveFilterService for real-time filter preview without jank

Building a six-layer Stack preview with raw preview, filtered overlay, grid, controls, zoom badge, and live pill

Wiring SettingsService.showGrid as a reactive alias so the grid toggle in Settings updates the camera view instantly

Cycling flash modes with Samsung-safe initialization

Implementing shutter animation with AnimationController and GetSingleTickerProviderStateMixin

Navigating to a dedicated filter screen after capture with arguments

What Is a Smart Camera App and Why Does It Matter in Flutter?

A smart camera app is more than a thin wrapper around the device camera API. It is a real-time image processing pipeline that intercepts each frame coming off the camera sensor, applies one or more transformations, and renders the result back to the viewfinder — all before the user taps the shutter.

In a Flutter context, this means:

CameraController streams CameraImage objects to Dart at up to 30 fps using startImageStream().

A processing gate inside LiveFilterService ensures only one frame is in-flight at any time.

The processed Uint8List is pushed into a reactive Rxn<Uint8List> previewBytes observable.

The view layer renders it via Image.memory(bytes, gaplessPlayback: true), overlaid on the raw CameraPreview.

On capture, the stream is stopped first (required on Android), a full-resolution photo is taken, and the app navigates to a separate filter editing screen.

Key Benefits:

Instant Gratification:

Users see filtered results live in the viewfinder — no post-processing wait after capture

On-Device Privacy:

No frames leave the device; all processing runs locally

Offline Capability:

Works fully without internet — no cloud ML dependency

Settings-Reactive UI:

Grid, haptics, and quality preferences update the camera view instantly via a reactive SettingsService

Samsung-Safe Design:

Explicit flash initialization and stream-stop-before-capture prevent common Android OEM crashes

Choosing the Right Architecture

The app follows GetX’s clean service/module separation. Each concern lives in exactly one place.

LayerClassResponsibilityApp

Services

SettingsService : Persistent reactive settings (grid, haptics, quality)

App Services

GalleryService : Gallery read/write operationsCamera

Logic

CameraViewController : All camera state, stream, controls, captureFilter Processing

LiveFilterService : Frame-gated YUV→RGB + filter pipelineFilter Metadata

AiFilterModel : Filter catalog: name, icon, gradient colors, typeCamera

UI

CameraView

Pure UI consumer — zero business

logicRouting

AppPages / AppRoutes

Named route definitions

Design Principle:

CameraViewController uses Get.find<SettingsService>() to read settings reactively. It exposes showGrid as a direct alias to _settings.showGrid so the camera view reacts to Settings changes without any message passing or controller coupling.

Setting Up the Project: Dependencies and Configuration

Step 1: Add Dependencies

Add the following to your pubspec.yaml:

yaml

dependencies:

flutter:

sdk: flutter

# State Management

get: ^4.6.6

# Camera

camera: ^0.10.5+9

# Image processing

image: ^4.1.7

# Permissions

permission_handler: ^11.3.1

# Storage

image_gallery_saver: ^2.0.3

path_provider: ^2.1.3

path: ^1.9.0

# Utilities

intl: ^0.19.0

Run flutter pub get to install.

Step 2: Android Configuration

Set minSdkVersion to 21 in android/app/build.gradle:

kotlin

android {

defaultConfig {

minSdk = 21

targetSdk = 34

}

}

Add permissions to android/app/src/main/AndroidManifest.xml:

xml

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.RECORD_AUDIO" />

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"

android:maxSdkVersion="32" />

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

<uses-feature

android:name="android.hardware.camera"

android:required="true" />

Step 3: iOS Configuration

Add the following keys to ios/Runner/Info.plist:

xml

<key>NSCameraUsageDescription</key>

<string>This app uses the camera to capture and apply AI-powered filters to your photos.</string>

<key>NSMicrophoneUsageDescription</key>

<string>Microphone access is used when recording video.</string>

<key>NSPhotoLibraryUsageDescription</key>

<string>This app saves filtered photos to your photo library.</string>

<key>NSPhotoLibraryAddUsageDescription</key>

<string>This app adds filtered photos to your photo library.</string>

Set minimum iOS version in ios/Podfile:

ruby

platform :ios, '13.0'

App Entry Point and Service Initialization

main.dart is deliberately minimal. Only the two services that must outlive all screens — SettingsService and GalleryService — are registered as async singletons before runApp(). Everything else is lazy-put via bindings.

dart

void main() async {

WidgetsFlutterBinding.ensureInitialized();

await Get.putAsync(() => SettingsService().init());

await Get.putAsync(() => GalleryService().init());

runApp(const SmartCameraApp()); }

SmartCameraApp applies a full dark theme seeded from 0xFF1A1A2E (a near-black navy), forces ThemeMode.dark, and wires GetX routing:

dart

class SmartCameraApp extends StatelessWidget {

const SmartCameraApp({super.key});

@override

Widget build(BuildContext context) {

return GetMaterialApp(

title: 'Smart Camera AI',

debugShowCheckedModeBanner: false,

theme: ThemeData(

colorScheme: ColorScheme.fromSeed(

seedColor: const Color(0xFF1A1A2E),

brightness: Brightness.dark, ),

useMaterial3: true,

fontFamily: 'SF Pro Display', ),

themeMode: ThemeMode.dark,

initialBinding: InitialBinding(),

initialRoute: AppRoutes.HOME,

getPages: AppPages.routes, );} }

Why Get.putAsync() instead of Get.put()?

Both SettingsService and GalleryService perform async initialization — reading SharedPreferences and scanning the device gallery respectively. Get.putAsync() awaits the init() future before runApp() fires, guaranteeing both services are fully ready before the first frame renders. This prevents null-access errors on cold start.

Camera Controller — The Brain of the App

CameraViewController extends GetxController with

GetSingleTickerProviderStateMixin to own the shutter animation. It holds all camera state, wires SettingsService reactively, manages the filter stream, and handles the full capture flow.

dart

class CameraViewController extends GetxController

with GetSingleTickerProviderStateMixin {

final _settings = Get.find<SettingsService>();

// Camera state

CameraController? cameraCtrl;

final cameras = <CameraDescription>[].obs;

final isInitialized = false.obs;

final isCapturing = false.obs;

final isFrontCamera = false.obs;

final flashMode = FlashMode.off.obs;

final zoomLevel = 1.0.obs;

final minZoom = 1.0.obs;

final maxZoom = 1.0.obs;

final hasPermission = false.obs;

// showGrid is a direct alias to SettingsService — reactive across the whole app

RxBool get showGrid => _settings.showGrid;

// Live filter state

final previewBytes = Rxn<Uint8List>();

final selectedFilter = AiFilterModel.allFilters.first.obs;

final _liveService = LiveFilterService();

bool _streamActive = false;

int _sensorDegrees = 90;

// Shutter animation

late AnimationController shutterAnimCtrl;

late Animation<double> shutterAnim;

Lifecycle: onInit, onReady, onClose

dart

@override

void onInit() {

super.onInit();

shutterAnimCtrl = AnimationController(

vsync: this, duration: const Duration(milliseconds: 150));

shutterAnim = Tween<double>(begin: 1.0, end: 0.85).animate(

CurvedAnimation(parent: shutterAnimCtrl, curve: Curves.easeInOut));

}

@override

void onReady() {

super.onReady();

// Read preset filter from navigation arguments (e.g. launched from home)

final args = Get.arguments as Map<String, dynamic>?;

final presetName = (args?['presetFilterName'] as String?) ?? FilterType.none.name;

final match = AiFilterModel.allFilters.firstWhere(

(f) => f.type.name == presetName,

orElse: () => AiFilterModel.allFilters.first,

);

selectedFilter.value = match;

requestPermissionsAndInit();

}

@override

void onClose() {

_stopStream();

cameraCtrl?.dispose();

shutterAnimCtrl.dispose();

super.onClose();

}

Why onReady() instead of onInit() for camera initialization?

onReady() fires after the first frame renders, guaranteeing that Get.arguments is populated and that the context is ready for snackbars. Using onInit() for async operations that trigger UI feedback can silently fail on the first route push.

Permission Handling Inside the Controller

Permissions are requested inside the controller, not the view, keeping CameraView a pure UI layer. If permission is denied, a styled red snackbar appears. The view reacts to hasPermission via Obx and renders a dedicated _PermissionDenied widget with a retry button:

dart

Future<void> requestPermissionsAndInit() async {

final status = await Permission.camera.request();

if (!status.isGranted) {

hasPermission.value = false;

Get.snackbar(

'Permission Required',

'Camera permission is needed.',

snackPosition: SnackPosition.BOTTOM,

backgroundColor: Colors.red.shade800,

colorText: Colors.white, );

return; }

hasPermission.value = true;

await _initCamera(); }

The view handles all three states — no permission, initializing, and ready — in a single root Obx:

dart

Obx(() {

if (!controller.hasPermission.value) {

return _PermissionDenied(onRetry: controller.requestPermissionsAndInit); }

if (!controller.isInitialized.value) {

return const Center(

child: CircularProgressIndicator(color: Colors.white)); }

return _CameraBody(controller: controller); }),

_PermissionDenied renders a full-screen centered column with an icon, a message,

And a Grant Permission ElevatedButton that,

calls requestPermissionsAndInit() again:

dart

class _PermissionDenied extends StatelessWidget {

final VoidCallback onRetry;

const _PermissionDenied({required this.onRetry});

@override

Widget build(BuildContext context) => Center(

child: Column(mainAxisSize: MainAxisSize.min, children: [

const Icon(Icons.no_photography, color: Colors.white54, size: 64),

const SizedBox(height: 16),

const Text('Camera permission required',

style: TextStyle(color: Colors.white70)),

const SizedBox(height: 16),

ElevatedButton.icon(

onPressed: onRetry,

icon: const Icon(Icons.refresh),

label: const Text('Grant Permission'),

),

]),

);

}

Camera Initialization and Stream Management

_startCamera() always uses ResolutionPreset.low for the image stream. This is a deliberate performance decision — low-resolution frames process significantly faster, keeping the filter preview smooth at 30 fps on mid-range devices. takePicture() captures at the sensor's native full resolution regardless of this preset.

dart

Future<void> _startCamera(CameraDescription desc) async {

_stopStream();

await cameraCtrl?.dispose();

isInitialized.value = false;

previewBytes.value = null;

_sensorDegrees = desc.sensorOrientation;

cameraCtrl = CameraController(

desc,

ResolutionPreset.low, // stream: low for speed

enableAudio: false,

imageFormatGroup: ImageFormatGroup.yuv420,

);

await cameraCtrl!.initialize();

// Samsung fix: explicitly reset flash to OFF after init.

// Samsung devices default to FlashMode.auto, which fires the flash

// on every capture without this reset.

try {

await cameraCtrl!.setFlashMode(FlashMode.off);

} catch (_) {}

flashMode.value = FlashMode.off;

minZoom.value = await cameraCtrl!.getMinZoomLevel();

maxZoom.value = await cameraCtrl!.getMaxZoomLevel();

zoomLevel.value = minZoom.value;

isInitialized.value = true;

update();

if (selectedFilter.value.type != FilterType.none) _startStream();

}

The stream is only started when a filter other than none (Original) is active. When the user switches back to Original, _stopStream() nulls previewBytes, which makes the filtered overlay disappear and exposes the native CameraPreview underneath.

dart

void _startStream() {

if (cameraCtrl == null || !cameraCtrl!.value.isInitialized) return;

if (_streamActive) return;

_streamActive = true;

cameraCtrl!.startImageStream((CameraImage frame) async {

final bytes = await _liveService.processFrame(

frame, selectedFilter.value.type, _sensorDegrees);

if (bytes != null && _streamActive) previewBytes.value = bytes;

});

}

void _stopStream() {

if (!_streamActive) return;

_streamActive = false;

try { cameraCtrl?.stopImageStream(); } catch (_) {}

previewBytes.value = null;

}

Why _streamActive is a plain bool, not RxBool:

It is a pure internal gate — the view never needs to observe it. Using a plain bool avoids the overhead of notifying zero listeners on every single frame callback.

Camera Controls — Flash, Zoom, Focus, and Flip

Flash Cycling

Flash cycles through four modes: off → auto → always → torch. The flashIcon computed getter drives the top-bar icon reactively — no switch statement needed in the view:

dart

Future<void> cycleFlash() async {

if (cameraCtrl == null || !cameraCtrl!.value.isInitialized) return;

final modes = [FlashMode.off, FlashMode.auto, FlashMode.always, FlashMode.torch];

final next = modes[(modes.indexOf(flashMode.value) + 1) % modes.length];

await cameraCtrl!.setFlashMode(next);

flashMode.value = next;

}

IconData get flashIcon {

switch (flashMode.value) {

case FlashMode.auto: return Icons.flash_auto;

case FlashMode.always: return Icons.flash_on;

case FlashMode.torch: return Icons.flashlight_on;

default: return Icons.flash_off;

}

}

Pinch-to-Zoom

Zoom is clamped between minZoom and maxZoom before being sent to the platform controller, preventing out-of-range exceptions:

dart

Future<void> setZoom(double value) async {

if (cameraCtrl == null) return;

zoomLevel.value = value.clamp(minZoom.value, maxZoom.value);

await cameraCtrl!.setZoomLevel(zoomLevel.value);

}

The _buildRawPreview widget listens to onScaleUpdate and feeds the cumulative scale into setZoom:

dart

onScaleUpdate: (d) =>

controller.setZoom(controller.zoomLevel.value * d.scale),

Tap-to-Focus

Focus and exposure points are normalized to 0.0–1.0 relative coordinates. The tap is captured in _buildRawPreview via onTapUp:

dart

Future<void> setFocusPoint(Offset offset, Size previewSize) async {

if (cameraCtrl == null || !cameraCtrl!.value.isInitialized) return;

try {

await cameraCtrl!.setFocusPoint(Offset(

(offset.dx / previewSize.width).clamp(0.0, 1.0),

(offset.dy / previewSize.height).clamp(0.0, 1.0),

));

} catch (_) {}

}

Grid Toggle

toggleGrid() writes directly to SettingsService, which persists the preference and propagates the reactive change to every Obx subscriber simultaneously — including in the Settings screen if it is open in the background:

dart

void toggleGrid() =>

_settings.setShowGrid(!_settings.showGrid.value);

Filter Selection with Haptics

When a filter is selected, the controller checks SettingsService.enableHaptics before firing HapticFeedback.selectionClick(). The stream is started or stopped based on whether the new filter requires frame processing:

dart

void selectFilter(AiFilterModel filter) {

selectedFilter.value = filter;

if (_settings.enableHaptics.value) {

HapticFeedback.selectionClick();

}

if (filter.type == FilterType.none) {

_stopStream();

} else if (!_streamActive) {

_startStream();

}

}

Capture Flow — Stop Stream, Shoot, Navigate

The capture sequence has three critical steps that must happen in this exact order:

dart

Future<void> captureImage() async {

if (cameraCtrl == null || isCapturing.value) return;

if (!cameraCtrl!.value.isInitialized) return;

try {

isCapturing.value = true;

if (_settings.enableHaptics.value) HapticFeedback.mediumImpact();

// Shutter animation: scale 1.0 → 0.85 → 1.0 over 150ms

shutterAnimCtrl.forward().then((_) => shutterAnimCtrl.reverse());

// Step 1: Stop the image stream BEFORE takePicture().

// On Android, the stream and takePicture() cannot run simultaneously.

// Failing to stop the stream first causes "getSurface() on a null

// object reference" on Samsung and other OEM devices.

_stopStream();

// Step 2: Capture at full sensor resolution.

// takePicture() always uses native full resolution on Android,

// regardless of the ResolutionPreset set on the controller

// (which only controls the preview/stream resolution).

final xFile = await cameraCtrl!.takePicture();

// Step 3: Navigate to the filter editing screen with the image path

// and the currently active filter as preset.

Get.toNamed(AppRoutes.FILTER, arguments: {

'imagePath': xFile.path,

'presetFilterName': selectedFilter.value.type.name,

});

} catch (e) {

Get.snackbar('Capture Failed', e.toString(),

snackPosition: SnackPosition.BOTTOM);

// Restart the stream so the live preview recovers if capture failed.

if (selectedFilter.value.type != FilterType.none) _startStream();

} finally {

isCapturing.value = false;

}

}

Why not use a separate high-resolution CameraController for capture? Creating a second CameraController and immediately disposing it corrupts the ImageReader surface reference on Samsung devices, causing a getSurface() on a null object reference crash. The single-controller approach with stream-stop-before-capture is the correct and reliable pattern.

Building the Camera View

CameraView is a GetView<CameraViewController> — a zero-boilerplate base class that wires the controller getter automatically. _CameraBody splits the screen into an Expanded preview area and a fixed _BottomPanel, ensuring the filter strip and shutter button never overlap the viewfinder on any screen size.

dart

class _CameraBody extends StatelessWidget {

final CameraViewController controller;

const _CameraBody({required this.controller});

@override

Widget build(BuildContext context) {

return Column(

children: [

Expanded(child: _PreviewStack(controller: controller)),

_BottomPanel(controller: controller),

],

);

}

}

The Preview Stack — Six Layers That Work as One

_PreviewStack is the heart of the camera UI. It renders six layers inside a Stack(fit: StackFit.expand), each responsible for exactly one concern:

Layer 1 — Raw CameraPreview : (always present — handles AF/AE/zoom)

Layer 2 — Filtered frame overlay : (covers Layer 1 when previewBytes != null)

Layer 3 — Rule-of-thirds grid : (conditional on showGrid)

Layer 4 — Top bar : (flash icon, title, back button)

Layer 5 — Zoom level badge : (top-right, hidden when maxZoom ≤ 1.01)

Layer 6 — Live filter pill : (bottom-center, hidden when Original selected)

Why always render the raw CameraPreview even when a filter is active?

The native CameraPreview layer handles autofocus, auto-exposure, and pinch-to-zoom at the platform level. Hiding it or building it conditionally would break these features. The filtered overlay simply sits on top and covers it completely — the raw preview keeps doing its job invisibly underneath.

Layer 1: Raw Preview with Correct Aspect Ratio

On Android, previewSize is returned in landscape orientation (width > height). Swapping width and height inside SizedBox before wrapping with FittedBox.cover ensures the preview fills the portrait screen correctly without pillarboxing:

dart

Widget _buildRawPreview(BuildContext context) {

final ctrl = controller.cameraCtrl!;

final prev = ctrl.value.previewSize;

return GestureDetector(

onTapUp: (d) => controller.setFocusPoint(

d.localPosition, MediaQuery.of(context).size),

onScaleUpdate: (d) =>

controller.setZoom(controller.zoomLevel.value * d.scale),

child: SizedBox.expand(

child: FittedBox(

fit: BoxFit.cover,

child: SizedBox(

// Swap width/height: previewSize is landscape on Android

width: prev != null ? prev.height : 1,

height: prev != null ? prev.width : 1,

child: CameraPreview(ctrl),

),

),

),

);

}

Layer 2: Filtered Overlay

SizedBox.expand is critical here. Without it, Image.memory sizes itself to the image's intrinsic dimensions inside the Stack, leaving visible gaps at the edges. gaplessPlayback: true prevents Flutter from flashing a blank white frame between each buffer update — essential for a smooth 30 fps filtered preview.

dart

Obx(() {

final bytes = controller.previewBytes.value;

if (bytes == null) return const SizedBox.shrink();

return SizedBox.expand(

child: Image.memory(

bytes,

fit: BoxFit.cover,

gaplessPlayback: true, // no white flash between frames ), ); }),

Layer 6: Live Filter Pill with Pulsing Dot

The live filter pill appears at the bottom of the viewfinder when any filter other than Original is active. It shows the filter name alongside a pulsing dot that animates between 40% and 100% opacity at 900ms intervals, signaling to the user that the preview is live:

dart

class _LiveDotState extends State<_LiveDot>

with SingleTickerProviderStateMixin {

late AnimationController _anim;

@override

void initState() {

super.initState();

_anim = AnimationController(

vsync: this, duration: const Duration(milliseconds: 900))

..repeat(reverse: true); }

@override

Widget build(BuildContext context) {

return AnimatedBuilder(

animation: _anim,

builder: (_, __) => Container(

width: 8, height: 8,

decoration: BoxDecoration(

shape: BoxShape.circle,

color: widget.color.withOpacity(0.4 + 0.6 * _anim.value), ), ), );

}

}

The Filter Strip UI

_FilterStrip is a horizontal ListView of animated filter tiles rendered in the _BottomPanel. Each tile shows the filter's icon and name, with its unique gradient colors sourced from AiFilterModel. An AnimatedContainer with a 180ms duration handles the selection state transition — no manual setState or AnimationController needed per tile.

dart

AnimatedContainer(

duration: const Duration(milliseconds: 180),

width: 62,

margin: const EdgeInsets.only(right: 8),

decoration: BoxDecoration(

borderRadius: BorderRadius.circular(10),

border: Border.all(

color: isSelected ? filter.gradientColors.last : Colors.white12,

width: isSelected ? 2 : 1, ),

gradient: LinearGradient(

begin: Alignment.topLeft,

end: Alignment.bottomRight,

colors: isSelected

? filter.gradientColors

: [

filter.gradientColors.first.withOpacity(0.35),

filter.gradientColors.last.withOpacity(0.35),

], ), ),

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Icon(filter.icon,

color: Colors.white.withOpacity(isSelected ? 1.0 : 0.55),

size: 22),

const SizedBox(height: 4),

Text(filter.name,

style: TextStyle(

color: isSelected ? Colors.white : Colors.white54,

fontSize: 9,

fontWeight: isSelected ? FontWeight.w700 : FontWeight.w400, ),

maxLines: 1,

overflow: TextOverflow.ellipsis,

textAlign: TextAlign.center), ], ), ),

A filter name label sits above the strip, showing the active filter’s name in its gradient color, or “Original” in muted white when no filter is active. A small gradient dot beside the name matches the filter’s color:

dart

Obx(() {

final f = controller.selectedFilter.value;

return Row(

mainAxisAlignment: MainAxisAlignment.center,

children: [

if (f.type != FilterType.none)

Container(

width: 8, height: 8,

margin: const EdgeInsets.only(right: 6),

decoration: BoxDecoration(

shape: BoxShape.circle,

gradient: LinearGradient(colors: f.gradientColors),

),

),

Text(

f.type == FilterType.none ? 'Original' : f.name,

style: TextStyle(

color: f.type == FilterType.none

? Colors.white38

: f.gradientColors.last,

fontSize: 11,

fontWeight: FontWeight.w600,

letterSpacing: 0.5,

),

),

],

);

}),

The Rule-of-Thirds Grid Overlay

The grid is drawn by _GridPainter, a CustomPainter that draws two vertical and two horizontal lines at one-third and two-thirds of the canvas dimensions. It never repaints — shouldRepaint returns false because the grid lines are static. Only the Obx wrapper rebuilds when showGrid changes, mounting or unmounting the painter entirely:

dart

class _GridPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

final p = Paint()

..color = Colors.white.withOpacity(0.25)

..strokeWidth = 0.6;

for (int i = 1; i < 3; i++) {

canvas.drawLine(

Offset(size.width * i / 3, 0),

Offset(size.width * i / 3, size.height),

p,

);

canvas.drawLine(

Offset(0, size.height * i / 3),

Offset(size.width, size.height * i / 3),

p,

);

}

}

@override

bool shouldRepaint(covariant CustomPainter _) => false;

}

Because toggleGrid() writes to SettingsService which persists the value, the grid preference survives app restarts. A photographer who always shoots with the grid enabled sets it once in Settings and never thinks about it again.

Performance Optimization: Processing Frames Without Jank

1. ResolutionPreset.low for the Stream

The stream controller is initialized with ResolutionPreset.low (typically 352×288 on Android). Processing a 352×288 frame is approximately 10× faster than processing a 1080p frame, keeping the filter pipeline smooth at 30 fps on mid-range devices. takePicture() captures at the sensor's native full resolution regardless.

2. The _streamActive Gate

The boolean gate inside _startStream ensures exactly one frame is processed at a time. If LiveFilterService.processFrame() is still running when the next CameraImage arrives, that frame is silently dropped. This prevents queue buildup that would cause increasing memory pressure and latency:

dart

cameraCtrl!.startImageStream((CameraImage frame) async {

final bytes = await _liveService.processFrame(

frame, selectedFilter.value.type, _sensorDegrees);

if (bytes != null && _streamActive) previewBytes.value = bytes;

});

3. Stop Stream Before Capture

The stream is explicitly stopped before takePicture(). On Android, running the image stream and takePicture() simultaneously attempts to write to two surfaces at once, causing crashes on Samsung, Xiaomi, and other OEM devices. The stream is restarted in the catch block to recover the live preview if capture fails for any reason.

4. gaplessPlayback: true

Without this flag, Flutter disposes the previous image decoder and creates a new one for every frame, producing a brief white flash at 30 fps. gaplessPlayback: true keeps the previous frame visible while the new one decodes, eliminating the strobe entirely.

5. shouldRepaint Returns false on the Grid Painter

The _GridPainter draws static lines that never change. Returning false from shouldRepaint tells Flutter's render tree never to call paint() again after the first draw, saving one canvas operation per frame while the grid is visible.

Real-World Use Cases

Smart Camera Apps with AI Filters find practical application across many product domains.

1. Social and Content Creation Apps Creators applying brand-consistent filters before posting eliminate the need for third-party editing apps. The live preview means what they see is exactly what gets captured — no surprises after the shutter.

2. E-Commerce Product Photography Sellers photographing products with warm or vivid filters generate shelf-ready images directly from their phone, bypassing any desktop editing step entirely.

3. Healthcare and Telemedicine Skin condition monitoring apps can apply edge-detect or enhanced-contrast filters to surface details in photos submitted by patients during remote consultations — all processed on-device with zero cloud upload.

4. Real Estate and Property Agents photographing properties with consistent warm filters and an organized gallery module can share curated photo albums directly from the app to prospective buyers.

5. EdTech and Document Scanning Grayscale and sketch filters, combined with a crop step in the filter editing screen, convert whiteboard photos and handwritten notes into clean, readable study documents instantly.

6. Events and Hospitality Event photo booths built on Flutter can offer guests a selection of branded AI filters, capturing and sharing in one tap — fully offline with no cloud dependency.

7. Security and Inspection Field inspection engineers applying edge-detect filters surface cracks and structural anomalies in photographs, creating annotated records on-device for compliance and insurance documentation.

8. Fashion and Retail In-store stylists can photograph outfits with vivid or cool filters matching brand aesthetics, then share directly from the gallery screen to a client-facing channel.

Common Mistakes to Avoid

1. Not Stopping the Stream Before takePicture()

Running the image stream and takePicture() simultaneously is the single most common crash in Flutter camera apps. On many Android OEM devices it causes getSurface() on a null object reference.

dart

// WRONG: stream still running when takePicture() fires

final xFile = await cameraCtrl!.takePicture();

// CORRECT: stop stream first, then capture

_stopStream();

final xFile = await cameraCtrl!.takePicture();

2. Not Resetting Flash Mode After initialize()

Samsung and some other Android OEM devices default to FlashMode.auto after CameraController.initialize(). Without an explicit reset, the flash fires on every capture.

dart

// WRONG: flash fires unexpectedly on Samsung devices

await cameraCtrl!.initialize();

// CORRECT: explicitly set flash OFF after init

await cameraCtrl!.initialize();

try { await cameraCtrl!.setFlashMode(FlashMode.off); } catch (_) {}

flashMode.value = FlashMode.off;

3. Not Using gaplessPlayback: true for the Filtered Preview

Without gaplessPlayback: true, Image.memory creates a new decoder for every incoming frame, producing a white strobe effect at 30 fps that makes the live filter preview unusable.

dart

// WRONG: white flash between every frame

Image.memory(bytes, fit: BoxFit.cover)

// CORRECT: keep previous frame while next frame decodes

Image.memory(bytes, fit: BoxFit.cover, gaplessPlayback: true)

4. Not Wrapping Image.memory in SizedBox.expand

Without SizedBox.expand, Image.memory inside a Stack sizes itself to its intrinsic image dimensions instead of filling the available space, leaving visible gaps around the edges of the viewfinder.

dart

// WRONG: image leaves gaps at edges

Image.memory(bytes, fit: BoxFit.cover, gaplessPlayback: true)

// CORRECT: force image to fill the Stack cell before BoxFit.cover scales it

SizedBox.expand(

child: Image.memory(bytes, fit: BoxFit.cover, gaplessPlayback: true),

)

5. Using AnimatedSwitcher + ValueKey for the Filtered Preview

AnimatedSwitcher with a ValueKey on a widget that updates 30 times per second causes a full layout reset on every frame, producing visible jitter. Always render both the raw preview and the filtered overlay simultaneously — let the overlay cover the raw preview rather than switching between them.

dart

// WRONG: layout reset every frame at 30fps

AnimatedSwitcher(

duration: Duration(milliseconds: 100),

child: bytes != null

? Image.memory(bytes, key: ValueKey(bytes.hashCode))

: CameraPreview(ctrl),

)

// CORRECT: both layers always present; overlay covers raw when active

Stack(children: [

_buildRawPreview(context),

Obx(() {

final bytes = controller.previewBytes.value;

if (bytes == null) return const SizedBox.shrink();

return SizedBox.expand(

child: Image.memory(bytes, fit: BoxFit.cover, gaplessPlayback: true));

}),

])

6. Not Disposing CameraController in onClose()

A CameraController that is not disposed continues consuming the camera hardware after navigation, prevents other apps from accessing the camera, and leaks platform channels silently.

dart

@override

void onClose() {

_stopStream(); // stop stream before dispose

cameraCtrl?.dispose(); // release camera hardware

shutterAnimCtrl.dispose(); // release animation ticker

super.onClose();

}

7. Creating a Second CameraController for High-Resolution Capture

A common pattern seen in tutorials is creating a second CameraController with ResolutionPreset.high solely for capture. On Samsung devices, creating and disposing a second controller corrupts the ImageReader surface reference, causing getSurface() on a null object reference. Use a single controller — takePicture() always captures at full sensor resolution regardless of the stream preset.

dart

// WRONG: second controller corrupts surface reference on Samsung

final hiRes = CameraController(desc, ResolutionPreset.high);

await hiRes.initialize();

final file = await hiRes.takePicture();

await hiRes.dispose();

// CORRECT: single controller, takePicture() is always full resolution

_stopStream();

final file = await cameraCtrl!.takePicture();

Download the Complete Source Code

The complete source code for this Flutter Smart Camera AI app is available on GitHub.

Repository Structure:

smart_camera_app/

├── lib/

│ ├── main.dart

│ └── app/

│ ├── bindings/

│ │ └── initial_binding.dart

│ ├── data/

│ │ ├── models/

│ │ │ └── ai_filter_model.dart

│ │ └── services/

│ │ ├── face_detection_service.dart

│ │ ├── filter_service.dart

│ │ ├── gallery_service.dart

│ │ ├── live_filter_service.dart

│ │ └── settings_service.dart

│ ├── modules/

│ │ ├── camera/

│ │ │ ├── camera_binding.dart

│ │ │ ├── camera_controller.dart

│ │ │ └── camera_view.dart

│ │ ├── filter/

│ │ │ ├── filter_binding.dart

│ │ │ ├── filter_controller.dart

│ │ │ └── filter_view.dart

│ │ ├── gallery/

│ │ │ ├── gallery_binding.dart

│ │ │ └── gallery_view.dart

│ │ ├── home/

│ │ │ ├── home_binding.dart

│ │ │ ├── home_controller.dart

│ │ │ └── home_view.dart

│ │ └── settings/

│ │ ├── settings_binding.dart

│ │ └── settings_view.dart

│ ├── routes/

│ │ ├── app_pages.dart

│ │ └── app_routes.dart

│ └── widgets/

│ ├── face_overlay_painter.dart

│ └── filter_chip_bar.dart

├── android/

├── ios/

├── pubspec.yaml

└── README.md

Quick Start:

bash

# Clone the repository

git clone https://github.com/onlykrishna/Smart_Camera_APP.git

# Navigate to project

cd Smart_Camera_APP

# Install dependencies

flutter pub get

# iOS only (macOS)

cd ios && pod install && cd ..

# Run on a physical device — emulators do not expose real camera hardware

flutter run

Important:

Always test on a physical device. Android and iOS emulators simulate the camera using a still-image loop and do not expose the YUV420 stream required for real-time filter processing. Performance characteristics on emulators also bear no resemblance to real device behavior.

Conclusion and Next Steps

Building a smart camera app in Flutter comes down to three things done well: a properly managed CameraController that never fights the platform, a frame-gated processing pipeline that keeps the UI thread free, and a reactive UI architecture that reads from a single source of truth in SettingsService — so settings changes propagate instantly to every screen without any message passing.

The architecture described in this guide is intentionally scalable. Adding a new filter requires one new FilterType enum value, one AiFilterModel entry, and one case in LiveFilterService.processFrame(). The filter strip, live pill, and filter editing screen all update automatically. No other changes needed.

Key Takeaways:

Always stop the image stream before takePicture() — this is the most common Android camera crash

Reset flash to FlashMode.off explicitly after initialize() — Samsung devices default to auto

Use ResolutionPreset.low for the stream; let takePicture() capture at full sensor resolution

Wrap Image.memory in SizedBox.expand to fill the preview area without gaps

Set gaplessPlayback: true on Image.memory to eliminate the 30 fps white strobe

Never use AnimatedSwitcher + ValueKey on a widget that updates 30 times per second

Dispose CameraController, AnimationController, and the stream in onClose() — every single one

Expose settings as reactive RxBool aliases in the controller so the view never needs to know where data lives

Extend This Foundation With:

Face detection overlays

use FaceDetectionService + FaceOverlayPainter already in the project to draw landmarks on detected faces in the live preview

Video recording with filters

extend LiveFilterService to encode processed frames into an MP4 using ffmpeg_kit_flutter

AI scene detection

use google_mlkit_image_labeling to detect the scene type (food, landscape, portrait) and auto-suggest the most flattering filter

Cloud backup

sync the gallery to Firebase Storage with delta sync so users never lose a shot

Biometric lock

gate gallery access behind fingerprint or face authentication with local_auth

AR stickers

extend FaceOverlayPainter to draw positioned stickers anchored to detected face landmarks

References

camera — Flutter camera plugin: camera | Flutter package

A Flutter plugin for controlling the camera. Supports previewing the camera feed, capturing images and video, and…pub.dev

image — Pure Dart image processing library: image | Dart package

Dart Image Library provides server and web apps the ability to load, manipulate, and save images with various image…pub.dev

get — GetX state management and navigation: get | Flutter package

Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX.pub.dev

permission_handler — Cross-platform permission management:

permission_handler | Flutter package

Permission plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API to request and check…pub.dev

image_gallery_saver — Save images to device gallery:

image_gallery_saver package – All Versions

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and…pub.dev

google_mlkit_image_labeling — On-device ML Kit inference: \

google_mlkit_image_labeling | Flutter package

A Flutter plugin to use Google's ML Kit Image Labeling to detect and extract information about entities in an image…pub.dev

path_provider — Filesystem path resolution:

path_provider | Flutter package

Flutter plugin for getting commonly used locations on host platform file systems, such as the temp and app data…pub.dev

Connect With Us

Feel free to connect with us:And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project hourly or full-time as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---

Need help building production-grade Flutter apps? FlutterDevs helps teams ship faster with solid architecture, better UX, and practical AI features. Reach us at support@flutterdevs.com.

How to Add Text Recognition (OCR) in Flutter Apps:

Complete Guide !!

If you’re looking for the best Flutter app development company for your mobile application then feel free to

Introduction

What Is OCR and Why Does It Matter in Flutter

Choosing the Right OCR Package

Setting Up Google ML Kit Text Recognition

Handling Runtime Permissions

Scanning Text from Camera in Real Time

Scanning Text from Gallery Images

Handling Multi-Language OCR

Tesseract OCR as an Alternative

Post-Processing Recognized Text

Real-World Use Cases

Common Mistakes to Avoid

Conclusion

References

Introduction:

Text recognition, commonly known as OCR (Optical Character Recognition), is one of the most powerful capabilities you can add to a Flutter mobile application. From scanning business cards and extracting invoice data to reading printed documents and digitizing handwritten notes, OCR opens a wide range of intelligent features that make your app significantly more useful.

Flutter, backed by Google’s ecosystem, has excellent support for on-device OCR through the ML Kit plugin. This guide walks you through adding text recognition to your Flutter app from scratch, covering setup, camera integration, gallery image scanning, multilingual support, permission handling, and real-world architecture patterns. Every step is explained with clean code examples and practical insights so you can ship this feature confidently.

What you’ll learn:

Setting up Google ML Kit for text recognition

Handling camera and storage permissions properly

Implementing real-time camera OCR with performance optimization

Processing images from gallery and camera

Extracting structured data (emails, phone numbers, URLs)

Multi-language support

Common pitfalls and how to avoid them

What Is OCR and Why Does It Matter in Flutter:

OCR is the process of converting images containing printed or handwritten text into machine-readable string data. In a Flutter context, this means your app can take a photo — either from the live camera or from the user’s gallery — and extract all readable text from it automatically.

This capability matters because it removes manual data entry from user workflows. Instead of typing a long product code, an email address from a business card, or a tracking number from a label, the user simply points their camera at it. The app handles the rest. This dramatically improves user experience, reduces input errors, and enables automation at the edge, directly on the user’s device without any server call required.

Key Benefits:

Improved User Experience: Eliminates tedious manual typing

Reduced Errors: Automated extraction is more accurate than manual entry

Offline Capability: Works fully on-device without internet connection

Privacy-Friendly: No data sent to external servers

Fast Processing: Real-time recognition with ML Kit

Choosing the Right OCR Package:

Flutter developers have two primary choices for OCR:

Google ML Kit (Recommended):

Package: google_mlkit_text_recognition

Pros:

Fast, accurate, on-device recognition

Supports Latin and non-Latin scripts (Chinese, Japanese, Korean, Devanagari)

Runs fully offline

Tight integration with Flutter camera ecosystem

Regular updates and strong community support

Minimal setup overhead

Cons:

Limited to scripts supported by Google ML Kit

Less configurable than Tesseract

Tesseract OCR:

Package: flutter_tesseract_ocr

Pros:

Open-source engine maintained by Google

Supports over 100 languages

Highly configurable

Mature and battle-tested

Cons:

Generally slower than ML Kit

Requires bundling language data files (increases app size)

More complex setup

Recommendation: For most production apps, Google ML Kit is the recommended starting point due to its speed, accuracy, and minimal setup overhead. Consider Tesseract only when you need deep language support or highly customized OCR pipelines.

Setting Up Google ML Kit Text Recognition

Step 1: Add Dependencies:

Add the required dependencies to your pubspec.yaml file:

yaml

dependencies:

flutter:

sdk: flutter

# OCR and ML Kit

google_mlkit_text_recognition: ^0.11.0

# Image handling

image_picker: ^1.0.4

camera: ^0.10.5+5

# Permissions

permission_handler: ^11.0.1

# File paths (optional)

path_provider: ^2.1.1

Run flutter pub get to install the dependencies.

Step 2: Android Configuration

Minimum SDK Version:

Ensure your minSdkVersion is set to at least 21 in android/app/build.gradle.kts:

kotlin:

android {

defaultConfig {

minSdk = 21 // Required for ML Kit

targetSdk = 36

}

}

Gradle Version Requirements:

ML Kit requires specific Gradle versions. Update android/settings.gradle.kts:

kotlin

plugins {

id("dev.flutter.flutter-plugin-loader") version "1.0.0"

id("com.android.application") version "8.9.1" apply false

id("org.jetbrains.kotlin.android") version "1.9.24" apply false

}

Update android/gradle/wrapper/gradle-wrapper.properties:

properties

distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip

Permissions:

Add the following to android/app/src/main/AndroidManifest.xml:

xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

<!– Camera Permission –>

<uses-permission android:name="android.permission.CAMERA" />

<!– Storage Permissions –>

<uses-permission

android:name="android.permission.READ_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"

android:maxSdkVersion="32" />

<!– Camera Features →

<uses-feature

android:name="android.hardware.camera"

android:required="false" />

<uses-feature

android:name="android.hardware.camera.autofocus"

android:required="false" />

<application>

<!– Your app configuration –>

</application>

</manifest>

Step 3: iOS Configuration:

Minimum iOS Version:

Set minimum iOS version to 12.0 in ios/Podfile:

ruby

platform :ios, '12.0'

Permissions:

Add the following to your ios/Runner/Info.plist:

xml

<key>NSCameraUsageDescription</key>

<string>

Camera access is required for real-time text recognition and capturing images for OCR processing.

</string>

<key>NSPhotoLibraryUsageDescription</key>

<string>

Photo library access is required to select images for text recognition.

</string>

<key>NSPhotoLibraryAddUsageDescription</key>

<string>

Photo library access is required to save processed images.

</string>

Handling Runtime Permissions:

Before accessing the camera or photo library, you must request permissions at runtime. Here’s how to handle this properly:

Permission Request Implementation:

dart:

import 'package:permission_handler/permission_handler.dart';

class PermissionHandler {

Future<bool> requestCameraPermission(BuildContext context) async {

final status = await Permission.camera.request();

if (status.isGranted) {

return true;

} else if (status.isDenied) {

_showPermissionDialog(context, 'Camera');

return false;

} else if (status.isPermanentlyDenied) {

_showSettingsDialog(context, 'Camera');

return false;

}

return false;

}

Future<bool> requestStoragePermission(BuildContext context) async {

final status = await Permission.photos.request();

if (status.isGranted) {

return true;

}

else if (status.isDenied) {

_showPermissionDialog(context, 'Photo Library');

return false;

} else if (status.isPermanentlyDenied) {

_showSettingsDialog(context, 'Photo Library');

return false;

}

return false;

}

void _showPermissionDialog(BuildContext context, String permission) {

showDialog(

context: context,

builder: (context) => AlertDialog(

title: Text('$permission Permission Required'),

content: Text(

'This app needs $permission access to perform OCR.

Please grant permission.',

),

actions: [

TextButton(

onPressed: () => Navigator.of(context).pop(),

child: const Text('Cancel'),

),

TextButton(

onPressed: () {

Navigator.of(context).pop();

// Request permission again

},

child: const Text('Allow'),

),

],

),

);

}

void _showSettingsDialog(BuildContext context, String permission) {

showDialog(

context: context,

builder: (context) => AlertDialog(

title: Text('$permission Permission Denied'),

content: Text(

'Please enable $permission permission in app settings.',),

actions: [

TextButton(

onPressed: () => Navigator.of(context).pop(),

child: const Text('Cancel'),

),

TextButton(

onPressed: () {

Navigator.of(context).pop();

openAppSettings();

},

child: const Text('Open Settings'),

),

],

),

);}

}

This ensures your app handles permissions gracefully on both Android and iOS.

Scanning Text from Camera in Real Time:

Real-time OCR from a camera feed requires setting up a CameraController and processing frames as they arrive. Here's a complete working implementation with proper permission handling and error management.

Complete Live OCR Implementation:

dart

import 'package:flutter/material.dart';

import 'package:camera/camera.dart';

import 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart';

import 'package:permission_handler/permission_handler.dart';

import 'dart:ui' as ui;

import 'package:flutter/services.dart';

class LiveOCRScreen extends StatefulWidget {

const LiveOCRScreen({super.key});

@override

State<LiveOCRScreen> createState() => _LiveOCRScreenState(); }

class _LiveOCRScreenState extends State<LiveOCRScreen> {

CameraController? _cameraController;

final TextRecognizer _textRecognizer = TextRecognizer();

String _recognizedText = '';

bool _isProcessing = false;

bool _isCameraInitialized = false;

bool _isDetecting = true;

@override

void initState() {

super.initState();

_requestCameraPermission();

}

Future<void> _requestCameraPermission() async {

final status = await Permission.camera.request();

if (status.isGranted) {

_initCamera();

} else {

_showPermissionDeniedDialog();

}

}

void _showPermissionDeniedDialog() {

showDialog(

context: context,

builder: (context) => AlertDialog(

title: const Text('Camera Permission Required'),

content: const Text(

'This app needs camera access to perform real-time OCR.

Please grant camera permission in settings.',

),

actions: [

TextButton(

onPressed: () {

Navigator.of(context).pop();

Navigator.of(context).pop(); },

child: const Text('Cancel'), ),

TextButton(

onPressed: () {

Navigator.of(context).pop();

openAppSettings();

},

child: const Text('Open Settings'),

),

],

),

); }

Future<void> _initCamera() async {

try {

final cameras = await availableCameras();

if (cameras.isEmpty) {

_showError('No cameras found on this device');

return;

}

_cameraController = CameraController(

cameras[0],

ResolutionPreset.high,

enableAudio: false,

imageFormatGroup: ImageFormatGroup.nv21,

);

await _cameraController!.initialize();

if (!mounted) return;

setState(() {

_isCameraInitialized = true;

});

_cameraController!.startImageStream(_processFrame);

} catch (e) {

_showError('Failed to initialize camera: $e');

}

}

void _showError(String message) {

if (!mounted) return;

ScaffoldMessenger.of(context).showSnackBar(

SnackBar(

content: Text(message),

backgroundColor: Colors.red, ),

); }

Future<void> _processFrame(CameraImage image) async {

if (_isProcessing || !_isDetecting) return;

_isProcessing = true;

try {

final inputImage = _convertToInputImage(image);

if (inputImage == null) {

_isProcessing = false;

return; }

final RecognizedText result = await _textRecognizer.processImage(inputImage);

if (mounted) {

setState(() {

_recognizedText = result.text;

}); }

} catch (e) {

debugPrint('Error processing frame: $e');

} finally {

_isProcessing = false; }

}

InputImage? _convertToInputImage(CameraImage image) {

try {

final WriteBuffer allBytes = WriteBuffer();

for (final plane in image.planes) {

allBytes.putUint8List(plane.bytes); }

final bytes = allBytes.done().buffer.asUint8List();

final imageSize = ui.Size(

image.width.toDouble(),

image.height.toDouble(), );

const imageRotation = InputImageRotation.rotation0deg;

final inputImageFormat = InputImageFormatValue.fromRawValue(image.format.raw) ??

InputImageFormat.nv21;

final metadata = InputImageMetadata(

size: imageSize,

rotation: imageRotation,

format: inputImageFormat,

bytesPerRow: image.planes.first.bytesPerRow, );

return InputImage.fromBytes(

bytes: bytes,

metadata: metadata, );

} catch (e) {

debugPrint('Error converting image: $e');

return null;

}

}

void _toggleDetection() {

setState(() {

_isDetecting = !_isDetecting;

if (!_isDetecting) {

_recognizedText = '';

}

});

}

void _copyToClipboard() {

if (_recognizedText.isNotEmpty) {

Clipboard.setData(ClipboardData(text: _recognizedText));

ScaffoldMessenger.of(context).showSnackBar(

const SnackBar(

content: Text('Text copied to clipboard!'),

duration: Duration(seconds: 2),

),

);

}

}

@override

void dispose() {

_cameraController?.dispose();

_textRecognizer.close();

super.dispose();

}

@override

Widget build(BuildContext context) {

if (!_isCameraInitialized) {

return const Scaffold(

body: Center(child: CircularProgressIndicator()),

);

}

return Scaffold(

appBar: AppBar(

title: const Text('Live Camera OCR'),

actions: [

IconButton(

icon: Icon(_isDetecting ? Icons.pause : Icons.play_arrow),

onPressed: _toggleDetection,

tooltip: _isDetecting ? 'Pause Detection' : 'Resume Detection',

),

],

),

body: Stack(

children: [

// Camera Preview

SizedBox(

width: double.infinity,

height: double.infinity,

child: CameraPreview(_cameraController!), ),

// Scanning Guide

Center(

child: Container(

width: MediaQuery.of(context).size.width * 0.8,

height: 200,

decoration: BoxDecoration(

border: Border.all(

color: _isDetecting ? Colors.green : Colors.grey,

width: 2, ),

borderRadius: BorderRadius.circular(12), ), ),),

// Recognized Text Display

Positioned(

bottom: 0,

left: 0,

right: 0,

child: Container(

padding: const EdgeInsets.all(20),

decoration: BoxDecoration(

color: Colors.black.withOpacity(0.85),

borderRadius: const BorderRadius.only(

topLeft: Radius.circular(20),

topRight: Radius.circular(20),

),

),

child: Column(

mainAxisSize: MainAxisSize.min,

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: [

const Text(

'Recognized Text',

style: TextStyle(

color: Colors.white,

fontSize: 18,

fontWeight: FontWeight.bold, ), ),

if (_recognizedText.isNotEmpty)

IconButton(

icon: const Icon(Icons.copy, color: Colors.white),

onPressed: _copyToClipboard,

),

],

),

const SizedBox(height: 10),

Text(

_recognizedText.isEmpty

? 'Point camera at text within the green frame'

: _recognizedText,

style: TextStyle(

color: _recognizedText.isEmpty

? Colors.white54

: Colors.white,

fontSize: 16,

),

),

],

),

),

),

],

),

);

}

}

Key Implementation Details:

Frame Throttling: The _isProcessing flag ensures only one frame is processed at a time, preventing performance issues and battery drain.

Error Handling: Try-catch blocks prevent crashes from camera or ML Kit errors.

Resource Management: Camera and text recognizer are properly disposed in the dispose() method.

User Controls: Pause/resume button allows users to control detection, and copy button enables easy text copying.

Scanning Text from Gallery Images:

For scanning static images selected from the gallery or captured with the camera, the workflow is simpler and more straightforward. This implementation includes both gallery selection and camera capture options.

Complete Gallery OCR Implementation:

dart

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'package:image_picker/image_picker.dart';

import 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart';

import 'dart:io';

class GalleryOCRScreen extends StatefulWidget {

const GalleryOCRScreen({super.key});

@override

State<GalleryOCRScreen> createState() => _GalleryOCRScreenState();

}

class _GalleryOCRScreenState extends State<GalleryOCRScreen> {

final ImagePicker _picker = ImagePicker();

final TextRecognizer _textRecognizer = TextRecognizer();

String _extractedText = '';

File? _selectedImage;

bool _isProcessing = false;

List<String> _extractedEmails = [];

List<String> _extractedPhones = [];

List<String> _extractedUrls = [];

Future<void> _pickImageFromGallery() async {

try {

final XFile? pickedFile = await _picker.pickImage(

source: ImageSource.gallery,

imageQuality: 85,

);

if (pickedFile == null) return;

setState(() {

_selectedImage = File(pickedFile.path);

_isProcessing = true;

});

await _processImage(pickedFile.path);

} catch (e) {

_showError('Failed to pick image: $e');

} finally {

setState(() {

_isProcessing = false;

}); }

}

Future<void> _pickImageFromCamera() async {

try {

final XFile? pickedFile = await _picker.pickImage(

source: ImageSource.camera,

imageQuality: 85,

);

if (pickedFile == null) return;

setState(() {

_selectedImage = File(pickedFile.path);

_isProcessing = true;

});

await _processImage(pickedFile.path);

} catch (e) {

_showError('Failed to capture image: $e');

} finally {

setState(() {

_isProcessing = false;

}); } }

Future<void> _processImage(String imagePath) async {

try {

final InputImage inputImage = InputImage.fromFilePath(imagePath);

final RecognizedText result = await _textRecognizer.processImage(inputImage);

final cleanedText = _cleanOCROutput(result.text);

setState(() {

_extractedText = cleanedText;

});

_extractStructuredData(cleanedText);

} catch (e) {

_showError('Failed to process image: $e');

}

}

String _cleanOCROutput(String rawText) {

// Remove extra whitespace and blank lines

String cleaned = rawText

.split('\n')

.map((line) => line.trim())

.where((line) => line.isNotEmpty)

.join('\n');

return cleaned;

}

void _extractStructuredData(String text) {

// Extract emails

final emailRegex = RegExp(

r'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}',

);

final emails = emailRegex

.allMatches(text)

.map((m) => m.group(0)!)

.toSet()

.toList();

// Extract phone numbers

final phoneRegex = RegExp(

r'[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}',

);

final phones = phoneRegex

.allMatches(text)

.map((m) => m.group(0)!)

.toSet()

.toList();

// Extract URLs

final urlRegex = RegExp( r'https?://[^\s]+|www\.[^\s]+', );

final urls = urlRegex

.allMatches(text)

.map((m) => m.group(0)!)

.toSet()

.toList();

setState(() {

_extractedEmails = emails;

_extractedPhones = phones;

_extractedUrls = urls;

}); }

void _showError(String message) {

ScaffoldMessenger.of(context).showSnackBar(

SnackBar(

content: Text(message),

backgroundColor: Colors.red,

),

);

}

void _copyToClipboard(String text) {

Clipboard.setData(ClipboardData(text: text));

ScaffoldMessenger.of(context).showSnackBar(

const SnackBar(

content: Text('Copied to clipboard!'),

duration: Duration(seconds: 2),

),

);

}

@override

void dispose() {

_textRecognizer.close();

super.dispose();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Gallery OCR'),

),

body: SingleChildScrollView(

child: Padding(

padding: const EdgeInsets.all(16.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.stretch,

children: [

// Image picker buttons

if (_selectedImage == null) …[

const SizedBox(height: 20),

const Text(

'Select an Image',

textAlign: TextAlign.center,

style: TextStyle(

fontSize: 24,

fontWeight: FontWeight.bold,

),

),

const SizedBox(height: 40),

Row(

children: [

Expanded(

child: ElevatedButton.icon(

onPressed: _pickImageFromGallery,

icon: const Icon(Icons.photo_library),

label: const Text('Gallery'),

),

),

const SizedBox(width: 16),

Expanded(

child: ElevatedButton.icon(

onPressed: _pickImageFromCamera,

icon: const Icon(Icons.camera_alt),

label: const Text('Camera'),

),

),

],

),

],

// Selected image display

if (_selectedImage != null) …[

Image.file(

_selectedImage!,

height: 250,

fit: BoxFit.cover,

),

const SizedBox(height: 20),

],

// Processing indicator

if (_isProcessing)

const Center(

child: CircularProgressIndicator(),

),

// Extracted text display

if (_extractedText.isNotEmpty && !_isProcessing) …[

const Text(

'Extracted Text',

style: TextStyle(

fontSize: 20,

fontWeight: FontWeight.bold,

),

),

const SizedBox(height: 10),

Card(

child: Padding(

padding: const EdgeInsets.all(16.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: [

Text(

'${_extractedText.split('\n').length} lines',

style: const TextStyle(fontSize: 12),

),

IconButton(

icon: const Icon(Icons.copy, size: 20),

onPressed: () => _copyToClipboard(_extractedText), ), ],

),

const Divider(),

SelectableText(_extractedText), ], ),

),

),

const SizedBox(height: 20),

],

// Structured data extraction

if (_extractedEmails.isNotEmpty) …[

const Text(

'Emails Found',

style: TextStyle(fontWeight: FontWeight.bold),

),

…_extractedEmails.map((email) => ListTile(

leading: const Icon(Icons.email),

title: Text(email),

trailing: IconButton(

icon: const Icon(Icons.copy),

onPressed: () => _copyToClipboard(email),

),

)),

],

if (_extractedPhones.isNotEmpty) …[

const Text(

'Phone Numbers Found',

style: TextStyle(fontWeight: FontWeight.bold), ),

…_extractedPhones.map((phone) => ListTile(

leading: const Icon(Icons.phone),

title: Text(phone),

trailing: IconButton(

icon: const Icon(Icons.copy),

onPressed: () => _copyToClipboard(phone), ), )), ],

if (_extractedUrls.isNotEmpty) …[

const Text(

'URLs Found',

style: TextStyle(fontWeight: FontWeight.bold), ),

…_extractedUrls.map((url) => ListTile(

leading: const Icon(Icons.link),

title: Text(url),

trailing: IconButton(

icon: const Icon(Icons.copy),

onPressed: () => _copyToClipboard(url), ), )), ], ], ), ),

),

);

}

}

The InputImage.fromFilePath method handles the conversion automatically, making gallery-based OCR significantly easier to implement than live camera scanning.

Enhanced Features:

This implementation includes several production-ready features:

Dual Input Options: Both gallery selection and camera capture for maximum flexibility.

Structured Data Extraction: Automatically detects and categorizes emails, phone numbers, and URLs using regex patterns.

Copy Functionality: Easy copying of entire text or individual data items.

Image Preview: Shows the selected image before processing.

Error Handling: Graceful error management with user-friendly messages.

Handling Multi-Language OCR:

ML Kit supports script-based recognition. You can specify the script when initializing the TextRecognizer to optimize accuracy for specific languages.

Supported Scripts:

dart

// For Latin scripts (English, French, Spanish, etc.)

final TextRecognizer latinRecognizer =

TextRecognizer(script: TextRecognitionScript.latin);

// For Devanagari (Hindi, Sanskrit, Marathi, etc.)

final TextRecognizer devanagariRecognizer =

TextRecognizer(script: TextRecognitionScript.devanagari);

// For Chinese (Simplified and Traditional)

final TextRecognizer chineseRecognizer =

TextRecognizer(script: TextRecognitionScript.chinese);

// For Japanese

final TextRecognizer japaneseRecognizer =

TextRecognizer(script: TextRecognitionScript.japanese);

// For Korean

final TextRecognizer koreanRecognizer =

TextRecognizer(script: TextRecognitionScript.korean);

Multi-Language Strategy

If your app needs to handle multiple languages simultaneously, consider these approaches:

Run multiple recognizers and merge results

Detect the dominant script before selecting the appropriate recognizer

Allow users to select their preferred language in settings

Use the default recognizer which attempts to handle multiple scripts automatically

Example of language selection:

dart:

class MultiLanguageOCR {

TextRecognizer? _recognizer;

void setLanguage(String scriptCode) {

_recognizer?.close();

switch (scriptCode) {

case 'latin':

_recognizer = TextRecognizer(script: TextRecognitionScript.latin);

break;

case 'chinese':

_recognizer = TextRecognizer(script: TextRecognitionScript.chinese);

break;

case 'japanese':

_recognizer = TextRecognizer(script: TextRecognitionScript.japanese);

break;

case 'korean':

_recognizer = TextRecognizer(script: TextRecognitionScript.korean);

break;

case 'devanagari':

_recognizer = TextRecognizer(script: TextRecognitionScript.devanagari);

break;

default:

_recognizer = TextRecognizer(); // Default multi-script

}

}

Future<String> recognizeText(InputImage image) async {

if (_recognizer == null) {

throw Exception('Recognizer not initialized');

}

final result = await _recognizer!.processImage(image);

return result.text;

}

void dispose() {

_recognizer?.close();

}

}

Tesseract OCR as an Alternative

For apps requiring deep language support or highly customized OCR pipelines, Tesseract remains a solid choice.

Setup:

Add the dependency to pubspec.yaml:

yaml

dependencies:

flutter_tesseract_ocr: ^0.4.13

Basic Usage

dart

import 'package:flutter_tesseract_ocr/flutter_tesseract_ocr.dart';

Future<void> extractTextWithTesseract(String imagePath) async {

String result = await FlutterTesseractOcr.extractText(

imagePath,

language: 'eng',

args: {

"preserve_interword_spaces": "1",

"psm": "6", // Assume a single block of text

},

);

print('Extracted text: $result');

}

Advanced Configuration

dart

Future<String> extractTextWithCustomConfig(String imagePath) async {

return await FlutterTesseractOcr.extractText(

imagePath,

language: 'eng+fra', // Multiple languages

args: {

"psm": "3", // Fully automatic page segmentation

"preserve_interword_spaces": "1",

"tessedit_char_whitelist":

"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ",

},

);

}

Important Considerations:

Asset Bundling: Tesseract requires bundling .traineddata language files in your assets, which can significantly increase your app's size.

Performance: Generally slower than ML Kit, especially on older devices.

Language Support: Supports over 100 languages, making it ideal for specialized language requirements.

Configuration: Highly configurable with various page segmentation modes and character whitelisting.

Recommendation: Only include languages that your users genuinely need to minimize app size.

Post-Processing Recognized Text:

Raw OCR output is rarely perfect. Implement post-processing to clean and structure recognized text for practical use.

Basic Text Cleaning:

dart:

String cleanOCROutput(String rawText) {

// Remove extra whitespace and blank lines

String cleaned = rawText

.split('\n')

.map((line) => line.trim())

.where((line) => line.isNotEmpty)

.join('\n');

return cleaned; }

Structured Data Extraction:

dart

class OCRDataExtractor {

// Extract email addresses

List<String> extractEmails(String text) {

final emailRegex = RegExp( r'[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}');

return emailRegex

.allMatches(text)

.map((m) => m.group(0)!)

.toSet()

.toList();

}

// Extract phone numbers

List<String> extractPhones(String text) {

final phoneRegex = RegExp(

r'[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}'

);

return phoneRegex

.allMatches(text)

.map((m) => m.group(0)!)

.toSet()

.toList();

}

// Extract URLs

List<String> extractUrls(String text) {

final urlRegex = RegExp(

r'https?://[^\s]+|www\.[^\s]+'

);

return urlRegex

.allMatches(text)

.map((m) => m.group(0)!)

.toSet()

.toList();

}

// Extract dates (basic MM/DD/YYYY format)

List<String> extractDates(String text) {

final dateRegex = RegExp(

r'\b\d{1,2}[/-]\d{1,2}[/-]\d{2,4}\b'

);

return dateRegex

.allMatches(text)

.map((m) => m.group(0)!)

.toSet()

.toList();

}

// Extract currency amounts

List<String> extractCurrency(String text) {

final currencyRegex = RegExp(

r'[\$€£¥]\s?\d+(?:,\d{3})*(?:\.\d{2})?'

);

return currencyRegex

.allMatches(text)

.map((m) => m.group(0)!)

.toSet()

.toList();

}

}

Usage Example:

dart

final extractor = OCRDataExtractor();

void processOCRResult(String text) {

final emails = extractor.extractEmails(text);

final phones = extractor.extractPhones(text);

final urls = extractor.extractUrls(text);

final dates = extractor.extractDates(text);

final amounts = extractor.extractCurrency(text);

print('Emails found: $emails');

print('Phones found: $phones');

print('URLs found: $urls');

print('Dates found: $dates');

print('Currency amounts: $amounts');

}

This kind of post-processing makes OCR genuinely useful for specific flows such as contact scanning, invoice extraction, or document parsing.

Real-World Use Cases:

OCR in Flutter finds practical application in many product domains:

1. Document Scanners:

Extract text from PDFs and printed pages for indexing and search functionality. Enable users to digitize physical documents quickly and efficiently.

2. Business Card Readers:

Parse names, phone numbers, emails, and company information directly into contacts. Save networking details with a single photo, eliminating manual data entry.

3. Receipt Scanners:

Extract line items, totals, dates, and merchant information for expense tracking apps. Automate expense reports for businesses and individuals.

4. ID Verification Flows:

Read passport numbers, dates of birth, and names from government documents. Streamline KYC (Know Your Customer) processes for financial applications.

5. Inventory Management:

Scan product labels and barcodes with embedded text. Track inventory levels and product information automatically in warehouses and retail environments.

6. Translation Apps:

Extract text from signs, menus, and documents for real-time translation. Help travelers navigate foreign countries by translating captured text on the fly.

7. Educational Apps:

Convert textbook pages to searchable, highlightable text. Enable students to study more effectively by digitizing their physical study materials.

8. Banking Apps:

Read check information, account numbers, and routing numbers. Simplify check deposits and account setup processes for banking customers.

9. Medical Records:

Digitize handwritten prescriptions and medical notes. Improve healthcare workflows by making handwritten documents searchable and editable.

10. Postal Services:

Automatically read addresses from envelopes and packages. Speed up sorting and routing processes in postal and logistics operations.

Each of these scenarios can be built on the foundation covered in this guide, with customization for specific industry requirements.

Common Mistakes to Avoid:

1. Processing Every Frame Without Throttling:

Problem: Running OCR on every single camera frame causes severe performance degradation and battery drain.

Solution: Always implement frame skipping or processing gates:

dart

bool _isProcessing = false;

Future<void> _processFrame(CameraImage image) async {

if (_isProcessing) return; // Skip this frame

_isProcessing = true;

try {

// Process the frame

final result = await _textRecognizer.processImage(inputImage);

// Handle result

} finally {

_isProcessing = false;

} }

2. Not Disposing Resources:

Problem: Failing to close the TextRecognizer instance causes memory leaks.

Solution: Always call .close() in the dispose method:

dart

@override

void dispose() {

_textRecognizer.close();

_cameraController?.dispose();

super.dispose();

}

3. Displaying Raw OCR Output

Problem: Showing unprocessed OCR output directly to users leads to poor UX with extra spaces, special characters, and formatting issues.

Solution: Always sanitize, trim, and structure the text:

dart

String cleanedText = rawText

.split('\n')

.map((line) => line.trim())

.where((line) => line.isNotEmpty)

.join('\n');

4. Testing Only on Emulator:

Problem: OCR performance on simulators/emulators is unreliable and doesn’t represent real-world usage.

Solution: Always test on physical devices under varied conditions:

Different lighting (bright, dim, mixed)

Various angles and distances

Different text sizes and fonts

Multiple device models

5. Ignoring Permission Handling:

Problem: Not handling permission denials gracefully causes app crashes and poor user experience.

Solution: Implement proper permission request flows:

dart

Future<void> _requestCameraPermission() async {

final status = await Permission.camera.request();

if (status.isDenied) {

// Show explanation dialog

_showPermissionExplanation();

} else if (status.isPermanentlyDenied) {

// Guide user to settings

_showSettingsPrompt();

}

}

6. Using Incorrect Image Formats:

Problem: Not configuring the correct image format group for the platform causes conversion errors.

Solution: Specify the appropriate format:

dart

_cameraController = CameraController(

camera,

ResolutionPreset.high,

imageFormatGroup: ImageFormatGroup.nv21, // For Android

);

7. Not Handling Rotation:

Problem: Text appears upside down or sideways on different device orientations.

Solution: Calculate and apply correct image rotation based on device orientation.

8. Ignoring Gradle Configuration:

Problem: Using outdated Gradle or Android Gradle Plugin versions causes build failures.

Solution: Ensure you have the minimum required versions:

Gradle 8.9+

Android Gradle Plugin 8.7.2+

Kotlin 2.1.0+

Download Complete Source Code:

The complete source code for this Flutter OCR demo application is available on GitHub. This production-ready implementation includes all the features discussed in this tutorial.

GitHub Repository:

Repository: Flutter OCR Demo — Complete Implementation

What’s Included in the Repository:

The GitHub repository contains:

Complete Flutter Application

Live camera OCR with real-time text recognition

Gallery image OCR with photo selection and camera capture

Permission handling for Android and iOS

Copy to clipboard functionality

Pause/resume detection controls

Platform Configurations

Android Gradle setup (Kotlin DSL)

iOS CocoaPods configuration

Proper permission declarations

Gradle version configurations

Complete Documentation

Comprehensive README with setup instructions

Step-by-step installation guide

Troubleshooting section

API documentation

Screenshots and usage examples

Quick Start from GitHub:

bash

# Clone the repository

git clone https://github.com/onlykrishna/ocr_demo.git

# Navigate to project directory

cd flutter-ocr-demo

# Install dependencies

flutter pub get

# For iOS (macOS only)

cd ios && pod install && cd ..

# Run the app (use physical device for best results)

flutter run

Features Demonstrated:

The demo app showcases:

Home Screen — Elegant navigation with feature cards

Live Camera OCR — Real-time text recognition with visual guides

Gallery OCR — Image selection with automatic data extraction

Permission Management — Graceful handling of camera and storage permissions

Structured Data — Automatic detection of emails, phone numbers, and URLs

Copy Functionality — Easy text copying to clipboard

Error Handling — User-friendly error messages and recovery

Use This as a Template:

This repository serves as:

Learning Resource — Study the implementation and architecture

Project Template — Fork and customize for your own apps

Reference Implementation — See best practices in action

Production Baseline — Start with working code and build on top

Repository Structure:

flutter-ocr-demo/

├── lib/

│ ├── main.dart # App entry point

│ └── screens/

│ ├── home_screen.dart # Main navigation

│ ├── live_ocr_screen.dart # Real-time camera OCR

│ └── gallery_ocr_screen.dart # Gallery image OCR

├── android/ # Android configuration

├── ios/ # iOS configuration

├── README.md # Setup instructions

├── CHANGELOG.md # Version history

└── LICENSE # Open source license

Conclusion:

Adding OCR to a Flutter app is one of those capabilities that transforms a standard app into a genuinely intelligent product. With Google ML Kit, the integration is lightweight, accurate, and fully on-device. By combining camera integration, gallery scanning, permission handling, multilingual support, and post-processing, you can build OCR features that solve real problems for your users.

Key Takeaways:

Start with ML Kit for most use cases due to its speed, accuracy, and ease of integration

Handle permissions properly with user-friendly dialogs and settings navigation

Implement frame throttling for real-time camera OCR to prevent performance issues

Always dispose resources to prevent memory leaks

Post-process OCR output before displaying to users

Test on physical devices under various conditions

Extract structured data (emails, phones, URLs) to provide real value

Configure Gradle properly to avoid build failures

Architecture Scalability:

The architecture described here scales well from simple text extraction to full document understanding pipelines:

Start with ML Kit for most cases

Extend with Tesseract when deep language support is needed

Always post-process output before using it in application logic

Build modular components for reusability across features

Next Steps:

To extend this foundation:

Add cloud OCR fallback for complex documents

Implement document edge detection for better scanning

Add text-to-speech for accessibility

Integrate translation services for multilingual apps

Build batch processing for multiple images

Add export functionality (PDF, TXT, CSV)

References:

Google ML Kit Text Recognition : A Flutter plugin to use Google’s ML Kit Text Recognition to recognize text in any Chinese, Devanagari, Japanese scripts. {google_mlkit_text_recognition | Flutter package}

Flutter Tesseract OCR : Tesseract 4 adds a new neural net (LSTM) based OCR engine which is focused on line recognition. It has unicode (UTF-8) support.{ flutter_tesseract_ocr | Flutter package }

ML Kit for Developers : Google’s on-device machine learning kit for mobile developers. { ML Kit | Google for Developers }

Image Picker Plugin : Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.

{ image_picker | Flutter package }

Camera Plugin : A Flutter plugin for iOS, Android and Web allowing access to the device cameras. { camera | Flutter package }

Permission Handler : Permission plugin for Flutter. This plugin provides a cross-platform API to request and check permissions.

{ permission_handler | Flutter package }

Connect With Us:

Feel free to connect with us:And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project hourly or full-time as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---

Need help building production-grade Flutter apps? FlutterDevs helps teams ship faster with solid architecture, better UX, and practical AI features. Reach us at support@flutterdevs.com.