Using Firebase ML Kit in Flutter

Using Firebase ML Kit in Flutter

Implementing Machine Learning into our Flutter application. Learn how to implement Image Labeling, Text Recognition, Barcode Scanner using ML kit. ML Kit provides us on-Device and Cloud APIs. Image Labeling is a machine learning feature that tells us about the content of an image.

Introduction

Machine learning is becoming an essential technology as it can predict the possible outcomes. Through machine learning, we can train our machine and we can make it intelligent so that it can also take decision on its own. It is a subset of artificial intelligence.

With ML Kit we can integrate our app with various smart features such as:

  • Text Recognition
  • Face Detection
  • Image Labeling
  • Landmark recognition
  • Barcode scanning

ML Kit provides us on-Device and Cloud APIs. The on-Device process the data without the use of an internet connection, Cloud provides us high-level accuracy with the use of Google Cloud Platform’s machine learning technology.

In this blog, we shall discuss how to implement Image Labeling, Text Recognition, Barcode Scanner using ML kit. Image Labeling is a machine learning feature that tells us about the content of an image.

So let’s start:

To enable the use of ML Kit we need to connect the app with the firebase. We will be using two dependencies firebase_ml_vision: ^0.9.7

for ML Kit and image_picker: ^0.6.7+11 to get the image using a gallery or camera.

Configure Your App

Add the dependencies in your pubspec.yaml

firebase_ml_vision: ^0.9.7
image_picker: ^0.6.7+11

Edit your app/build.gradle

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    api 'com.google.firebase:firebase-ml-vision-image-label-model:17.0.2'
}

Edit your AndroidManifest.xml file

Add the following metadata inside the application section.

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

Creating ImagePicker :

  • Initializing File and ImagePicker objects
File _pickedImage;
ImagePicker picker = ImagePicker();
  • pickImage function with default ImageSource
void _pickImage(ImageSource imageSource) async {
  final pickedImageFile = await picker.getImage(
    source: imageSource,
  );

How Image Picker will look like?

We will first create a Container that will display the loaded image and a FlatButton.icon, on tapping the button an AlertDialog Box will appear it will show two options Complete action using Camera or Gallery. We can choose either the them.

  • Creating the Image **Container**
Padding(
  padding: const EdgeInsets.all(18.0),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: Container(
      color: Colors.orangeAccent.withOpacity(0.3),
      width: MediaQuery.of(context).size.width,
      height: 300,
      child: _pickedImage != null
          ? Image(
              image: FileImage(_pickedImage),
            )
          : Center(
              child: Text("Please Add Image"),
            ),
    ),
  ),
),
  • Creating a **FlatButton.icon**
FlatButton.icon(
  onPressed: () {
    showDialog(
        context: context,
        builder: (_) {
          return AlertDialog(
            title: Text(
              "Complete your action using..",
            ),
            actions: [
              FlatButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text(
                  "Cancel",
                ),
              ),
            ],
            content: Container(
              height: 120,
              child: Column(
                children: [
                  ListTile(
                    leading: Icon(Icons.camera),
                    title: Text(
                      "Camera",
                    ),
                    onTap: () {
                      _pickImage(ImageSource.camera);
                      Navigator.of(context).pop();
                    },
                  ),
                  Divider(
                    height: 1,
                    color: Colors.black,
                  ),
                  ListTile(
                    leading: Icon(Icons.image),
                    title: Text(
                      "Gallery",
                    ),
                    onTap: () {
                      _pickImage(ImageSource.gallery);
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
            ),
          );
        });
  },
  icon: Icon(Icons.add),
  label: Text(
    'Add Image',
  ),
)

flutter machine-learning firebase programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

Hire Flutter Developer

Are you looking for next-generation mobile applications to increase business benefits? **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")** is one of the most reputable mobile app development company, which provides Flutter...

Flutter Web and Machine Learning | Using Machine Learning in Flutter

Learn how to do machine learning (ML) in Flutter Web: Trains a machine learning model and predicts the value; Extracts features from an image using TensorFlow. Flutter Web and Machine Learning | Using ML in Flutter

What is Flutter and why you should learn it?

Flutter is an open-source UI toolkit for mobile developers, so they can use it to build native-looking Android and iOS applications from the same code base for both platforms. Flutter is also working to make Flutter apps for Web, PWA (progressive Web-App) and Desktop platform (Windows,macOS,Linux).

Hire Dedicated Flutter Developer

Are you planning for creating a native-like cross-platform app for your venture? **[Hire Dedicated Flutter Developer](https://hourlydeveloper.io/hire-dedicated-flutter-app-developer/ "Hire Dedicated Flutter Developer")** to develop cross-platform...