pic_translator 1.0.0+1

A Flutter plugin for translating text in images from one language to another. It extracts text from images using ML Kit and overlays the translated text on the original image

Pic Translator

A Flutter plugin for translating text in images from one language to another. This plugin extracts text from images using Google's ML Kit and overlays the translated text on the original image, preserving the original layout and styling.

Features

✨ Extract text from images using Google's ML Kit Text Recognition
🌍 Translate text to multiple languages
🖼️ Create a new image with translated text overlaid
🎨 Support for custom styling and fonts based on target language
📱 Ready-to-use Flutter widget for quick integration
🗣️ Support for multiple languages including English, Spanish, Hindi, French, German, Chinese, Japanese, Russian, Arabic, and more
👌 Special support for Hinglish (Hindi-English mix)
🔍 Intelligent background color sampling for optimal text visibility
🎛️ Highly customizable widget with themeable components

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  pic_translator: ^1.0.0

Android Setup

Add the following permissions to your AndroidManifest.xml:

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

iOS Setup

Add the following keys to your Info.plist:

<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera to take photos for translation.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires access to the photo library to select images for translation.</string>

Usage

Basic Usage with Widget

The simplest way to use the plugin is with the provided PicTranslatorWidget:

import 'package:flutter/material.dart';
import 'package:pic_translator/pic_translator.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Pic Translator Example'),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                const Text(
                  'Take a picture or select an image to translate text',
                  style: TextStyle(fontSize: 16),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 20),
                
                // Use the PicTranslatorWidget
                PicTranslatorWidget(
                  initialTargetLanguage: 'es', // Spanish as default
                  showTextDetails: true,
                  onTranslationCompleted: (result) {
                    // Do something with the translation result
                    print('Translation completed!');
                    print('Original text: ${result.originalText}');
                    print('Translated text: ${result.translatedText}');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Custom Usage with the Core API

For more control, you can use the core PicTranslator class directly:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:pic_translator/pic_translator.dart';

class MyCustomTranslator extends StatefulWidget {
  @override
  _MyCustomTranslatorState createState() => _MyCustomTranslatorState();
}

class _MyCustomTranslatorState extends State<MyCustomTranslator> {
  final PicTranslator _translator = PicTranslator();
  File? _originalImage;
  File? _translatedImage;
  String _translatedText = '';
  
  @override
  void dispose() {
    _translator.dispose();
    super.dispose();
  }

  Future<void> _processImage() async {
    final ImagePicker picker = ImagePicker();
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);
    
    if (pickedFile != null) {
      final File imageFile = File(pickedFile.path);
      setState(() {
        _originalImage = imageFile;
      });
      
      // Process the image
      final result = await _translator.processImage(
        imageFile: imageFile,
        targetLanguage: 'fr', // Translate to French
      );
      
      setState(() {
        _translatedImage = result.translatedImageFile;
        _translatedText = result.translatedText;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Translator'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_originalImage != null) ...[
              Image.file(
                _originalImage!,
                height: 200,
              ),
              SizedBox(height: 20),
            ],
            if (_translatedImage != null) ...[
              Image.file(
                _translatedImage!,
                height: 200,
              ),
              SizedBox(height: 20),
              Text(_translatedText),
            ],
            ElevatedButton(
              onPressed: _processImage,
              child: Text('Select Image'),
            ),
          ],
        ),
      ),
    );
  }
}

Customizing the Widget Theme

You can customize the appearance of the PicTranslatorWidget using a custom theme:

final customTheme = PicTranslatorTheme(
  accentColor: Colors.purple,
  primaryTextColor: Colors.black87,
  secondaryTextColor: Colors.black54,
  buttonTextColor: Colors.white,
  originalImageBorderColor: Colors.grey,
  translatedImageBorderColor: Colors.purple,
  extractedTextBackgroundColor: Colors.grey[200]!,
  translatedTextBackgroundColor: Colors.purple[50]!,
  placeholderColor: Colors.grey[100]!,
  containerMargin: 12.0,
  borderRadius: 10.0,
  imageHeight: 250.0,
);

PicTranslatorWidget(
  initialTargetLanguage: 'de',
  theme: customTheme,
)

Widget Customization Options

The widget can be customized with several options:

PicTranslatorWidget(
  initialTargetLanguage: 'fr',
  showTextDetails: true,              // Show text extraction details panel
  showLanguageSelector: true,         // Show language dropdown
  showCameraButton: true,             // Show camera button
  showGalleryButton: true,            // Show gallery button
  cameraButtonText: 'Take Photo',     // Custom camera button text
  galleryButtonText: 'Choose Image',  // Custom gallery button text
  theme: myCustomTheme,               // Custom theme
  onTranslationCompleted: (result) {  // Callback when translation completes
    // Handle result
  },
  onError: (errorMessage) {           // Callback for errors
    // Handle error
  },
)

API Reference

Main Classes

• PicTranslator - Core class with all functionality for text extraction and translation
• PicTranslatorWidget - Ready-to-use widget for quick integration
• TranslationResult - Result object containing original text, translated text, and the translated image file
• PicTranslatorTheme - Theme class for customizing the widget appearance

Key Methods

• extractTextFromImage(File imageFile) - Extract text from an image file
• translateText(RecognizedText recognizedText, String targetLanguage) - Translate the recognized text
• createTranslatedImage({...}) - Create a new image with translated text overlaid
• processImage({File imageFile, String targetLanguage}) - Process an image from start to finish
• pickAndProcessImage({ImageSource source, String targetLanguage}) - Pick an image and process it

Supported Languages

The plugin currently supports the following languages:

• English (en)
• Spanish (es)
• Hindi (hi)
• French (fr)
• German (de)
• Chinese (zh)
• Japanese (ja)
• Russian (ru)
• Arabic (ar)
• Portuguese (pt)
• Korean (ko)
• Italian (it)
• Dutch (nl)
• Turkish (tr)
• Vietnamese (vi)
• Thai (th)
• Hinglish (hi-en) - Special Hindi-English mix

Example App

Check out the example app in the example folder to see the plugin in action.