2019 I/O extended Android 에서 발표한 Flutter ❤️ML Kit 발표자료입니다.

1. Flu$er ❤ ML Kit

2. Flu$er ❤ ML Kit
조성윤
ParkingBrother CTO
GDG Busan Organizer
@extJo

3. 개발 하다 보면 힘든 점?
Android iOS
Web Desktop

5. Flu$er? ML Kit?

7. SDK for Mobile App
based on DaC language
Flu$er is…

8. Flu$er has…
Built-in beautiful Material Design
and CupeCino widget, rich motion
APIs, smooth natural scrolling, and
plaJorm awareness

9. Flu$er has…
Develop iOS and Android
App with single code base

10. Flu$er developed on…
The Fastest growing language
DaC 싫어하지 마세요 ㅠㅠ
DaC 2.0 좋습니다

11. Everything is Widget

12. Declarative UI
// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)
// Declarative style
return ViewB(
color: red,
child: ViewC(...),
)

13. Native
Binary
Code
Canvas
Events
Flutter Application
Service
Location
Camera
Bluetooth
Sensors
Platform
Channels
Flutter Widgets
Material Design
Cupertino

14. Android iOS
Web
(Technical Preview)
Desktop

16. Android iOS
Web
(Technical Preview)
Desktop

17. Do You Know…?
Open CV
Object Detection
RNN
CNN
Face Detection
NLP
GAN
그거 인공지능으로 하면 되지않나요?
다른데도 다 하던데…

20. • Text Recognition - OCR
• Face Detection
• Barcode Scan
• Label Images (Cloud)
• Landmark Detection (Cloud)
Vision
• Identify the language of text (Cloud)
• Generate SmaC replies (Cloud)
Natural Language
• Use Custom Model
• Use custom TensorFlow Lite Build
Custom Model

22. • Text Recognition - OCR
• Face Detection
• Barcode Scan
• Label Images (Cloud)
• Landmark Detection (Cloud)
Vision
• Identify the language of text (Cloud)
• Generate SmaC replies (Cloud)
Natural Language
• Use Custom Model
• Use custom TensorFlow Lite Build
Custom Model

23. Let’s Do This 😎

24. extended
Camera Module
Firebase ML Vision

25. extended
dependencies:
u]er:
sdk: u]er
camera: ^0.5.1
arebase_ml_vision: ^0.7.0
pubspec.yaml

26. extended
Firebase Se$ing…😅

27. extended
void main() => runApp(MaterialApp(home: MLKitSamplePage()));
class MLKitSamplePage extends StatefulWidget {
@override
MLKitSampleState createState() => MLKitSampleState();
}
class MLKitSampleState extends State<MLKitSamplePage> {
...
}

28. extended
void _initializeCamera() async {
CameraDescription description = await getCamera(_direction);
ImageRotation rotation = rotationIntToImageRotation(
description.sensorOrientation,
);
_cameraController = CameraController(
description,
ResolutionPreset.medium,
);
await _cameraController.initialize();
…
}

29. extended
@override
Widget build(BuildContext context) {
return Scakold(
appBar: AppBar(
title: const Text('Flu]er ❤ ML Kit'),
),
body: _buildImage(),
oatingActionBu]on: FloatingActionBu]on(
onPressed: _toggleCameraDirection,
child: _direction == CameraLensDirection.back
? const Icon(Icons.camera_front)
: const Icon(Icons.camera_rear),
),
);
}

30. extended
Widget _buildPopUpMenuBu]on() {
return PopupMenuBu]on<Detector>(
onSelected: ...
itemBuilder: (BuildContext context) => <PopupMenuEntry<Detector>>[
const PopupMenuItem<Detector>(
child: Text('Detect Face'),
value: Detector.face,
),
const PopupMenuItem<Detector>(
child: Text('Detect Text'),
value: Detector.text,
),
],
);
}

31. extended
@override
Widget build(BuildContext context) {
return Scakold(
appBar: AppBar(
title: const Text('Flu]er ❤ ML Kit'),
actions: <Widget>[
_buildPopUpMenuBu]on()
],
),
...
);
}

32. extended
HandleDetection _getDetectionMethod() {
anal FirebaseVision mlVision = FirebaseVision.instance;
switch (_currentDetector) {
case Detector.text:
return mlVision.textRecognizer().processImage;
default:
asseC(_currentDetector == Detector.face);
return mlVision.faceDetector().processImage;
}
}

33. extended
Future<dynamic> detect(
CameraImage image,
HandleDetection handleDetection,
ImageRotation rotation,
) async {
return handleDetection(
FirebaseVisionImage.fromBytes(
concatenatePlanes(image.planes),
buildMetaData(image, rotation),
),
);
}

34. extended
void _staCImageDetect(ImageRotation rotation) {
_cameraController.staCImageStream((CameraImage image) {
if (_isDetecting) return;
_isDetecting = true;
detect(image, _getDetectionMethod(), rotation).then(
(dynamic result) {
setState(() {
_scanResults = result;
});
…
}

35. extended
class FaceDetectorPainter extends CustomPainter {
…
@override
void paint(Canvas canvas, Size size) {
anal Paint paint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2.0
..color = Colors.red;
for (Face face in faces) {
canvas.drawRect(
…
…
}

36. extended
class TextDetectorPainter extends CustomPainter {
...
@override
void paint(Canvas canvas, Size size) {
anal Paint paint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
for (TextBlock block in visionText.blocks) {
for (TextLine line in block.lines) {
for (TextElement element in line.elements) {
...
...
}

37. extended
🤩 Demo 🤩

38. extended
Less Code
More Functions

39. Thank You 😎
조성윤
ParkingBrother CTO
GDG Busan Organizer
@extJo