reusable_ml_detector

A reusable Flutter widget for ML image detection using Google ML Kit. Create specialized detectors for different domains (pets, plants, food, recycling) with simple configuration instead of duplicating code.

pub package License: MIT

🎯 Features

  • True Reusability: One widget, multiple domains through configuration
  • ML Kit Integration: Google ML Kit Image Labeling for accurate detection
  • Smart Filtering: Domain-specific label filtering and confidence thresholds
  • State Management: Robust state handling (idle, loading, success, error)
  • Consistent UI: Animated result cards with confidence indicators
  • Easy to Use: 3-line setup for a complete detector

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  reusable_ml_detector: ^1.0.0

Then run:

flutter pub get

🚀 Quick Start

1. Create a configuration

import 'package:reusable_ml_detector/reusable_ml_detector.dart';

final petConfig = DetectionConfig(
  title: 'Pet Breed Detector',
  instructions: 'Take a photo of your pet',
  confidenceThreshold: 0.6,
  relevantLabels: ['dog', 'cat', 'puppy', 'kitten', 'golden retriever', 'labrador'],
  primaryColor: Colors.orange,
);

2. Use the widget

ReusableMLDetector(
  config: petConfig,
)

That's it! You now have a fully functional ML detector.

📚 Use Cases

The same component works for multiple domains:

Pet Breed Detection

DetectionConfig(
  title: 'Pet Detector',
  confidenceThreshold: 0.6,
  relevantLabels: ['dog', 'cat', 'puppy', 'kitten'],
  primaryColor: Colors.orange,
)

Plant Species Identification

DetectionConfig(
  title: 'Plant Identifier',
  confidenceThreshold: 0.5,
  relevantLabels: ['plant', 'flower', 'tree', 'leaf'],
  primaryColor: Colors.green,
)

Food Recognition

DetectionConfig(
  title: 'Food Analyzer',
  confidenceThreshold: 0.55,
  relevantLabels: ['food', 'fruit', 'vegetable', 'dish'],
  primaryColor: Colors.red,
)

Recycling Helper

DetectionConfig(
  title: 'Recycle Helper',
  confidenceThreshold: 0.5,
  relevantLabels: ['plastic', 'metal', 'glass', 'paper', 'cardboard'],
  primaryColor: Colors.blue,
)

🏗️ Architecture

The component follows a three-layer architecture:

  1. Configuration Layer (DetectionConfig)

    • Defines domain-specific parameters
    • Manages thresholds and filters
    • Customizes UI appearance

  2. Detection Layer (ReusableMLDetector)

    • Handles camera/gallery input
    • Processes images with ML Kit
    • Filters results by configuration
    • Manages state lifecycle

  3. Presentation Layer (ReusableResultCard)

    • Displays results with animations
    • Shows confidence levels visually
    • Provides responsive design

📖 API Reference

DetectionConfig

Parameter Type Default Description
title String required App title
instructions String 'Take a photo' User instructions
confidenceThreshold double 0.5 Minimum confidence (0.0-1.0)
relevantLabels List<String> [] Domain-specific filters
primaryColor Color Colors.blue Theme color

ReusableMLDetector

Parameter Type Required Description
config DetectionConfig Yes Detection configuration

🛠️ Platform Setup

Android

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

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

<application>
    <meta-data
        android:name="com.google.mlkit.vision.DEPENDENCIES"
        android:value="image_labeling"/>
</application>

iOS

Add to ios/Runner/Info.plist:

<key>NSCameraUsageDescription</key>
<string>We need camera access to detect images</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need photo library access to analyze images</string>

💡 Why This Component?

Not just a wrapper: This component demonstrates real reusability by abstracting complexity through external configuration. The same widget handles:

  • ✅ Multiple detection domains without code duplication
  • ✅ Consistent UI/UX across applications
  • ✅ Centralized maintenance and updates
  • ✅ Domain-specific filtering and validation
  • ✅ Professional state management

Design Pattern: This approach is applicable to any ML or external API integration requiring multi-context adaptation.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Dayver De la hoz

🙏 Acknowledgments

📱 Example App

Check the /example folder for a complete demonstration app showing all four use cases.

🐛 Issues

Found a bug? Please open an issue.

Libraries

reusable_ml_detector
A reusable ML image detection widget for Flutter using Google ML Kit.