Usage of ML Kit Services in Flutter - Huawei Developers

Hello everyone, in this article, we’ll develop a flutter application using the Huawei Ml kit’s text recognition, translation and landmark services. Lets get start it.
About the Service
Flutter ML Plugin enables communication between the HMS Core ML SDK and Flutter platform. This plugin exposes all functionality provided by the HMS Core ML SDK.
HUAWEI ML Kit allows your apps to easily leverage Huawei’s long-term proven expertise in machine learning to support diverse artificial intelligence (AI) applications throughout a wide range of industries. Thanks to Huawei’s technology accumulation, ML Kit provides diversified leading machine learning capabilities that are easy to use, helping you develop various AI apps.
Configure your project on AppGallery Connect
Registering a Huawei ID
You need to register a Huawei ID to use the plugin. If you don’t have one, follow the instructions here.
Preparations for Integrating HUAWEI HMS Core
First of all, you need to integrate Huawei Mobile Services with your application. I will not get into details about how to integrate your application but you can use this tutorial as step by step guide.
Integrating the Flutter Ml Plugin
1. Download the ML Kit Flutter Plugin and decompress it.
2. On your Flutter project directory find and open your pubspec.yaml file and add library to dependencies to download the package from pub.dev. Or if you downloaded the package from the HUAWEI Developer website, specify the library path on your local device. For both ways, after running pub get command, the plugin will be ready to use.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
1. Text Recognition
The text recognition service extracts text from images of receipts, business cards, and documents. This service is widely used in office, education, transit, and other apps. For example, you can use this service in a translation app to extract text in a photo and translate the text, improving user experience.
This service can run on the cloud or device, but the supported languages differ in the two scenarios. On-device APIs can recognize text in Simplified Chinese, Japanese, Korean, and Latin-based languages (refer to Latin Script Supported by On-device Text Recognition). When running on the cloud, the service can recognize text in languages such as Simplified Chinese, English, Spanish, Portuguese, Italian, German, French, Russian, Japanese, Korean, Polish, Finnish, Norwegian, Swedish, Danish, Turkish, Thai, Arabic, Hindi, and Indonesian.
Remote Text Analyzer
The text analyzer is on the cloud, which runs a detection model on the cloud after the cloud API is called.
Implementation Procedure
Create an MlTextSettings object and set desired values. The path is mandatory.
Code:
MlTextSettings _mlTextSettings;
@override
void initState() {
_mlTextSettings = new MlTextSettings();
_checkPermissions();
super.initState();
}
Then call analyzeRemotely method by passing the MlTextSettings object you’ve created. This method returns an MlText object on a successful operation. Otherwise it throws exception.
Code:
_startRecognition() async {
_mlTextSettings.language = MlTextLanguage.English;
try {
final MlText mlText = await MlTextClient.analyzeRemotely(_mlTextSettings);
setState(() {
_recognitionResult = mlText.stringValue;
});
} on Exception catch (e) {
print(e.toString());
}
}
Here’s the result.
2. Text Translation
The translation service can translate text into different languages. Currently, this service supports offline translation of text in Simplified Chinese, English, German, Spanish, French, and Russian (automatic model download is supported), and online translation of text in Simplified Chinese, English, French, Arabic, Thai, Spanish, Turkish, Portuguese, Japanese, German, Italian, Russian, Polish, Malay, Swedish, Finnish, Norwegian, Danish, and Korean.
Create an MlTranslatorSettings object and set the values. Source text must not be null.
Code:
MlTranslatorSettings settings;
@override
void initState() {
settings = new MlTranslatorSettings();
super.initState();
}
Then call getTranslateResult method by passing the MlTranslatorSettings object you’ve created. This method returns translated text on a successful operation. Otherwise it throws exception.
Code:
_startRecognition() async {
settings.sourceLangCode = MlTranslateLanguageOptions.English;
settings.sourceText = controller.text;
settings.targetLangCode = MlTranslateLanguageOptions.Turkish;
try {
final String result =
await MlTranslatorClient.getTranslateResult(settings);
setState(() {
_translateResult = result;
});
} on Exception catch (e) {
print(e.toString());
}
}
Here’s the result.
3. Landmark Recognition
The landmark recognition service can identify the names and latitude and longitude of landmarks in an image. You can use this information to create individualized experiences for users. For example, you can create a travel app that identifies a landmark in an image and gives users the location along with everything they need to know about that landmark.
Landmark Recognition
This API is used to carry out the landmark recognition with customized parameters.
Implementation Procedure
Create an MlLandMarkSettings object and set the values. The path is mandatory.
Code:
MlLandMarkSettings settings;
String _landmark = "landmark name";
String _identity = "landmark identity";
dynamic _possibility = 0;
dynamic _bottomCorner = 0;
dynamic _topCorner = 0;
dynamic _leftCorner = 0;
dynamic _rightCorner = 0;
@override
void initState() {
settings = new MlLandMarkSettings();
_checkPermissions();
super.initState();
}
Then call getLandmarkAnalyzeInformation method by passing the MlLandMarkSettings object you’ve created. This method returns an MlLandmark object on a successful operation. Otherwise it throws exception.
Code:
try {
settings.patternType = LandmarkAnalyzerPattern.STEADY_PATTERN;
settings.largestNumberOfReturns = 5;
final MlLandmark landmark =
await MlLandMarkClient.getLandmarkAnalyzeInformation(settings);
setState(() {
_landmark = landmark.landmark;
_identity = landmark.landmarkIdentity;
_possibility = landmark.possibility;
_bottomCorner = landmark.border.bottom;
_topCorner = landmark.border.top;
_leftCorner = landmark.border.left;
_rightCorner = landmark.border.right;
});
} on Exception catch (e) {
print(e.toString());
}
}
Here’s the result.
Demo proje github link:
https://github.com/EfnanAkkus/Ml-Kit-Usage-Flutter
Resources:
https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/introduction-0000001051432503
https://developer.huawei.com/consumer/en/hms/huawei-mlkit

---

How much time it takes to integrate ML Kit in flutter ? Does flutter provides native look and feel ?