Google I/O 21 Extended Double S - Flutter Desktop

Slide 1

Slide 1 text

Slide 2

Slide 2 text

박제창- Angel Robotics @jaichangpark Flutter Desktop Flutter 2

Slide 3

Slide 3 text

Target audience Flutter를 경험해 본적이 없거나 이제 막 시작한분 비전공자 / 디자이너 개발경험이 있는분 3 Cross-Platform에 대한 관심이 있으며 Flutter에 대해 이제 막 개발을 시작. 또는 Native개발자이지만 Flutter에 관심이 있음. 비전공자/디자이너 이자 디자인에 대한 실체 구현에 Flutter를 사용 개발 시작부터 배포까지 모든 과정을 Flutter를 사용하여 개발하고 상태관리와 UI에 대한 이해가 충분. Flutter를 사용하여 실제 프로덕트 출시까지 해보신분

Slide 4

Slide 4 text

Target audience Flutter를 경험해 본적이 없거나 이제 막 시작한분 비전공자 / 디자이너 개발경험이 있는분 4 Cross-Platform에 대한 관심이 있으며 Flutter에 대해 이제 막 개발을 시작. 또는 Native개발자이지만 Flutter에 관심이 있음. 비전공자/디자이너 이자 디자인에 대한 실체 구현에 Flutter를 사용 개발 시작부터 배포까지 모든 과정을 Flutter를 사용하여 개발하고 상태관리와 UI에 대한 이해가 충분. Flutter를 사용하여 실제 프로덕트 출시까지 해보신분

Slide 5

Slide 5 text

Target audience Flutter를 경험해 본적이 없거나 이제 막 시작한분 비전공자 / 디자이너 개발경험이 있는분 5 Cross-Platform에 대한 관심이 있으며 Flutter에 대해 이제 막 개발을 시작. 또는 Native개발자이지만 Flutter에 관심이 있음. 비전공자/디자이너 이자 디자인에 대한 실체 구현에 Flutter를 사용 개발 시작부터 배포까지 모든 과정을 Flutter를 사용하여 개발하고 상태관리와 UI에 대한 이해가 충분. Flutter를 사용하여 실제 프로덕트 출시까지 해보신분

Slide 6

Slide 6 text

6 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion

Slide 7

Slide 7 text

“Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.” Flutter.dev 7

Slide 8

Slide 8 text

한번 예를들어 볼게요. UI toolkit? a single codebase? 8

Slide 9

Slide 9 text

9 You A: 그림 그리기 B: 제빵하기/쿠키만들기 A B

Slide 10

Slide 10 text

사물 스캔 & 생각 밑그림& 크로키 실제 그리기 유화, 수채화 뎃생등 마무리 &프린팅 쿠키 모양 드로잉 & 고객 요구 재료 준비 생지만들기 형태 만들기 & 굽기 쿠키 완성 & 결과 비교 레시피 완성 10 A B

Slide 11

Slide 11 text

11 Design/Object

Slide 12

Slide 12 text

12 Tools

Slide 13

Slide 13 text

13 Framework

Slide 14

Slide 14 text

14 Platform

Slide 15

Slide 15 text

15 Programming or Coding Design object you Tool & Framework platform platform Tool & Framework you

Slide 16

Slide 16 text

16 Cross-Platform Single Code base

Slide 17

Slide 17 text

17 4 Flutter Point

Slide 18

Slide 18 text

1. Dart 18 Made by

Slide 19

Slide 19 text

2. Declarative UI 19

Slide 20

Slide 20 text

20 @source: Andre A Menegassi, Andre T Endo, Automated Tests for Cross-Platform Mobile Apps in Multiple Configurations, IET Software, September 2019

Slide 21

Slide 21 text

2. Declarative UI 21 Deprecated

Slide 22

Slide 22 text

3. Native Performance 22 Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android

Slide 23

Slide 23 text

4. Open source 23 https://github.com/flutter/flutter

Slide 24

Slide 24 text

24 Flutter Architectural Layers @source: https://flutter.dev/docs/resources/architectural-overview

Slide 25

Slide 25 text

25 @source: 1. What's new in Flutter | Keynote 2. https://flutter.dev/showcase

Slide 26

Slide 26 text

26 Medical device certification

Slide 27

Slide 27 text

Fuchsia is an open source project that currently supports a variety of languages and runtimes, including C++, Web, Rust, Go, Flutter, and Dart. Fuchsia Pink + Purple == Fuchsia (a new operating system) https://cs.opensource.google/fuchsia Flutter-on-Fuchsia Velocity Google starts rolling out Fuchsia OS to original Nest Hub 9to5google.com Google is releasing Fuchsia OS, starting w/ 1st-gen Nest Hub Zircon Kernel

Slide 28

Slide 28 text

28 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion

Slide 29

Slide 29 text

Slide 30

Slide 30 text

30 @source: Tim Sneath, Announcing Flutter 2.2 at Google I/O 2021, may 19

Slide 31

Slide 31 text

“ This release merges 2,456 PRs and closes 3,105 issues across the framework, engine, and plugins repositories.” Chris Sells Sr. Product Manager 31

Slide 32

Slide 32 text

32 Welcome to Google I/O Adventure

Slide 33

Slide 33 text

33 @source: Developer Keynote (Google I/O '21) 1. SONY、TOYOTA、Canonical、Microsoft、 Samsung 의 대응 2. 플레이스토어에는 20만개의 플러터 앱이 존재 3. TikTok을 개발한 ByteDance사는 70개 이상의 앱을 플러터로 개발 생산성이 높고 기능개발과 배포에 대한 시간이 30% 단축 4. 구글의 경우 30개 이상의 팀이 이미 Flutter를 사용 중 5. 구글 페이의 경우 Flutter로 Migration하여 약 45%의 코드 감소 (200만줄에서 110만줄로 코드감소) 6. 올해 말 Material You에 대한 지원 예정 Developer Keynote Summary

Slide 34

Slide 34 text

34 @source: What's new in Flutter | Keynote 1. Grab: 앱은 2억회 이상 다운로드 되었고 개발시간 1/3이상 단축 2. BMW: BMW Mini앱은 200만 명이 이용중이고 300명의 엔지니어가 Flutter 앱으로 개발 3. NuBank: 빌드시간 단축, 병합 성공률 30% 향상, 병합 시간 85% 감소 4. Kotak: 6개월만에 프로덕트 출시 5. Tencent: 20개 이상의 앱을 Flutter로 개발, WeChat또한 Flutter로 변경하여 재 개발 6. WeChat for work팀은 Flutter를 사용하여 25% 개발시간 단축 왜 Flutter를 사용하는가?

Slide 35

Slide 35 text

Flutter 2.2 Dart 2.13 Dart Type Aliases Null Safety 35 Improvement Flutter Web @source: What's new in Flutter | Keynote https://medium.com/dartlang/announcing- dart-2-13-c6d547b57067

Slide 36

Slide 36 text

Flutter 2.2 Flutter Flow Desktop - beta Windows UWP - alpha 36 Dart Dev Tool 개선 @source: What's new in Flutter | Keynote

Slide 37

Slide 37 text

Flutter 2.2 GMA(Google Mobile Ads) SDK For Flutter In-app-purchase Plugin 37 Google Cloud 대응 @source: What's new in Flutter | Keynote https://pub.dev/packages/in_app_purchase https://pub.dev/packages/google_mobile_ads

Slide 38

Slide 38 text

Null Safety 38 Takoyaki 틀 = 메모리 Takoyaki = 데이터/인스턴스 빈공간 = Null Null Null이 생겼고 앞으로 Null이 생길거 같네 절대 Null이 발생하면 안돼. (항시 감시) ? , ?? , ! , late 10개주문 10개가 아닌거 같아 Dart VM https://github.com/dart-lang/sdk/projects/16

Slide 39

Slide 39 text

Migrating to null safety 39 @Migrating an old app to Flutter 2 (The Boring Flutter Development Show, Ep. 49) @How to migrate Dart packages to null safety View the migration suggestions by visiting: http://127.0.0.1:60278/Users/you/proje ct/mypkg.console-simple?authToken= Xfz0jvpyeMI%3D

Slide 40

Slide 40 text

Flutter 2 40 March 3, 2021, Flutter Engage https://events.flutter.dev/ Announcing Flutter 2 What's New in Flutter 2. by Chris Sells | Mar, 2021 Flutter web support hits the stable milestone | Flutter Announcing Dart 2.12. Sound null safety and Dart FFI ship to… | by Michael Thomsen | Dart

Slide 41

Slide 41 text

41 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion

Slide 42

Slide 42 text

42 Stable beta dev master Flutter Channel Desktop Beta Desktop Beta Desktop Beta Desktop Beta Windows UWP alpha Windows UWP alpha Flutter Desktop

Slide 43

Slide 43 text

43 ● 데스크톱 앱은 플랫폼에 따라 가진 고유 디자인이 있음. ● 플러터로 이를 구현하기 위해서는 커스터마이즈 위젯개발이 필요함. ● Raw Level의 위젯 커스터마이즈 과정과 방법을 설명.

Slide 44

Slide 44 text

44 14년 전에 개발한 데스크톱 앱을 플러터로 재현

Slide 45

Slide 45 text

45 https://github.com/flutter/flutter/tree/master/packages/flutter/lib Flutter Source는 이곳에

Slide 46

Slide 46 text

46 Spinner를 Material Design으로 구현할 경우 에러가 발생. → Custom 위젯을 제작

Slide 47

Slide 47 text

47 3 Parallel Tree Widget Tree Element Tree Widget은 Immutable Widgets are not updated directly, instead you have to work with the widget’s state. The widgets are held by the element tree, which retains the logical structure of the user interface. The element tree is necessary because the widgets themselves are immutable. The element tree also holds the state objects associated with stateful widgets. The Flutter render tree is a low-level layout and painting system based on a retained tree of objects that inherit from RenderObject. Render(Object) Tree

Slide 48

Slide 48 text

48 Flutter Pipeline User input Animation Build Layout Paint Composite Rasterize

Slide 49

Slide 49 text

49 Flutter Pipeline User input Animation Build Layout Paint Composite Rasterize Rendering

Slide 50

Slide 50 text

50 The Mahogany Staircase - Flutter's Layered Design How Flutter renders Widgets Widget Tree Element Tree Render Tree

Slide 51

Slide 51 text

51 Element RenderObject State Widget Implementation Mouse Input Keyboard Input Accessibility (sementic) Focus Management

Slide 52

Slide 52 text

52 Widget Tree https://github.com/tvolkert/chicago/tree/master/lib/src

Slide 53

Slide 53 text

53 CreateElement로 Element 생성 Element Tree https://github.com/tvolkert/chicago/tree/master/lib/src

Slide 54

Slide 54 text

54 createRenderObject로 Renderobject 생성 Render Tree https://github.com/tvolkert/chicago/tree/master/lib/src

Slide 55

Slide 55 text

55 Spinner element https://github.com/tvolkert/chicago/tree/master/lib/src

Slide 56

Slide 56 text

56 Spinner Render https://github.com/tvolkert/chicago/tree/master/lib/src

Slide 57

Slide 57 text

57 Widget Tree https://github.com/tvolkert/chicago/tree/master/lib/src

Slide 58

Slide 58 text

58 Widget Tree Mouse Input Button Widget https://github.com/tvolkert/chicago/tree/master/lib/src

Slide 59

Slide 59 text

59 https://github.com/tvolkert/chicago/tree/master/lib/src

Slide 60

Slide 60 text

60 https://tvolkert.github.io/#/

Slide 61

Slide 61 text

61 Conclusion

Slide 62

Slide 62 text

어떻게 Desktop앱을 만드나요? 62 Flutter Desktop 시작은 생각보다 어렵지 않습니다.

Slide 63

Slide 63 text

63 ● 윈도우의 경우 Visual Studio를 설치하는게 좋습니다. ● Android Studio에서 Flutter SDK Path를 설정하시면 자동으로 Dart 또한 설정됩니다.

Slide 64

Slide 64 text

64 ● 만약 Visual Studio가 설치되지 않았다면 .. ● Desktop development with C++ 에 대한 설치를 완료해주세요.

Slide 65

Slide 65 text

65 Desktop Setting

Slide 66

Slide 66 text

66 Desktop Setting Windows UWP

Slide 67

Slide 67 text

67 Create Flutter Project Android Studio Terminal

Slide 68

Slide 68 text

68 Build & Run Flutter Desktop Android Studio Terminal

Slide 69

Slide 69 text

69 Build & Run Flutter Desktop Terminal

Slide 70

Slide 70 text

실제 Field에서 사용하고 있나요? 70 저는 3-4개정도 Desktop앱을 사용하고 있습니다.

Slide 71

Slide 71 text

71 https://github.com/JAICHANGPARK/flutter_2fa_generator For Example

Slide 72

Slide 72 text

72 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion

Slide 73

Slide 73 text

73 4 Flutter Tip

Slide 74

Slide 74 text

Typically, a responsive app has had its layout tuned for the available screen size. Often this means (for example), re-laying out the UI if the user resizes the window, or changes the device’s orientation. This is especially necessary when the same app can run on a variety of devices, from a watch, phone, tablet, to a laptop or desktop computer. The difference between an adaptive and a responsive app Adapting an app to run on different device types, such as mobile and desktop, requires dealing with mouse and keyboard input, as well as touch input. It also means there are different expectations about the app’s visual density, how component selection works (cascading menus vs bottom sheets, for example), using platform-specific features (such as top-level windows), and more. Responsive Adaptive 74 1

Slide 75

Slide 75 text

Slide 76

Slide 76 text

Slide 77

Slide 77 text

77 1. flutter_screenutil | Flutter Package 2. responsive_builder | Flutter Package 3. responsive_framework | Flutter Package 4. universal_platform | Dart Package

Slide 78

Slide 78 text

78 2 bdlukaa/fluent_ui: Implements Microsoft's Fluent Design System in Flutter.

Slide 79

Slide 79 text

79 3

Slide 80

Slide 80 text

Slide 81

Slide 81 text

81 4

Slide 82

Slide 82 text

82 Prototype Dash 1.0 Dash 2.0/2.1 2.0 2.1 Shams Zakhour Linda Rasmussen Nina Chen Joshy Joseph Shams Zakhour

Slide 83

Slide 83 text

83 @dash_the_dartlang_plushy 1. Dash is female 2. Dash has a straight beak. 3. Dash is an early code name for the Dart project Mega-Dash, a life-sized mascot who is currently resting in a locked-down Google oﬃce Interview With Shams Zakhour (Flutter Live) How to get Plushy with Dart (DartConf 2018)

Slide 84

Slide 84 text

84 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion

Slide 85

Slide 85 text

85 1. Flutter is UI Toolkit 2. Flutter 2.2! 3. Flutter Desktop with Customize widget 4. Create & Build Desktop app

Slide 86

Slide 86 text

Thank you! Stay safe and healthy https://flutter.dev/ https://github.com/flutter/flutter Resources 86 박제창 - Angel Robotics @jaichangpark https://github.com/JAICHANGPARK @itsmyowndreamwalker https://www.youtube.com/c/JAICHANGPARK