SV Flutter iOS Meetup - 18/08/20

How Flutter builds and runs on iOS. What kind of iOS app can be built on iOS. And what the team is currently working on.

Transcript

1. Xiao Yu Flutter and iOS How it builds and what can you build 2018/08/20
2. • Enterprise • Mobile design agency • YouTube Android Background
3. Background
4. Full frame is great, use a scrim for text.
5. • How does Flutter work on macOS + iOS • What Flutter does for you on iOS • What are we working on now Agenda
6. Build system
7. Build system AKA, how does it even work?
8. Build system AKA, how does it even work?
9. I Know This
10. I See This
11. What it is bit.ly/flutter-ios-app-bundle Flutter iOS (Objective-C / Swift) Flutter
12. What it is bit.ly/flutter-ios-app-bundle Flutter iOS (Objective-C / Swift) Flutter
13. What it is bit.ly/flutter-ios-app-bundle Flutter iOS (Objective-C / Swift) Flutter Dart Assets arm64 armv7s armv7 Assets
14. What it is bit.ly/flutter-ios-app-bundle Flutter iOS (Objective-C / Swift) Flutter Dart Assets arm64 armv7s armv7 Assets
15. What it is bit.ly/flutter-ios-app-bundle Flutter iOS (Objective-C / Swift) Flutter Dart Assets arm64 armv7s armv7 Assets
16. What it is bit.ly/flutter-ios-app-bundle Flutter iOS (Objective-C / Swift) Flutter Dart Assets arm64 armv7s armv7 Assets Release Mode
17. What it is bit.ly/flutter-ios-app-bundle Flutter iOS (Objective-C / Swift) Flutter Dart Assets arm64 armv7s armv7 Assets Release Mode Simplified
18. What it is bit.ly/flutter-ios-app-bundle Flutter iOS (Objective-C / Swift) Flutter Dart Assets arm64 armv7s armv7 Assets ?
19. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets arm64 armv7s armv7 Tools Assets Flutter Framework
20. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets arm64 armv7s armv7 Tools Assets Flutter Framework
21. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets arm64 armv7s armv7 Tools Assets Flutter Framework Flutter Engine
22. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets arm64 armv7s armv7 Tools Assets Flutter Framework Flutter Engine
23. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM
24. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Debug Mode?
25. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Dart VM
26. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Dart VM
27. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM How it comes together?
28. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM
29. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings
30. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings
31. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings xcodebuild
32. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings xcodebuild
33. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings Release Mode
34. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings Release Mode
35. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings Release Mode
36. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings Release Mode
37. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings Release Mode
38. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings Debug Mode
39. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings Release Mode
40. bit.ly/flutter-ios-app-bundle Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings Release Mode
41. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Dart VM Debug Mode
43. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings
44. Runtime You still haven’t said anything about how it runs
45. Flutter Project iOS (Objective-C / Swift) Flutter Output Dart Assets Dart ARM Tools Assets Flutter Framework Flutter Engine Engine ARM Build Settings ?
46. iOS (Objective-C / Swift) Flutter Output Dart ARM Assets Engine ARM AppDelegate.h
47. iOS (Objective-C / Swift) Flutter Output Dart ARM Assets Engine ARM AppDelegate.h
48. iOS (Objective-C / Swift) Flutter Output Dart ARM Assets Engine ARM AppDelegate.h
49. iOS (Objective-C / Swift) Flutter Output Dart ARM Assets Engine ARM AppDelegate.h Flutter View Controller OpenGL
50. iOS (Objective-C / Swift) Flutter Output Dart ARM Assets Engine ARM AppDelegate.h
51. iOS Widgets What can you build for iOS?
52. One more
53. Continuous Delivery flutter.io/fastlane-cd
54. iOS Widgets What can you build for iOS?
55. Cupertino Widgets flutter.io/widgets/cupertino
56. How Do We Make Cupertino Widgets? flutter.io/widgets/cupertino
57. How Do We Make Cupertino Widgets? flutter.io/widgets/cupertino
58. How Do We Make Cupertino Widgets? flutter.io/widgets/cupertino
59. Flutter Architecture
60. Flutter Architecture
61. Flutter Architecture Material Cupertino
62. Common Adaptations
63. Page Transitions Android iOS (push) iOS (present)
64. Scrolling Android iOS
65. Text Selection Android iOS
66. Others Actually I’m just tired of making GIFS • Tap status bar to scroll to top • Title centering • Back button icon • Default font and default text color • Scrollbar
67. Widgets
68. Widgets
69. Select Demos • Navigation ◦ Tabs ◦ Nav bars ◦ Large title nav bars • Switch • Pickers • Pull to refresh
70. Framework Roadmap What we’re making next?
71. Timeline 0.5.1 0.5.8? Next • Dialog UI fidelity / showCupertinoDialog • CupertinoSegmentedControl • CupertinoApp • Accessibility • CupertinoActionSheet • Multi-column CupertinoPicker • Nav bar transitions • CupertinoTextField • CupertinoCountdownPicker • Magnifier text selection • bit.ly/flutter-cupertino-task
72. Thank you! Confidential + Proprietary @xster