2019년의 플러터: 모바일을 넘어

Transcript

1. 2019֙੄ ೒۞ఠ:
 ݽ߄ੌਸ ֈয ௏٘݃ੋ٘(઱) ӣ޹࢚
2. ೒۞ఠۆ? Flutter : ݽ߄ੌਸ ֈয Flutter 1.5 1.7 Dart 2.3 ݾର
3. ೒۞ఠۆ?
4. ೒۞ఠۆ? ೞա੄ ௏٘۽ ݽٚ ٣߄੉झী ࡅܰҊ ইܴ׮਍ জਸ.
5. ೒۞ఠۆ? ೞա੄ ௏٘۽ ݽٚ ٣߄੉झী ࡅܰҊ ইܴ׮਍ জਸ. Dart WEB ݽ߄ੌ (Smartphone / Tablet / Foldable / Watch) TV / IoT Desktop (Windows/MacOS/Linux)
6. ೞա੄ ௏٘۽ ݽٚ ٣߄੉झী ࡅܰҊ ইܴ׮਍ জਸ. ೒۞ఠۆ? Stateful hot reload
7. ೞա੄ ௏٘۽ ݽٚ ٣߄੉झী ࡅܰҊ ইܴ׮਍ জਸ. ೒۞ఠۆ? ֎੉౭࠳ә੄ ಌನݢझ Theming Widgets Rendering Animation Painting Gestures Foundation Framework(Dart) Engine(C++) Skia Dart VM Text Android/iOS runner Hardware
8. ೞա੄ ௏٘۽ ݽٚ ٣߄੉झী ࡅܰҊ ইܴ׮਍ জਸ. ೒۞ఠۆ? Material Design
 Material Theming Cupertino Design
9. ࢶ঱੸ UI b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3) return ViewB( color: red, child: ViewC(...),
 ) Imperative style Declarative style
10. ׮নೠ ѐߊ ജ҃ Windows MacOS Linux ChromeOS Android Studio Visual Studio Code IntelliJ
11. Google I/O 2019ীࢲ੄ Flutter ࣁٜ࣌ Beyond Mobile: Material Design, Adaptable UIs, and Flutter Building for iOS with Flutter Programatic State Management in Flutter Beyond Mobile: Building Flutter Apps
 for iOS, Android, Chrome OS, and Web Dart: Productive, Fast, Multi-Platform - Pick 3
12. Dart 2.3 Dark mode theme Accessibility Flutter for Web In App Purchase Material Theming Apple Store Requirements Foldables Flutter ML Kit Flutter for desktop Flutter for Embedded Cupertino Widgets Semantics Adaptive Layout Adaptive UI Material Widgets New webpage for Dart
13. Flutter : ݽ߄ੌਸ ֈয
14. Technical preview
15. Flutter : ݽ߄ੌਸ ֈয Flutter for web Themeing Widgets Rendering Animation Painting Gestures Foundation Framework(Dart) Browser(C++, JS) Canvas JS Engine DOM Skia ূ૓ਸ ૒੽ ׮ܖ૑ ঋҊ DOM / HTML5 Canvasܳ ੉ਊೞৈ ۪؊݂ Dart2js compiler Your code Hot restart / Devtools / linking
16. Flutter : ݽ߄ੌਸ ֈয Flutter for web TECHNICAL PREVIEW Plugin system੉ ডೣ Flutter APIо ׮ ҳഅغ૑ ঋ਺ ূ૓࢚੄ ಌನݢझ ୭੸ചо ੉ܖয૑૑ ঋ਺ Chrome ࠳ۄ਋੷݅ਸ Ҋ۰ dart:html dart:js dart:svg dart:indexed_db ... അ੤ Flutter repoܳ forkೞৈ ѐߊ੉ ੉ܖয૑Ҋ ੓ਵա(flutter_web) ୭ઙ੸ਵ۽ח ೞա੄ SDK/Frameworkо ؼ Ѫ
17. Flutter : ݽ߄ੌਸ ֈয Flutter for web TECHNICAL PREVIEW ࢤп؀۽ غ૑ ঋח ز੘ٜ੉ ݆਺(TextField::onSubmitted(), hover action ١) ఫझ౟ ࢶఖ ޙઁ/Material Icon੉ ӝࠄ੸ਵ۽ ࢎਊ੉ উغח ੼ ١..
18. flutter.dev/web
19. Flutter : ݽ߄ੌਸ ֈয Flutter on the desktop Framework(Dart) Engine(C++) Platform-specific embedder Hardware Your code flutter.dev/desktop
 https://github.com/google/flutter-desktop-embedding EARLY STAGE DEVELOPMENT
20. Flutter : ݽ߄ੌਸ ֈয Flutter on the desktop flutter.dev/desktop
 https://github.com/google/flutter-desktop-embedding EARLY STAGE DEVELOPMENT https://feather-apps.com/
21. Flutter : ݽ߄ੌਸ ֈয More EARLY STAGE DEVELOPMENT Raspberry pi(Android Things) Chrome OS Google Hub
22. Flutter 1.5 1.7 new!
23. Material Theming Dark Theme Material Widgets Accessibility Adaptive UI Flutter 1.5 AndroidX 64-Bit Android Apps Material Widgets Flutter 1.7
24. Material Theming Google I/O '18 ੉੹ ҅࢑ӝ ੌ੿ҙܻ ޷ࣁݢ૑ ݫੌ … ݽف э਷ UI
25. Material Theming https://material.io/
27. "ա઺ী"
28. Material Theming ThemeData( cardTheme : CardTheme( … ) ) ೠߣ੄ ழझథ ప݃ ੿੄۽ জ ੹୓ীࢲ ӝࠄ ਤઇ੄ झఋੌ ૑੿
29. ThemeData( cardTheme : CardTheme( shape : BeveledRectangleBorder( borderRadius : BorderRadius.all(
 Radius.circular(16)))))
30. Material Theming ೠߣ੄ ழझథ ప݃ ੿੄۽ জ ੹୓ীࢲ ӝࠄ ਤઇ੄ झఋੌ ૑੿ AppBarTheme ButtonTheme CardTheme ChipTheme DialogTheme IconTheme ... and more
31. Dark Theme MaterialApp( theme: ThemeData.light( ) darkTheme: ThemeData.dark( ) ) MediaQuery.of(context).platformBrightness
32. Material Widgets
33. Material Widgets updates Slider ؊ ݆਷ ழझథ UI API ઁҕ (౟ۑ / ೩ٜ) SliderTheme( data: SliderThemeData(/**/), child: Slider() )
34. Material Widgets updates BottomNavigationBar labelਸ ২࣌ਵ۽ ߸҃ (੽Ӕࢿਸ Ҋ۰ೞݶ ୶оೞח Ѫਸ ӂ੢) FloatingActionButton Transition animation ૑ਗ
35. Material Widgets new ReorderableListView onReorder(int, int)
36. Material Widgets new ExpandingSearchBar Ѩ࢝ ӝ۾ / Ѩ࢝ ୶ୌ ઁҕ
37. Adaptive UI ೒ۖಬী ݏח ਤઇਸ
 ف ߣ ࢶ঱ೞ૑ ঋইب
 प೯غח ೒ۖಬী ݏѱ. Switch.adaptive( // ) Slider.adaptive( // )
38. Adaptive UI "Flutter ॳݶ উ٘۽੉٘ জ୊ۢ ࠁ੉ח iOS জ੉ աয়ח Ѣ ইצоਃ?" if(Platform.isIOS) { return CupertinoTabBar(items: sections); } else { return BottomNavigationBar(items: sections); }
39. Flutter 1.7 2019/07/10
40. AndroidX support ࢜ ೐۽ં౟ ࢤࢿद Android X ૑ਗ оמ flutter create - -androidx project_name
41. 64-Bit Android App support Android App Bundles ૑ਗਸ ా೧
 
 32-Bit ৬ 64-Bitਸ ఋѶ flutter build app - -split-per-abi
42. Material Widgets update SnackBar elevation/ borderstyle ١
43. Material Widgets new RangeSlider
44. ETC Game Controller support Better Text Selection Experience Rich Text Rendering More Pixel-Perfect Cupertino widgets Clear Indication with write permission error Xcode build system Xcode build system
45. Dart 2.3
46. Dart?
47. Dart ݽ؍ - ݣ౭ ಁ۞׮੐ ঱য JavaScript / Java / C# ঱যܳ ೧ࠁ࣑׮ݶ
 য࢝ೞ૑ ঋਸ ঱য Flutterח UIࠗఠ ۽૒ө૑ Dart۽ ҳࢿ
48. Dart Hello world main( ) { var words = ['Hello', 'world']; print('${words.join(", ")}!'); }
49. Dart ё୓૑ೱ 
 ௿ېझ ё୓ ࢚ࣘ ஭ङച ੋఠಕ੉झ ೣࣻഋ ೐۽Ӓې߁
 ۈ׮ Ҋରೣࣻ ௿۽ઉ ੿੸ ఋੑ
 ఋੑ Ѩࢎ ઁ֎ܼ झ௼݀౟ ঱য੄ ಞউೣ ੿੸ ఋੑ ঱য੄ উ੿х
50. Dart झ௼݀౟৬ э਷ JIT ஹ౵ੌ ঱য৬ э਷ AOT Javascript۽੄ ߸ജ
51. UIܳ ਤೠ ૑ਗٜ Spread operator(...) if for Dart 2.3
52. Widget build(BuildContext context){ return Column(children: [ Text('Contents'), Text('Next'), Text('Index'), ]); }
53. Widget build(BuildContext context){ var items = [Text('Contents')]; if (page != pages.last) items.add(Text('Next')); items.add(Text('Index')); return Column(children: items); }
54. Widget build(BuildContext context){ var items = [Text('Contents')]; if (page != pages.last) items.add(Text('Next')); items.addAll(sections); items.add(Text('Index')); return Column(children: items); }
55. Widget build(BuildContext context){ var items = [Text('Contents')]; if (page != pages.last) items.add(Text('Next')); for (var section in sections) items.addAll(sections.chapters); items.add(Text('Index')); return Column(children: items); }
56. Widget build(BuildContext context){ var items = [Text('Contents')]; if (page != pages.last) items.add(Text('Next')); for (var section in sections) items.addAll(sections.chapters); items.add(Text('Index')); return Column(children: items); } Widget build(BuildContext context){ return Column(children: [ Text('Contents'), Text('Next'), Text('Index'), ]); }
57. Widget build(BuildContext context){ return Column(children: [ Text('Contents'), Text('Next'), Text('Index'), ]); }
58. Widget build(BuildContext context){ return Column(children: [ Text('Contents'), (page != pages.last) ? Text('Next') : Container( ), Text('Index'), ]); } Dart 2
59. Widget build(BuildContext context){ return Column(children: [ Text('Contents'), if (page != pages.last) Text('Next'), Text('Index'), ]); } Dart 2.3
60. Dart 2.3 Widget build(BuildContext context){ return Column(children: [ Text('Contents'), if (page != pages.last) Text('Next'), ...sections Text('Index'), ]); }
61. Dart 2.3 Widget build(BuildContext context){ return Column(children: [ Text('Contents'), if (page != pages.last) Text('Next'), for (section in sections) ...sections.chapters Text('Index'), ]); }
62. Dart 2.3 Widget build(BuildContext context){ return Column(children: [ Text('Contents'), if (page != pages.last) Text('Next'), for (section in sections) ...sections.chapters Text('Index'), ]); }
63. Dart 2.3 Widget build(BuildContext context){ return Column(children: [ Text('Contents'), if (page != pages.last) Text('Next'), for (section in sections) ...sections.chapters Text('Index'), ]); }
64. Dart 2.3 Widget build(BuildContext context){ return Column(children: [ Text('Contents'), if (page != pages.last) Text('Next'), for (section in sections) ...sections.chapters Text('Index'), ]); }
65. Widget build(BuildContext context){ var items = [Text('Contents')]; if (page != pages.last) items.add(Text('Next')); for (var section in sections) items.addAll(sections.chapters); items.add(Text('Index')); return Column(children: items); } Widget build(BuildContext context){ return Column(children: [ Text('Contents'), if (page != pages.last) Text('Next'), for (section in sections) ...sections.chapters Text('Index'), ]); } Dart 2.3
66. Non-nullable types Extension Methods Future Features of Dart
69. Q & A ben399399@gmail.com
70. References "Hummingbird: Building Flutter For The Web." https://medium.com/flutter/hummingbird-building-flutter-for-the-web-e687c2a023a8 "Flutter/Flutter_Web." https://github.com/flutter/flutter_web "Ins And Outs Of Flutter Web." https://medium.com/flutter-community/ins-and-outs-of-flutter-web-7a82721dc19a "Flutter - Beautiful Native Apps In Record Time."https://flutter.dev/ "Beyond Mobile: Material Design, Adaptable UIs, and Flutter (Google I/O'19)"
 https://www.youtube.com/watch?v=YSULAJf6R6M&list=PLjxrf2q8roU2no7yROrcQSVtwbYyxAGZV "Building for iOS with Flutter (Google I/O'19)" 
 https://www.youtube.com/watch?v=ZBJa-xjZl3w&list=PLjxrf2q8roU2no7yROrcQSVtwbYyxAGZV&index=2 Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web (Google I/O'19) https://www.youtube.com/watch?v=IyFZznAk69U&list=PLjxrf2q8roU2no7yROrcQSVtwbYyxAGZV&index=4 "Google/Flutter-Desktop-Embedding."
 https://github.com/google/flutter-desktop-embedding
71. хࢎ೤פ׮