Выход:
В этой статье мы будем сканировать объекты с помощью Google ML-KIT в нашем приложении флаттера. Машинное обучение — горячая тема во флаттере и в этой современной области технологий. Я много искал на среде здесь, Github и других сайтах и источниках, но я не нашел последний и официальный способ, который Google рекомендует реализовать по этой теме. Вот почему я использую Google ML-KIT в своих статьях, чтобы предоставить обновленный и правильный способ привнести вкус машинного обучения в наши приложения для флаттера. В предыдущей статье ML мы узнали, как сканировать лица в флаттер-приложении с помощью Google ML KIT.
На этот раз структура, шаблон и процедура проекта такие же, как и в предыдущем (Шаблон GetX), но вместо сканирования лиц мы внесем некоторые изменения. в Google ML-KIT для сканирования объектов на изображении.
Примечание:
ML Kit от Google для Flutter — это набор плагинов Flutter, которые позволяют приложениям Flutter использовать автономный ML Kit от Google.
В версиях 0.7.3 и более ранних все функции были включены в один плагин, но у многих разработчиков начались проблемы с размером их приложений, потому что, хотя им нужна была только одна функция, плагин включал все ресурсы для остальных функций, что значительно увеличило размер приложения.
Начиная с версии 0.8.0 мы разделили плагин на несколько плагинов, чтобы разработчики могли использовать только то, что им нужно. google_ml_kit теперь является зонтичным плагином, включающим все плагины.
Я использую единый полный набор подключаемых модулей, но вы можете посетить здесь, чтобы использовать определенный подключаемый модуль для конкретной задачи.
Теперь приступим.
1-Создать новый проект Flutter
Создайте новый проект флаттера с именем по вашему выбору (ml_kit_object_detector).
2-Shift Project to GetX Pattern
Примечание. если вы хотите использовать простой проект без GetX, создайте собственный шаблон (Контроллеры (логика) или Представления (экраны)).
Я буду использовать шаблон GetX с помощью команд Get & CLI. Если вы не знакомы с GET & CLI, прочтите мою предыдущую статью и активируйте CLI.
Чтобы перевести проект на шаблон GetX, перейдите в корневой терминал проекта и запустите приведенные ниже команды (работают только в том случае, если вы включили Get & CLI в вышеупомянутой статье).
получить инициализацию
Теперь структура проекта будет выглядеть так
Теперь структура проекта будет выглядеть так;
- Папка данных содержит все данные, которые нам нужно хранить в нашем проекте.
- Папка модуля содержит все страницы приложения (экран)
- Папка Routes будет содержать все маршруты проекта (автоматически создаются при создании страницы)
Дополнительная папка Modules содержит Модели, Контроллеры и Представления для хранения соответствующих файлов.
3- Установите необходимые пакеты в Pubspec.yaml
1- image_picker здесь
2- google_ml_kit здесь
dependencies:
cupertino_icons: ^1.0.2
get: 4.6.5
flutter:
sdk: flutter
image_picker: ^0.8.5+3
google_ml_kit: ^0.12.0
ПРИМЕЧАНИЕ. Пожалуйста, следуйте полному руководству для платформы (android, ios, web) из pub. dev при установке пакетов.
4- Создание пользовательского интерфейса
HomeView создается автоматически, вы можете создать новую страницу с помощью следующей команды
получить создать страницу: your_page_name
1- Пользовательский виджет кнопки
Создайте новый файл дротика для пользовательского виджета кнопки, чтобы мы могли вызывать его снова и снова для будущего использования, и поместите этот код как
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class DefaultButton extends StatelessWidget {
DefaultButton({
Key? key,
this.text,
required this.btnColor,
this.press,
}) : super(key: key);
final String? text;
Color btnColor;
final Function? press;
@override
Widget build(BuildContext context) {
return SizedBox(
width: Get.width,
// height: getProportionateScreenHeight(100),
child: TextButton(
style: TextButton.styleFrom(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
primary: Colors.white,
backgroundColor: btnColor,
),
onPressed: press as void Function()?,
child: Text(
text!,
style: TextStyle(
fontSize: 16,
color: Colors.black,
),
),
),
);
}
}
2- Художник по объектам
Создайте новый файл дротика, чтобы создать прямоугольник, который будет выделять и закрашивать объекты на изображении. Вставьте код как
import 'package:flutter/material.dart';
import 'dart:ui'as ui;
import 'package:google_ml_kit/google_ml_kit.dart';
class ObjectPainter extends CustomPainter {
final ui.Image image;
final List<DetectedObject> objects;
final List<Rect> rects = [];
ObjectPainter(this.image, this.objects) {
for (var i = 0; i < objects.length; i++) {
rects.add(objects[i].boundingBox);
}
}
@override
void paint(ui.Canvas canvas, ui.Size size) {
final Paint paint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 4.0
..color = Colors.green;
canvas.drawImage(image, Offset.zero, Paint());
for (var i = 0; i < objects.length; i++) {
canvas.drawRect(rects[i], paint);
}
}
@override
bool shouldRepaint(ObjectPainter oldDelegate) {
return image != oldDelegate.image || objects != oldDelegate.objects;
}
}
3- Домашний вид (страница)
Перейдите в lib/app/modules/home/views.
HomeView.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ml_kit_object_detector_flutter/components/custom_button.dart';
import 'package:ml_kit_object_detector_flutter/painter/Object_Painter.dart';
import '../controllers/home_controller.dart';
class HomeView extends GetView<HomeController> {
const HomeView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Get.put(HomeController());
return GetBuilder<HomeController>(
builder: (context) {
return Scaffold(
appBar: AppBar(
title: Text("Object Detector flutter"),
centerTitle: true,
toolbarHeight: 40,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
controller.isLoading.value
? Center(child: CircularProgressIndicator())
: Center(
child: Container(
width: Get.width,
height: 200,
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey)
),
child:
(controller.selectedImagePath.value.isEmpty)
? Center(child: Text('No image selected')):
FittedBox(
child: SizedBox(
width: controller.iimage?.width.toDouble(),
height: controller.iimage?.height.toDouble(),
child: Image.file(File(controller.selectedImagePath.value)),
),
),
),
),
DefaultButton(btnColor: Colors.white,press: (){
controller.getImageAndDetectObjects();
},
text: "Pick Image",),
Container(
width: Get.width,
height: 200,
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey)
),
child:
(controller.iimageFile == null)
? const Center(child: Text('No object detected in image')):
FittedBox(
child: SizedBox(
width: controller.iimage?.width.toDouble(),
height: controller.iimage?.height.toDouble(),
child: CustomPaint(
painter: ObjectPainter(controller.iimage!, controller.objectss!),
),
),
),
),
],
),
)
);
}
);
}
}
4- Домашний контроллер (бэкенд)
Перейдите в lib/app/modules/home/controllers.
HomeController.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'dart:ui'as ui;
import 'package:google_ml_kit/google_ml_kit.dart';
import 'package:image_picker/image_picker.dart';
class HomeController extends GetxController {
//TODO: Implement HomeController
var selectedImagePath=''.obs;
var extractedBarcode=''.obs;
RxBool isLoading = false.obs;
XFile ?iimageFile;
List<DetectedObject> ?objectss;
ui.Image ?iimage;
Future <void>getImageAndDetectObjects() async {
final imageFile = (await ImagePicker().pickImage(source: ImageSource.gallery)) ;
//var imageFilee=imageFile.toFile();
isLoading.value = true;
selectedImagePath.value=imageFile!.path;
final image = InputImage.fromFilePath(imageFile.path) ;
var objectDetector=GoogleMlKit.vision.objectDetector(options: ObjectDetectorOptions(mode: DetectionMode.single, classifyObjects: true, multipleObjects: true));
List<DetectedObject> objects = await objectDetector.processImage(image);
iimageFile = imageFile;
objectss = objects;
_loadImage(imageFile);
update();
}
///////load image with object recognition
_loadImage(XFile file) async {
final data = await file.readAsBytes();
await decodeImageFromList(data).then(
(value) =>
iimage = value);
isLoading.value = false;
update();
}
@override
void onInit() {
super.onInit();
}
@override
void onReady() {
super.onReady();
}
@override
void onClose() {
super.onClose();
}
}
Вывод:
1-
2-
****************************************************************
Поздравляем! Вы научились сканировать объекты, используя официальный и правильный способ, предложенный Google ML-KIT с шаблоном flutter & GetX. . Следите за моей следующей статьей о машинном обучении с помощью флаттера.
Похлопайте статье и подпишитесь на меня, чтобы не пропустить новые флаттер-статьи.
Исходный код :
Больше статей от меня
Покажите мне некоторую поддержку
Я профессиональный разработчик мобильных приложений Flutter. Пожалуйста, свяжитесь со мной, чтобы помочь вам с вашими задачами и проектами.
