Become a PRO Flutter Developer

Talk from Devfest Delhi 2019

Transcript

1. Pawan Kumar GDE Flutter, Firebase, Dart & WebTech Twitter - @imthepk, Insta - @codepur_ka_superhero, Fb - @therealpawan Flutter: What’s new & become a PRO Flutter dev
2. Disclaimer
3. Flutter Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
4. 2015 April 2015 Unveiled at Dart Dev Summit 2017 May 2017 Alpha Release 2018 Dec 2018 Flutter 1.0 release 2019 Sep 2019 Flutter 1.9 release
5. Why Flutter? Any Idea?
6. Fast Development Flutter engineered for high development velocity. Stateful hot reload allows you to change your code and see it come to life in less than a second without losing the state of the app. Flutter also ships with rich set of customizable widgets, all built from modern reactive framework.
7. Expressive + Flexible UI Flutter includes widgets, rendering, animations and gestures into the framework to give you complete control over every pixel on the screen. It means you have the flexibility to build a custom design.
8. Native Apps for Android, iOS, Web, Desktop & you name it Flutter apps follow platform conventions and interface details such as scrolling, navigation, icons, fonts, etc. That’s why apps built with Flutter works everywhere.
9. Hot Reload In flutter, hot reload comes to the rescue, just as you do on the web, just hit a refresh button and your codes also refreshes.
10. High Performance Flutter doesn’t require a Javascript bridge and the speed is much faster.
11. Using Dart Dart is an object-oriented programming language. Dart uses generational garbage collection which helps in creating frames for short-lived objects. It also helps to allocate the objects with a single pointer bump to avoid UI jank and shutter.
12. Reduce the third party libraries Rely on official packages and when using flutter, you can get complete IOS experience or Android Experience. So you don’t have to rely on the third party libraries.
13. Consistent APIs AnimationBuilder, FutureBuilder, StreamBuilder,…Once you understand them you have no limit. Everything is a widget.
14. The customizable kit of widgets Flutter has built with a rich and customizable set of widgets for Android, IOS and Material Design. The collaboration between Flutter and Google’s material design render and easily create powerful UI experience. This helps us to create smooth, crisp and refined app experience like a native app.
15. Trends
16. In 2018 Declarative UI Pattern?
18. In 2019?
20. Flutter Supports Mobile Web Desktop
21. Raspberry Pi
22. Desktop Embedding
23. Add to existing apps
24. Flutter For Web
25. Flutter vs Flutter Web
26. Scenario 1. A connected Progressive Web Application built with Flutter 2. Embedded interactive content 3. Embedding dynamic content in a Flutter mobile app
27. Flutter Web Support In Flutter 1.10 (Beta)
28. Flutter 1.9 1. Support for MacOS Catalina 2. iOS 13 3. 24 new languages 4. Structured Error Messages 5. Better Flavors support 6. AAR support 7. And many more
30. Who can become a PRO Developer?
31. Trust yourself & the technology
32. Flutter PRO Tips - Starters
33. Lazy Programming Write what you need and no more, but when you write it, do it right. pawan.live
34. Build Complete Apps Don’t just make UIs. pawan.live
35. Don’t do this pawan.live
36. App Store be like pawan.live
37. Animations Keep it simple. Avoid unnecessary animations. pawan.live
38. Dark Mode Dark is the new cool thing. ThemeData is what you need. pawan.live
39. SOLID Principles • S — Single responsibility principle • O — Open closed principle • L — Liskov substitution principle • I — Interface segregation principle • D — Dependency Inversion principle pawan.live https://medium.com/flutter-community/s-o-l-i-d-the-first-5-principle s-of-object-oriented-design-with-dart-f31d62135b7e
40. State Management pawan.live
41. Provider • Provider is a simpler way to use inherited widget, to synchronise your UI and your model. • It’s just a tool, not an architecture. • You don’t have to use it everywhere. pawan.live @remi_rousselet
42. Bloc, Flutter Bloc • A Predictable state management library. • It enforces immutable state. • It enables time travel debugging. • Performant ( Only rebuild what you need ). • Easy to use and highly testable. pawan.live
43. Stop over-engineering things • Stop using streams everywhere. • Stop using streambuilder inside streambuilder inside streambuilder. • Stop mixing UI with business logic. pawan.live
44. Some packages / plugins • Font_awesome_flutter • Http & dio • Cached_network_image • Sqflite • Intl • Pk_skeleton • Queries • Shared_preferences • Url_launcher • flutter_launcher_icons pawan.live
45. VSCODE • Use VSCode for development. pawan.live
46. Write Test, Find Bug • When you fix a bug, first write a test that fails, then fix the bug and verify the test passes. • When you implement a new feature, write tests for it. pawan.live
47. Android App Bundles • Official android apps publishing format. • Average size saving of upto 35%. • Optimized apk for each device. pawan.live
48. Flutter PRO Tips - Flutterish
49. #1 - Hide Keyboard when tap out the text field
51. #2 - Color RGB or Hex with opacity
53. #3 - Extending the parent theme
55. #4 - Using Safe Area to avoid layout breaking
57. Without Safe Area
58. With Safe Area
59. #5 - InkWell Feedback
61. #6 - Adding ListView inside a Column Wigdet
63. Column With Two Principal Widgets
65. #7 - Use box decoration to add border radius to container
67. #8 - Use Dart 2.3 Operators like spreads, conditional if etc
69. #9 - Use Shapes
71. #10 - Hero Animations
74. #11 - Support Multiple Screen Sizes - Media Query
77. #12 - Animated Container
80. #13 - Platform
82. #14 - Builders
83. Builders • ListView.builder • FutureBuilder • StreamBuilder • LayoutBuilder pawan.live
84. #14 - Flutter Outline
86. #15 - DevTools
93. Tips ka pitara
94. #1 - Flare
96. #2 - Awesome Flutter Snippets
98. #3 - Better Comments
100. #4 - Bracket Pair Colorizer
102. #5 - Code Time
104. #6 - Error lens
106. #7 - Git Lens
108. #8 - Flutter Files
110. I am not finished yet pawan.live
111. Youtube.com/mtechviral
112. Flutter.dev
113. flutter.dev/docs/codelabs
114. github.com/solido/ awesome-flutter
115. github.com/iampawan
116. DevFest App pawan.live
117. Promotions pawan.live
118. Are you gonna apply this tips?
120. Questions?
121. Thanks Pawan Kumar GDE Flutter, Firebase, Dart & WebTech Twitter - @imthepk, Insta - @codepur_ka_superhero, Fb - @therealpawan