Skip to content

techwithsam/ai_flutter_demo

Repository files navigation

AI Flutter Demo | Tech With Sam ~ GitHub TechWithSam

This is a small, tutorial-style Flutter app that demonstrates image picking, live camera preview, and on-device text recognition using Google ML Kit. The project was built as a guided tutorial and includes a permissive, easy-to-read codebase you can use to learn how to wire up iOS/Android permissions, the camera plugin, and ML-based text recognition.

Quick links

Watch the tutorial

✌  App Preview

App Screenshot App Screenshot
Image Not Selected Image Recognizer in Action

Highlights

  • Pick image from gallery (uses platform photo picker).
  • Take a one-shot photo using the device camera (image_picker).
  • Live camera preview using the camera plugin and take a picture in-app.
  • On-device text recognition using google_mlkit_text_recognition.
  • Runtime permissions handling with permission_handler and a small Permission Debug screen to inspect and open Settings.

Who is this for

This repo is aimed at developers who want a compact, working example of:

  • Combining image_picker and camera flows in the same app.
  • Integrating ML Kit text recognition and displaying results.
  • Handling platform permissions securely and UX-friendly.

Prerequisites

  • Flutter (stable) — tested with Flutter 3.x / Dart SDK compatible with this repo. Use flutter --version to verify.
  • Xcode (for iOS simulator and builds).
  • Android SDK (for Android emulator / builds).

Getting started (quick)

  1. Clone the repo and open it:
git clone https://github.com/techwithsam/ai_flutter_demo.git cd ai_flutter_demo
  1. Fetch packages:
flutter pub get
  1. Run on iOS simulator (recommended for testing camera picker flows):
flutter run -d "iPhone 16 Pro Max"
  1. Or run on Android:
flutter run -d emulator-5554

Important: Permissions

This app requests camera and photo/media permissions at runtime. The following platform entries are already set in this repo:

  • iOS: ios/Runner/Info.plist contains NSCameraUsageDescription, NSPhotoLibraryUsageDescription, and NSPhotoLibraryAddUsageDescription.
  • Android: android/app/src/main/AndroidManifest.xml requests the camera and storage/media permissions. Newer Android versions (API 33+) use READ_MEDIA_IMAGES.

If the app opens Settings or permissions look wrong on iOS, open the Permission Debug screen in the app to inspect statuses and open App Settings.

Troubleshooting

  • If the platform photo picker appears to freeze on the simulator, try one of the following:

    • Use a different simulator model or reboot the simulator.
    • Test on a physical device (more reliable for camera/photo flows).
    • Upgrade image_picker (if you encounter plugin-specific issues).

Developer notes

  • Main logic lives in lib/home.dart:

    • HomeScreen contains buttons for Pick Image (gallery), Use Camera (one-shot), Live Camera (CameraPreview), and a Permissions debug screen.
    • CameraScreen handles the CameraController lifecycle and image capture.
  • The app instruments permission and picker flows with debug logs to help diagnose hangs or permission issues.

Contributing

This repo is part tutorial / part demo. If you spot an issue, a better explanation to add to the README, or have improvements (e.g., tests, robust permission flows, or plugin updates), please open a PR or an issue.

Call to action

  • Watch the step-by-step video walkthrough (highly recommended): YouTube tutorial
  • Read more tutorials and follow along at Tech With Sam: techwithsam.medium.com
  • Try running the demo, make a change (e.g., upgrade image_picker), and send a PR — the project is intentionally small so it's easy to experiment and learn.

License

This repository is provided for tutorial purposes. Check the project root for any license file or add one if you plan to redistribute.

Enjoy exploring the code — and let me know if you want a companion step-by-step guide added to the repo (I can create a guided tutorial/mdx notebook or update this README with screenshots and code snippets).

About

How to integrate text recognition using Google ML Kit - Flutter AI Integration Demo.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published