Hey folks, Samuel from TechWithSam here. If you’re building mobile apps in 2025, AI isn’t a “nice-to-have” - it’s essential. Think personalized recommendations, image analysis, or voice commands, all running smoothly on-device for speed and privacy. As a Flutter expert who’s shipped AI-powered apps for clients across Europe and the US, I’ve seen how Google ML Kit can supercharge your projects without the hassle of native code.
In this tutorial, we’ll integrate ML Kit’s text recognition into a simple Flutter camera app. You’ll scan text from photos and display it instantly. By the end, you’ll have a working demo ready to adapt for your startup’s inventory scanner or travel translator. Let’s dive in - code included!
Watch video tutorial on YouTube: <a href="https://youtu.be/SlA-z9XFI3I" target="_blank" rel="noopener nofollow">https://youtu.be/SlA-z9XFI3I</a>
<h2>Prerequisites</h2>
<ul>
<li>Flutter SDK (v3.24+).</li>
<li>Android Studio/Xcode for emulators.</li>
<li>Google ML Kit plugin (we’ll add it).</li>
<li>Basic Dart knowledge.</li>
</ul>
Run <code>flutter create ai_flutter_demo</code> to start a new project.
<h2>Step 1: Add Dependencies</h2>
Open <code>pubspec.yaml</code> and add the ML Kit plugin. It’s official and handles iOS/Android seamlessly.
<pre><code class="language-YAML">dependencies:
 flutter:
 sdk: flutter
 google_mlkit_text_recognition: ^0.15.0 # Latest as of 2025
 camera: ^0.11.2 # For capturing images
 image: ^0.8.7+5 # Image processing
</code></pre>
Run <code>flutter pub get</code>. For Android, add to <code>android/app/build.gradle.kts</code>:
<pre><code class="language-KOTLIN">android {
 compileSdk = 35
 ndkVersion = &quot;27.0.12077973&quot;
 defaultConfig {
 minSdk = 21 # ML Kit requires this
 targetSdk = 35
 }
}
</code></pre>
For iOS, update <code>Podfile</code> with <code>platform :ios, '16.0'</code>. Pro tip: ML Kit works offline, perfect for global clients with spotty internet.
<h2>Step 2: Set Up Permissions</h2>
Users need camera access. In <code>android/app/src/main/AndroidManifest.xml</code>:
<pre><code class="language-XML">&lt;uses-permission android:name=&quot;android.permission.CAMERA&quot; /&gt;
</code></pre>
For iOS, add to <code>ios/Runner/Info.plist</code>:
<pre><code class="language-PLIST">&lt;key&gt;NSCameraUsageDescription&lt;/key&gt;
&lt;string&gt;Camera access for text recognition&lt;/string&gt;
</code></pre>
Request runtime permissions in your app (we’ll code this next).
<h2>Step 3: Initialize the Camera and ML Kit</h2>
Create <code>lib/main.dart</code>. We’ll use a StatefulWidget for the camera preview.
<pre><code class="language-DART">import &#x27;package:flutter/material.dart&#x27;;
import &#x27;package:camera/camera.dart&#x27;;
import &#x27;package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart&#x27;;
import &#x27;package:image/image.dart&#x27; as imglib;

void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 final cameras = await availableCameras();
 runApp(MyApp(camera: cameras.first));
}

class MyApp extends StatelessWidget {
 final CameraDescription camera;
 const MyApp({super.key, required this.camera});

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: CameraScreen(camera: camera),
 );
 }
}

class CameraScreen extends StatefulWidget {
 final CameraDescription camera;
 const CameraScreen({super.key, required this.camera});

 @override
 State&lt;CameraScreen&gt; createState() =&gt; _CameraScreenState();
}

class _CameraScreenState extends State&lt;CameraScreen&gt; {
 late CameraController _controller;
 final TextRecognizer _textRecognizer = TextRecognizer();
 String _recognizedText = &#x27;&#x27;;

 @override
 void initState() {
 super.initState();
 _controller = CameraController(widget.camera, ResolutionPreset.high);
 _controller.initialize().then((_) =&gt; setState(() {}));
 }

 @override
 void dispose() {
 _controller.dispose();
 _textRecognizer.close();
 super.dispose();
 }

 Future&lt;void&gt; _recognizeText() async {
 if (!_controller.value.isInitialized) return;
 final image = await _controller.takePicture();
 final inputImage = InputImage.fromFilePath(image.path);
 final RecognizedText recognizedText = await _textRecognizer.processImage(inputImage);
 
 setState(() {
 _recognizedText = recognizedText.text;
 });
 }

 @override
 Widget build(BuildContext context) {
 if (!_controller.value.isInitialized) return const Scaffold(body: Center(child: CircularProgressIndicator()));
 
 return Scaffold(
 body: Stack(
 children: [
 CameraPreview(_controller),
 Positioned(
 bottom: 50,
 left: 0,
 right: 0,
 child: Center(
 child: ElevatedButton(
 onPressed: _recognizeText,
 child: const Text(&#x27;Scan Text&#x27;),
 ),
 ),
 ),
 if (_recognizedText.isNotEmpty)
 Positioned(
 top: 50,
 left: 20,
 right: 20,
 child: Container(
 padding: const EdgeInsets.all(10),
 color: Colors.black54,
 child: Text(_recognizedText, style: const TextStyle(color: Colors.white)),
 ),
 ),
 ],
 ),
 );
 }
}
</code></pre>
This sets up a camera preview with a scan button. When pressed, it captures an image and runs ML Kit’s text recognition.
<h2>Step 4: Handle Permissions and Errors</h2>
Wrap the button in a permission check using the <code>permission_handler</code> package (add to pubspec if needed). Example:
<pre><code class="language-DART">import &#x27;package:permission_handler/permission_handler.dart&#x27;;

Future&lt;void&gt; _requestPermission() async {
 if (await Permission.camera.request().isGranted) {
 _recognizeText();
 } else {
 // Show dialog: &quot;Camera access needed for AI features&quot;
 }
}
</code></pre>
Update the buttons’ <code>onPressed</code> to <code>_requestPermission()</code>.
Common error: “No text detected”? Ensure good lighting - add a tip in your app’s UX.
<h2>Step 5: Test and Deploy</h2>
Run <code>flutter run</code> on an emulator/device. Snap a photo of text (e.g., a book page) - watch the magic! For production:
<ul>
<li>Optimize: Use isolates for heavy processing.</li>
<li>Scale: Integrate with Firebase for cloud ML if on-device isn’t enough.</li>
<li>2025 Twist: Combine with Dart’s new AI libs for custom models.</li>
</ul>
<h2>Troubleshooting</h2>
<ul>
<li>Plugin conflicts? Clean/rebuild: <code>flutter clean &amp;&amp; flutter pub get</code>.</li>
<li>iOS build fails? Update CocoaPods: <code>pod install</code>.</li>
<li>Low accuracy? Pre-process images with the <code>image</code> package for contrast.</li>
</ul>
There you have it - a Flutter app with AI smarts in under 100 lines! This setup saved one of my clients 40% on dev time for their e-commerce scanner. What’s your next AI feature? Drop a comment below.
Full Source Code 👇 - Show some ❤️ by starring ⭐ the repo and follow me 😄!
<a href="https://github.com/techwithsam/ai_flutter_demo" target="_blank" rel="noopener nofollow">https://github.com/techwithsam/ai_flutter_demo</a>
I hope you have learned something. Press the follow button if you’re not following me yet. Kindly press the like button as many times as you want if you enjoy it, and feel free to drop a comment.
If you need custom AI integration for your app, DM me at TechWithSam - let’s build something epic.
🔗 Let’s Connect 🔗 → <a href="https://github.com/techwithsam" target="_blank" rel="noopener nofollow">Github</a> | <a href="https://twitter.com/techwithsam_" target="_blank" rel="noopener nofollow">Twitter</a> | <a href="https://youtube.com/@techwithsam" target="_blank" rel="noopener nofollow">Youtube</a> | <a href="https://www.linkedin.com/in/techwithsam/" target="_blank" rel="noopener nofollow">LinkedIn</a> | <a href="https://techwithsam.medium.com/" target="_blank" rel="noopener nofollow">Medium</a> | <a href="https://substack.com/@techwithsam" target="_blank" rel="noopener nofollow">Substack</a> | <a href="https://techwithsam.hashnode.dev/" target="_blank" rel="noopener nofollow">Hashnode</a>
Join my Community 👨‍💻👨‍💻 on <a href="https://discord.gg/8X7dPYujqm" target="_blank" rel="noopener nofollow">Discord</a>.
Subscribe to my <a href="https://youtube.com/@techwithsam" target="_blank" rel="noopener nofollow">YouTube channel</a>.
Happy Building! 🥰👨‍💻

Samuel Adekunle

A step-by-step guide to integrating Google ML Kit's text recognition into a Flutter mobile app. Covers setup of dependencies, camera permissions, initialization of ML Kit's TextRecognizer API, and building a working camera preview with real-time text scanning. Includes complete code examples for both Android and iOS platforms, troubleshooting tips, and optimization recommendations for production deployment.

How to Integrate AI APIs into Your Flutter App - Google ML Kit.

This is incredible. Thanks for sharing