Flutter, the future of mobile.

A presentation about how flutter can be the future of mobile - at GDG Indore DevFest18

Transcript

1. Pawan Kumar, GDE Twitter - @imthepk Youtube – MTechViral Github - iampawan Indore lutter, the future of mobile.
2. Disclaimer – I am a Flutter fanboy and a meme lover. Indore
3. About me Indore
4. About me Another Ordinary Software developer imthepk mtechviral iampawan
5. About me Another Software developer Google Developer Expert imthepk mtechviral iampawan
6. About me Another Software developer Google Developer Expert Software Engineer at FieldAssist imthepk mtechviral iampawan
7. Mobile Platforms Windows Blackberry Android iOS
8. Mobile Platforms Windows Blackberry Android iOS
9. Now it is all about
10. Android vs iOS ( Active Devices) ~2.5 Billion ~1.3 Billion
11. Thanks to
12. Options Native Android & iOS React Native Xamarin Ionic Cordova Phonegap Framework 7
13. Options Native Android & iOS React Native Xamarin Ionic Cordova Phonegap Framework 7
14. Need To Learn (But this is not a problem) Native Xamarin Others • Java/Kotlin & XML & Gradle • Swift/Obj-c & Storyboard • C# • Xaml • Html,CSS • JS, JSX
15. 1st Problem - PM
16. 2nd Problem - The Designer
17. Me
18. Product
19. One more option Flutter
22. One more option Flutter What is Flutter?
23. Flutter The One
24. THOUGHTS SOFTWARE
25. Flutter A multi-platform mobile app SDK for Android, iOS and *Fuchsia Uses DART - compiles to efficient ARM code Rich Widget catalog Modern, React inspired View-Framework APIs for unit and integration test. CLI
26. Flutter A multi-platform mobile app SDK for Android, iOS and *Fuchsia Uses DART - compiles to efficient ARM code Rich Widget catalog Modern, React inspired View-Framework
27. Flutter Goals Build Beautiful UIs High Performance Apps with Native feel Be Productive Run Same UI on multiple platforms, perfect for brand first designs (optional)
28. What’s unique? Engine is shipped in the apk/ipa. Doesn’t use OEM Widgets. Constant 60 FPS. Ships sdk with the app, no fragmentation or compatibility issues. No Bridge Needed, Direct drawing to platform canvas.
29. System Architecture High-level overview Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino
30. Are you convinced? Indore
32. Why Flutter is the future of mobile?
33. When you see mobile app development documentations
34. Organized 1. Properly Documented. ( Deeply go into the code to find out how it works)
35. Organized 2. Make it easy to see and understand how everything interacts with each other (NO XML).
36. Hot Doctor flutter doctor This command checks your environment and displays a report to the terminal window. Flutter App
37. Hot Reload • Blue AppBar Background • Blue Flutter Logo Flutter's hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.
38. Hot Reload • Red AppBar Background • Red Flutter Logo Flutter's hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.
40. Expressive, Beautiful & HOT UIs Delight your users with Flutter's built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness.
41. Flutter UI KIT https://github.com/iampawan/Flutter-UI-Kit
42. Time taken to make Flutter UI-KIT
43. Hot Debugging
44. Hot Rewind HOT REWIND HELPS YOU IN TIME TRAVELLING YOUR CODE.
45. Set Break On Exception
46. Rewind
47. Continue
48. Hot Animations
49. Hot Animations
50. Hot Crash (Flutter) (Android)
51. Hot Pub https://pub.dartlang.org/flutter
52. Hot Widgets Scaffold Material App Row Column FAB SizedBox Expanded Padding Container AppBar Stack Drawer Text Center Material Gesture Detector Inkwell Card Positioned TabBar Hero Align FlatButton CircleAvatar Theme FutureBuilder StreamBuilder ListViewBuilder Asset Image Network Image Memory Image
53. App Widget Material Widget Scaffold Widget Column Container Text Button Render Tree Everything is a widget
54. Everything is a widget
55. Indore
56. The App is itself a widget.
57. The App is itself a widget.
58. Scaffold Introduced
59. ListView Introduced
60. Card Introduced
62. Hot Platform Channel https://flutter.io/platform-channels/
63. Hot Dart Object Oriented JIT & AOT async-await / Future Streams Tree Shaking
64. Hot IDE Support Android Studio IntelliJ IDEA VS CODE
65. Is it ready for production?
66. Cons
67. Cons Room for improvement 1. Stable 1.0 is yet to come 2. (Release Preview 2 Just released)
68. Cons Room for improvement Core Engine 3.0 MB Framework + App Code 540KB License file 55 KB Necessary Java Code 57KB ICU Data 433KB 2. APK SIZE ~ 4.2MB
69. Cons Room for improvement 3. Lack of few important widgets like WebView, Map etc. (WIP)
70. SAY YES TO YOUR DESIGNERS
71. “With Flutter, the only limitation is your own imagination.”
72. Links to learn flutter Pawan Kumar • MTechViral YouTube (100+) • iampawan – github(75+) • Let's flutter - fb group (5K+) Google • Flutter.io • Udacity Course • Flutter Codelabs • Boring Development Show Misc. • Fluttery • Awesome Flutter Repo • Udemy Courses • Slack,Gitter, Reddit
73. Pawan Kumar, GDE Twitter - @imthepk Youtube – MTechViral Github - iampawan Indore Thank You! imthepk mtechviral iampawan
74. Q&A Indore imthepk mtechviral iampawan