한번 쓰고 우려먹는 플러터

Transcript

1. ೠߣॳҊ ਋۰ݡח ೒۞ఠ ௏٘݃ੋ٘(઱) ӣ޹࢚
2. ӣ޹࢚ ࣽୌೱ؀೟Ү ੌ߈؀೟ਗ ஹೊఠ Ӓې೗झ ੹ҕ ௏٘݃ੋ٘(઱) SW োҳࣗ োҳਗ JUSTIVE Google I/O Extended Pangyo
 Flutter in 2019: Beyond Mobile ben399399@gmail.com Google I/O Extended Suwon
 2019֙੄ ೒۞ఠ: ݽ߄ੌਸ ֈয Unity / Electron / Flutter 
 Vue.js /Physics Simulation / Android etc..
3. ೒۞ఠۆ Dart ҳӖ Fuchsia ௼۽झ ೒ۖಬ Hot reload
 Hot restart
4. ೒۞ఠۆ? Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase.
5. Native Performance Theming Widgets Rendering Animation Painting Gestures Foundation Framework(Dart) Engine(C++) Skia Dart VM Text Android/iOS runner Hardware
6. Stateful hot reload
7. Material Design
 Material Theming Cupertino Design
8. ࢶ঱੸ 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. Dart?
12. Dart ݽ؍ - ݣ౭ ಁ۞׮੐ ঱য JavaScript / Java / C# ঱যܳ ೧ࠁ࣑׮ݶ
 য࢝ೞ૑ ঋਸ ঱য Flutterח UIࠗఠ ۽૒ө૑ Dart۽ ҳࢿ
13. Dart Hello world main( ) { var words = ['Hello', 'world']; print('${words.join(", ")}!'); }
14. Dart ё୓૑ೱ 
 ௿ېझ ё୓ ࢚ࣘ ஭ङച ੋఠಕ੉झ ೣࣻഋ ೐۽Ӓې߁
 ۈ׮ Ҋରೣࣻ ௿۽ઉ ੿੸ ఋੑ
 ఋੑ Ѩࢎ ઁ֎ܼ झ௼݀౟ ঱য੄ ಞউೣ ੿੸ ఋੑ ঱য੄ উ੿х
15. ௼۽झ ೒ۖಬ
17. Android iOS Web Raspberry pi(Android Things) Windows MacOS Linux …
18. Android iOS Web Raspberry pi(Android Things) Windows MacOS Linux …
19. Android iOS Web Raspberry pi(Android Things) Windows MacOS Linux …
20. Flutter for web
21. Themeing Widgets Rendering Animation Painting Gestures Foundation Framework(Dart) Browser(C++, JS) Canvas DOM Skia ূ૓ਸ ૒੽ ׮ܖ૑ ঋҊ DOM / HTML5 Canvasܳ ੉ਊೞৈ ۪؊݂ (HTML/CSS -> Canvas (fallback) Dart2js compiler Your code JS Engine
22. Flutter for web https://flutter-web-demo.firebaseapp.com/#/ >Flutter : new web project >pub global activate stagehand >pub global activate webdev
23. mobile web https://github.com/flutter/flutter https://github.com/flutter/flutter_web
24. dependencies: flutter: sdk: flutter … dependencies: flutter_web: flutter_web_ui: … pubspec.yaml mobileRepo/lib -> webRepo/lib
25. import 'package:flutter/material.dart'; import ‘package:flutter_web/material.dart’;
26. for Material Icons
 /web/assets/FontManifest.json [ { “family:”MaterialIcons”, “fonts”:[ { “asset”:”https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2" } ] } ]
27. main() async{ await ui.webOnlyInitializePlatform( assetManager: engine.AssetManager( assetDir: “asset_dir” ) ); app.main(); }
28. Animation Network Gesture Route
30. Adaptive Components э਷ ਗ੗ٜ۽ ׮ܲ ࠙੗ܳ ٜ݅ӝ +
31. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor
 sit amet image title subtitle Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
32. Adaptive Components झ౵ѱ౭ܳ ೖೞࣁਃ styles : color / padding / alignment … -> э਷ ਤઇ layouts : column / stack … -> ׮ܲ ਤઇ
33. Adaptive Components MediaQuery.of(context). aspectRatio width height
35. Interactions ::hover
36. Interactions Listener onPointerEnter onPointerExit onPointerDown onPointerUp onPointerMove
37. Interactions RawKeyboardListener RawKeyboardListener( focusNode: _focusNode, onKey: (RawKeyEvent event){ … } )
39. Q & A ben399399@gmail.com
40. хࢎ೤פ׮