Guide For Integrating Flutter_text_detect_area Sdk Inside Your Flutter Application

Guide For Integrating Flutter_text_detect_area Sdk Inside Your Flutter Application

Dhaval Baldha

02 May 2024

4 MINUTES READ

Flutter-text-detect-area

The easy way to use this package for text recognition by selecting area over the images and live camera in Flutter. Flutter Text Detect Area's text recognition can recognize/detect text from image's particular area by dragging/moving/panning area selector. They can also be used to recognise text once and more by passing value of detect once as true/false and also can set enable/disable image interactions by passing value of enableImageInteractions.

Installing

1. Add dependency to pubspec.yaml

Get the latest version in the 'Installing' tab on pub.dev


    dependencies:
        flutter_text_detect_area: <latest-version>
    

2. Import the package


    import 'package:flutter_text_detect_area/flutter_text_detect_area.dart';
    

Screenshot

1 screen short
2 screen short
3 screen short
4 screen short
5 shreenshort
6 screen short

Pick image

You can use Image Picker for pick image from gallery/camera to pass the image for text recognition/detection by it's particular areas


    import 'package:image_picker/image_picker.dart';
    final pickedFile = await ImagePicker().pickImage(source: ImageSource.gallery);
    

Text Recognition/Detection Through Select area over image

After getting the picked image, we can start doing text recognition by navigate to detection screen.


    Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => SelectImageAreaTextDetect(
            detectOnce: isDetectOnce,
            enableImageInteractions: enableImageInteractions,
            imagePath: pickedFile?.path ?? '',
            onDetectText: (v) {
                setState(() {
                ///For single detection
                if (v is String) {
                    detectedValue = v;
                }
                ///For multiple area's detections
                if (v is List) {
                    int counter = 0;
                    v.forEach((element) {
                    detectedValue += "$counter. \t\t $element \n\n";
                    counter++;
                    });
                }
                });
            }, onDetectError: (error) {
                print(error);
                ///This error will occurred in Android only while user will try to crop image at max zoom level then ml kit will throw max 32 height/width exception
                if(error is PlatformException && (error.message?.contains("InputImage width and height should be at least 32!") ?? false)) {
                ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("Selected area should be able to crop image with at least 32 width and height.")));
            }
    },)));
        
Output

If you'll pass detect once as true then the result of Single Text Detection is single dynamic value.

Screenshot

6 screen short

If you'll pass detect once as false then the result of Multiple Text Detection Through Particular Image's Area list of dynamic values.

Example project

You can learn more from example project here.

Changelog

Please see CHANGELOG for more information what has changed recently.

Conclusion

Integrating Flutter Text Detect Area SDK into your Flutter application offers a convenient solution for text recognition by allowing users to select areas over images and live camera feeds. With features like draggable area selectors and the ability to enable or disable image interactions, this package simplifies the process of text detection. By following the installation guide and leveraging functionalities like single or multiple text detection, developers can enhance their Flutter apps with powerful text recognition capabilities.

FAQ

Flutter Text Detect Area is a package that simplifies text recognition in Flutter apps by allowing users to select areas over images and live camera feeds.

Simply add the package dependency to your pubspec.yaml file and import the package into your project. You can find the latest version on pub.dev.

Flutter Text Detect Area provides draggable area selectors for text recognition, the ability to enable or disable image interactions, and options for single or multiple text detection.

You can explore the example project provided with the package to gain a better understanding of its usage and capabilities.

Yes, you can refer to the CHANGELOG file for information on recent updates and changes to the package.

Dhaval Baldha
Dhaval Baldha

Co-founder

Dhaval is a visionary leader driving technological innovation and excellence. With a keen strategic mindset and deep industry expertise, he propels the company towards new heights. His leadership and passion for technology make him a cornerstone of Techvoot Solutions' success.

Linkedin
Hire Skilled Developer

*Please fill all the required fields

Get our Newsletter

Customized solutions for your projects

*Please fill all the required fields