Google I/O 21 Extended Double S - Flutter Desktop

2021/06/30
Flutter Desktop

Transcript

2. 박제창- Angel Robotics @jaichangpark Flutter Desktop Flutter 2
3. Target audience Flutter를 경험해 본적이 없거나 이제 막 시작한분 비전공자 / 디자이너 개발경험이 있는분 3 Cross-Platform에 대한 관심이 있으며 Flutter에 대해 이제 막 개발을 시작. 또는 Native개발자이지만 Flutter에 관심이 있음. 비전공자/디자이너 이자 디자인에 대한 실체 구현에 Flutter를 사용 개발 시작부터 배포까지 모든 과정을 Flutter를 사용하여 개발하고 상태관리와 UI에 대한 이해가 충분. Flutter를 사용하여 실제 프로덕트 출시까지 해보신분
4. Target audience Flutter를 경험해 본적이 없거나 이제 막 시작한분 비전공자 / 디자이너 개발경험이 있는분 4 Cross-Platform에 대한 관심이 있으며 Flutter에 대해 이제 막 개발을 시작. 또는 Native개발자이지만 Flutter에 관심이 있음. 비전공자/디자이너 이자 디자인에 대한 실체 구현에 Flutter를 사용 개발 시작부터 배포까지 모든 과정을 Flutter를 사용하여 개발하고 상태관리와 UI에 대한 이해가 충분. Flutter를 사용하여 실제 프로덕트 출시까지 해보신분
5. Target audience Flutter를 경험해 본적이 없거나 이제 막 시작한분 비전공자 / 디자이너 개발경험이 있는분 5 Cross-Platform에 대한 관심이 있으며 Flutter에 대해 이제 막 개발을 시작. 또는 Native개발자이지만 Flutter에 관심이 있음. 비전공자/디자이너 이자 디자인에 대한 실체 구현에 Flutter를 사용 개발 시작부터 배포까지 모든 과정을 Flutter를 사용하여 개발하고 상태관리와 UI에 대한 이해가 충분. Flutter를 사용하여 실제 프로덕트 출시까지 해보신분
6. 6 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion
7. “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
8. 한번 예를들어 볼게요. UI toolkit? a single codebase? 8
9. 9 You A: 그림 그리기 B: 제빵하기/쿠키만들기 A B
10. 사물 스캔 & 생각 밑그림& 크로키 실제 그리기 유화, 수채화 뎃생등 마무리 &프린팅 쿠키 모양 드로잉 & 고객 요구 재료 준비 생지만들기 형태 만들기 & 굽기 쿠키 완성 & 결과 비교 레시피 완성 10 A B
11. 11 Design/Object
12. 12 Tools
13. 13 Framework
14. 14 Platform
15. 15 Programming or Coding Design object you Tool & Framework platform platform Tool & Framework you
16. 16 Cross-Platform Single Code base
17. 17 4 Flutter Point
18. 1. Dart 18 Made by
19. 2. Declarative UI 19
20. 20 @source: Andre A Menegassi, Andre T Endo, Automated Tests for Cross-Platform Mobile Apps in Multiple Configurations, IET Software, September 2019
21. 2. Declarative UI 21 Deprecated
22. 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
23. 4. Open source 23 https://github.com/flutter/flutter
24. 24 Flutter Architectural Layers @source: https://flutter.dev/docs/resources/architectural-overview
25. 25 @source: 1. What's new in Flutter | Keynote 2. https://flutter.dev/showcase
26. 26 Medical device certification
27. 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
28. 28 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion
30. 30 @source: Tim Sneath, Announcing Flutter 2.2 at Google I/O 2021, may 19
31. “ This release merges 2,456 PRs and closes 3,105 issues across the framework, engine, and plugins repositories.” Chris Sells Sr. Product Manager 31
32. 32 Welcome to Google I/O Adventure
33. 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
34. 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를 사용하는가?
35. 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
36. Flutter 2.2 Flutter Flow Desktop - beta Windows UWP - alpha 36 Dart Dev Tool 개선 @source: What's new in Flutter | Keynote
37. 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
38. Null Safety 38 Takoyaki 틀 = 메모리 Takoyaki = 데이터/인스턴스 빈공간 = Null Null Null이 생겼고 앞으로 Null이 생길거 같네 절대 Null이 발생하면 안돼. (항시 감시) ? , ?? , ! , late 10개주문 10개가 아닌거 같아 Dart VM https://github.com/dart-lang/sdk/projects/16
39. 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
40. 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
41. 41 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion
42. 42 Stable beta dev master Flutter Channel Desktop Beta Desktop Beta Desktop Beta Desktop Beta Windows UWP alpha Windows UWP alpha Flutter Desktop
43. 43 • 데스크톱 앱은 플랫폼에 따라 가진 고유 디자인이 있음. • 플러터로 이를 구현하기 위해서는 커스터마이즈 위젯개발이 필요함. • Raw Level의 위젯 커스터마이즈 과정과 방법을 설명.
44. 44 14년 전에 개발한 데스크톱 앱을 플러터로 재현
45. 45 https://github.com/flutter/flutter/tree/master/packages/flutter/lib Flutter Source는 이곳에
46. 46 Spinner를 Material Design으로 구현할 경우 에러가 발생. → Custom 위젯을 제작
47. 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
48. 48 Flutter Pipeline User input Animation Build Layout Paint Composite Rasterize
49. 49 Flutter Pipeline User input Animation Build Layout Paint Composite Rasterize Rendering
50. 50 The Mahogany Staircase - Flutter's Layered Design How Flutter renders Widgets Widget Tree Element Tree Render Tree
51. 51 Element RenderObject State Widget Implementation Mouse Input Keyboard Input Accessibility (sementic) Focus Management
52. 52 Widget Tree https://github.com/tvolkert/chicago/tree/master/lib/src
53. 53 CreateElement로 Element 생성 Element Tree https://github.com/tvolkert/chicago/tree/master/lib/src
54. 54 createRenderObject로 Renderobject 생성 Render Tree https://github.com/tvolkert/chicago/tree/master/lib/src
55. 55 Spinner element https://github.com/tvolkert/chicago/tree/master/lib/src
56. 56 Spinner Render https://github.com/tvolkert/chicago/tree/master/lib/src
57. 57 Widget Tree https://github.com/tvolkert/chicago/tree/master/lib/src
58. 58 Widget Tree Mouse Input Button Widget https://github.com/tvolkert/chicago/tree/master/lib/src
59. 59 https://github.com/tvolkert/chicago/tree/master/lib/src
60. 60 https://tvolkert.github.io/#/
61. 61 Conclusion
62. 어떻게 Desktop앱을 만드나요? 62 Flutter Desktop 시작은 생각보다 어렵지 않습니다.
63. 63 • 윈도우의 경우 Visual Studio를 설치하는게 좋습니다. • Android Studio에서 Flutter SDK Path를 설정하시면 자동으로 Dart 또한 설정됩니다.
64. 64 • 만약 Visual Studio가 설치되지 않았다면 .. • Desktop development with C++ 에 대한 설치를 완료해주세요.
65. 65 Desktop Setting
66. 66 Desktop Setting Windows UWP
67. 67 Create Flutter Project Android Studio Terminal
68. 68 Build & Run Flutter Desktop Android Studio Terminal
69. 69 Build & Run Flutter Desktop Terminal
70. 실제 Field에서 사용하고 있나요? 70 저는 3-4개정도 Desktop앱을 사용하고 있습니다.
71. 71 https://github.com/JAICHANGPARK/flutter_2fa_generator For Example
72. 72 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion
73. 73 4 Flutter Tip
74. 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
77. 77 1. flutter_screenutil | Flutter Package 2. responsive_builder | Flutter Package 3. responsive_framework | Flutter Package 4. universal_platform | Dart Package
78. 78 2 bdlukaa/fluent_ui: Implements Microsoft's Fluent Design System in Flutter.
79. 79 3
81. 81 4
82. 82 Prototype Dash 1.0 Dash 2.0/2.1 2.0 2.1 Shams Zakhour Linda Rasmussen Nina Chen Joshy Joseph Shams Zakhour
83. 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 office Interview With Shams Zakhour (Flutter Live) How to get Plushy with Dart (DartConf 2018)
84. 84 02 Google I/O 21 Flutter Recap 01 What is Flutter? 03 Flutter Desktop 04 Flutter Tip aka Honey Tip 05 Conclusion
85. 85 1. Flutter is UI Toolkit 2. Flutter 2.2! 3. Flutter Desktop with Customize widget 4. Create & Build Desktop app
86. 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