# How to Develop a Custom Image Recognition System in FlutterFlow

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: FlutterFlow Pro+ (Cloud Functions required)
- Last updated: March 2026

## TL;DR

Add image recognition using Google Cloud Vision API called through a Cloud Function. Users capture or select an image, which is converted to base64 and sent to the Cloud Function. The function calls the Vision API with LABEL_DETECTION and TEXT_DETECTION features, parses the response, and returns labels with confidence scores. Display results in a ListView. For on-device recognition without internet, use the google_mlkit_text_recognition package in a Custom Action.

## Adding Image Recognition to Your FlutterFlow App

Image recognition enables features like product identification, document scanning, receipt parsing, and accessibility descriptions. This tutorial covers both cloud-based and on-device approaches.

## Before you start

- FlutterFlow Pro plan (Cloud Functions required)
- Google Cloud Platform account with Vision API enabled
- Firebase Storage for image handling
- An image capture or selection mechanism in your app

## Step-by-step guide

### 1. Set up the Google Cloud Vision API and Cloud Function

In Google Cloud Console, enable the Cloud Vision API for your project. Create a service account with Vision API access and download the JSON key file. In your Cloud Function, install @google-cloud/vision and create a client with the service account credentials. The function receives a base64 image string and calls client.annotateImage() with features: LABEL_DETECTION (identifies objects/scenes) and TEXT_DETECTION (reads text in images). Return the parsed results.

```
const vision = require('@google-cloud/vision');
const client = new vision.ImageAnnotatorClient();

exports.analyzeImage = async (req, res) => {
  const { imageBase64 } = req.body;
  const request = {
    image: { content: imageBase64 },
    features: [
      { type: 'LABEL_DETECTION', maxResults: 10 },
      { type: 'TEXT_DETECTION', maxResults: 5 },
    ],
  };
  const [result] = await client.annotateImage(request);
  const labels = result.labelAnnotations.map(l => ({
    description: l.description,
    score: Math.round(l.score * 100),
  }));
  const text = result.fullTextAnnotation?.text || '';
  res.json({ labels, text });
};
```

**Expected result:** The Cloud Function accepts a base64 image and returns labels with scores and extracted text.

### 2. Capture or select an image and convert to base64 in a Custom Action

Create a Custom Action called imageToBase64 that takes a file path (from camera capture or gallery picker) and returns a base64 string. Read the file bytes, encode with base64Encode from dart:convert. Before encoding, resize the image to max 1024px on the longest side using the image package to reduce upload size and API costs. Large camera photos (5MB+) are slow to upload and cost more per Vision API call.

**Expected result:** The Custom Action converts a captured or selected image to a resized base64 string.

### 3. Call the Cloud Function and display recognition results

On your analysis page, add a FlutterFlowUploadButton or custom camera capture button. After the user selects an image, show it in a preview Image widget. Call the imageToBase64 Custom Action, then call the Cloud Function API with the base64 string. Show a CircularProgressIndicator during processing. On success, parse the response and display labels in a ListView — each Row shows the label description and a LinearPercentIndicator for the confidence score.

**Expected result:** Users see their image with a list of detected labels and confidence scores below.

### 4. Add on-device text recognition for offline use

For text recognition without internet, add google_mlkit_text_recognition to Pubspec Dependencies. Create a Custom Action called recognizeText that takes an image file path, creates an InputImage, and calls TextRecognizer().processImage(). Extract recognized text blocks and return the concatenated text. This works offline and is free (no API costs), but only supports text, not object labels.

**Expected result:** Text recognition runs on-device without internet connection or API costs.

### 5. Display extracted text in a copyable text area

For text detection results, show the extracted text in a SelectableText widget (allows copy) or a TextField (allows editing). Add a Copy to Clipboard button using a Custom Action with Clipboard.setData(). This is useful for receipt scanning, document digitization, and business card reading. Format the text by preserving line breaks from the Vision API response.

**Expected result:** Extracted text displays in a selectable and copyable text area.

## Complete code example

File: `analyze_image.js`

```dart
// Cloud Function: Google Cloud Vision API
const vision = require('@google-cloud/vision');
const client = new vision.ImageAnnotatorClient();

exports.analyzeImage = async (req, res) => {
  try {
    const { imageBase64 } = req.body;

    if (!imageBase64) {
      return res.status(400).json({ error: 'No image provided' });
    }

    const request = {
      image: { content: imageBase64 },
      features: [
        { type: 'LABEL_DETECTION', maxResults: 10 },
        { type: 'TEXT_DETECTION', maxResults: 5 },
        { type: 'OBJECT_LOCALIZATION', maxResults: 5 },
      ],
    };

    const [result] = await client.annotateImage(request);

    const labels = (result.labelAnnotations || []).map(label => ({
      description: label.description,
      score: Math.round(label.score * 100),
    }));

    const objects = (result.localizedObjectAnnotations || []).map(obj => ({
      name: obj.name,
      score: Math.round(obj.score * 100),
    }));

    const text = result.fullTextAnnotation?.text || '';

    res.json({ labels, objects, text });
  } catch (error) {
    console.error('Vision API error:', error);
    res.status(500).json({ error: 'Analysis failed' });
  }
};
```

## Common mistakes

- **Sending full-resolution camera images to the Cloud Vision API** — A 12MP photo is 4-5MB. Uploading and processing takes 5-10 seconds and costs more per API call. The extra resolution provides no benefit for label detection. Fix: Resize images to max 1024px on the longest side before encoding to base64. This reduces size to ~200KB and processing to 1-2 seconds.
- **Calling the Vision API directly from client-side code** — The Vision API requires a service account key. Putting this in client code exposes your Google Cloud credentials to anyone who decompiles the app. Fix: Call the Vision API from a Cloud Function that holds the credentials securely. The client only sends the image to your function.
- **Not showing a loading indicator during image analysis** — Vision API calls take 1-3 seconds. Without a loading indicator, users think the app is frozen and may tap again, triggering duplicate requests. Fix: Show a CircularProgressIndicator while the API call is in progress. Disable the analyze button until the result returns.

## Best practices

- Resize images to max 1024px before sending to reduce costs and latency
- Call the Vision API through a Cloud Function to keep credentials secure
- Show a loading indicator during the 1-3 second API processing time
- Use on-device ML Kit for text recognition when internet is unavailable
- Display confidence scores as progress bars for visual interpretation
- Cache recognition results to avoid re-analyzing the same image
- Handle API errors gracefully with retry option and error message

## Frequently asked questions

### How much does the Vision API cost?

First 1,000 units/month are free. Beyond that: $1.50 per 1,000 units for LABEL_DETECTION, $1.50 for TEXT_DETECTION. Each feature on each image is one unit.

### What types of objects can it recognize?

LABEL_DETECTION identifies thousands of categories: animals, vehicles, food, landscapes, activities, etc. OBJECT_LOCALIZATION provides bounding boxes for specific objects in the image.

### Can it read handwritten text?

Yes. The Vision API supports handwritten text recognition (DOCUMENT_TEXT_DETECTION feature). Accuracy varies by handwriting quality.

### Is on-device recognition as accurate as cloud?

ML Kit text recognition is good for printed text but less accurate than the cloud API. For label detection, you need the cloud API — ML Kit only does text, face, and barcode locally.

### Can I train a custom model for specific objects?

Yes. Google Cloud AutoML Vision lets you train custom models on your data. Deploy the model and call it from the same Cloud Function pattern.

### Can RapidDev help with AI image features?

Yes. RapidDev can implement image recognition, custom model training, document scanning, receipt parsing, and visual search.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-develop-a-custom-image-recognition-system-in-flutterflow
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-develop-a-custom-image-recognition-system-in-flutterflow