Flutter 最新进展和未来展望

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. Flutter: Google Flutter
3. ● 2016 ● ● 2009 ● Flutter Flutter 2014 ACM API
4. 1. Flutter 2. Flutter for Web 3. 4. : “UI as Code” – 5. Flutter/Dart IDE
5. 1.1. Flutter
6. Flutter UI
7. Flutter 2018 12 1.0
9. UI “ app ”
10. 60 , GPU
11. Your code in Dart Flutter framework in Dart (widgets, gestures, etc) C++ Flutter engine (Skia, Text, Dart runtime, dart:ui) iOS/Android runner (embedder) Hardware GPU, ARM, x86 chips
12. Hot Reload
14. 1.2. Flutter StackOverflow 2019 Flutter
16. 1.3. Flutter ● ● ● Flutter Flutter
17. Flutter ● Flutter ● Flutter Pull Request ● Flutter issues PR
18. Mobile Web Desktop Embedded
20. 2. Flutter for Web flutter.dev/web
21. app Reflectly.app Web
22. Flutter for Web
23. Flutter for Mobile Your code Flutter framework in Dart (widgets, gestures, etc) C++ Flutter engine (Skia, Text, Dart runtime, dart:ui) iOS/Android runner Hardware GPU, ARM, x86 chips Picture
24. Flutter for Web Your code Flutter framework in Dart (widgets, gestures, etc) Web Flutter Web engine (dart:ui) Dart2js compiler Web Browser Hardware
25. Flutter Web engine ● Web API ○ HTML + CSS + Canvas ○ CSS Paint API ( ) Flutter Web engine (dart:ui)
26. HTML+CSS+Canvas ● HTML + CSS ○ ○ ● ● Canvas 2D CSS Paint API Canvas HTML / CSS Canvas
27. Flutter Web engine ● Flutter Web ○ widgets ○ UI Flutter Flutter framework in Dart (widgets, gestures, etc) Flutter Web engine (dart:ui)
28. Your Flutter code (Dart) Flutter Web engine (dart:ui) Dart code for HTML, CSS, Canvas Dart2js compiler JavaScript Browser
29. Flutter for Web ● Flutter for Web Web ● 1. 2. Web Flutter
30. Web ● ● ● app
31. Flutter ● ● ● ○
32. Flutter for Web ● 60 FPS ● flutter.github.io/samples
33. Flutter for Web ● Widget API ● Dart DevTools ● (Stateless) Hot Reload
34. Flutter for Web Flutter for Web ● ● ● ● ● ● Flutter SDK widgets JS
35. 4.
36. State UI Your build methods U I The layout on the screen f( state ) The application state
37. Flutter
38. package:provider
42. ChangeNotifier ChangeNotifier Flutter SDK
43. ChangeNotifierProvider ChangeNotifierProvider widget widgets ChangeNotifier provider package
44. Consumer CartModel Consumer ChangeNotifierProvider UI
45. Provider ChangeNotifierProvider <CartModel> Consumer <CartModel> https://flutter-io.cn/docs/development/data-and-backend/state-mgmt/simple
46. 4. Flutter ● UI-as-Code ● Dart : “UI as Code” Flutter UI UI
47. Dart ● Flutter UI ● ● ● ● Flutter UI UI UI UI UI UI UI
48. UI-as-Code: Dart 2.3 Widget build(BuildContext context) { return Column(children: [ Text(mainText), for (var section in sections) HeadingAction(section.heading), ]); } IDE Editor UI Guides
49. Dart 2.3 UI ● Control Flow Elements in Collections if for Widget build(BuildContext context) { return Row( children: [ IconButton(icon: Icon(Icons.menu)), ● Spread Operator ‘…’ if (!isAndroid) ...[ Expanded(child: title), IconButton(icon: Icon(Icons.search)), ] ], ); }
50. Widget build(BuildContext context) { var items = [Text(' ')]; // for (var volume in volumes) { items.addAll(volume.chapters); } if (page != pages.last) items.add(Text(' items.add(Text(' ')); return Column(children: items); } '));
51. Widget build(BuildContext context) => Column(children: [ Text(' '), for (var volume in volumes) ...volume.chapters, if (page != pages.last) Text(' '), Text(' '), ]);
52. // without // with ui-as-code Widget build(BuildContext context) { var items = [Text(' ')]; Widget build(BuildContext context) => Column(children: [ Text(' '), for (var volume in volumes) ...volume.chapters, if (page != pages.last) Text(' '), Text(' '), ]); for (var volume in volumes) { items.addAll(volume.chapters); } if (page != pages.last) items.add(Text(' items.add(Text(' ')); ')); return Column(children: items); }
53. IDE UI UI
54. Editor UI Guides
55. UI “child:” “children:” ligatures “child:” “children:”
56. Dart 1.x Dart 2.0: Optional ‘new’ Dart 2.3: UI as Code Editor UI Guides
57. 5. Flutter ● Flutter Dart add-to-app
58. 5. Flutter ● ● Dart Flutter Dart add-to-app non-nullable (by default) types FFI (C/C++ interop) extension methods Dart runtime
59. 5. Flutter ● ● Dart Flutter add-to-app non-nullable (by default) types FFI (C/C++ interop) ● ● Flutter for Web ● Dart UI extension methods Dart runtime
60. Flutter 2019 https://github.com/flutter/flutter/wiki/Roadmap
61. Dart https://github.com/dart-lang/language
63. flutter.dev flutter.cn