Download as PDF, PPTX
Uploaded byAhmed Abu Eldahab
Flutter beyond hello world GCDC Egypt Devfest 2019
This document provides an overview of Flutter, Google's UI toolkit for building mobile, web, and desktop apps from a single codebase. It discusses key Flutter concepts like everything being a widget, the widget tree and how widgets rebuild, different types of widgets, managing state and data flow, common state management packages like Provider and Bloc, using streams for realtime data, integrating with Firebase, and security rules. It also promotes Flutter's abilities like beautiful animations, fast development speed, and support for different platforms from a single codebase.
More Related Content
![[Alexandria Devfest] the magic of flutter](https://cdn.slidesharecdn.com/ss_thumbnails/egyptdevfestthemagicofflutter-181114115455-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Flutter beyond hello world GCDC Egypt Devfest 2019
Flutter beyond hello world GCDC Egypt Devfest 2019
- 1. Flutter Beyond Helloworld! By : Ahmed Abu Eldahab @dahabdev
- 2. Ahmed Abu Eldahab SeniorSoftware Consultant Google Developer Expert in Flutter /Dahabdev @dahabdev
- 3. Tell me aboutyou? Developers , Designers , Mac , Linux , Windows , Web , Mobile , Android , ios ? @dahabdev
- 4. Flutter is Google’sUI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase
- 5. Control every pixelon the screen Make your brand come to life Never say "no" to your designer Stand out in the marketplace Win awards with beautiful UI Expressive, beautiful UIs
- 6. Flutter support manytypes of Animations - Tween - Hero - Sliver - Transform - FadeInWidget - Animation Builder - AnimatedOpacity - Physics-based animation Beautiful Animations
- 7. Fast Brings the powerof a games engine to user experience development 60fps, GPU accelerated Compiled to native machine code
- 8. Sub-second reload times Paintyour app to life Iterate rapidly on features Test hypotheses quicker than ever More time to experiment & test features Single-codebase for faster collab 3X Productivity Gains Productive
- 10.
- 11.
- 12. What makes Flutterunique? - Compiles to Native Code (ARM Binary code) - No reliance on OEM widgets - No bridge needed - No markup language (only Dart)
- 13.
- 14. Everything is aWidget
- 15. Everything is aWidget
- 16. Everything is aWidget Stateless Widget is immutable widget doesn’t know anything & Gets render only once or when the parent widget changes the configuration
- 17. Everything is aWidget Stateful Widget is mutable widget which has its own properties knowing as state and it can be changed by user input or by using setState()
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. Stateless Widget Constructor Function build() StatefulWidget Constructor Function build() initState() setState() build() didUpdateWidget() dispose() Flutter Widgets
- 33. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column Text Column Element Text Element Rendered Box Rendered Box Rendered Box
- 34. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column Text Column Element Text Element Rendered Box Rendered Box Rendered Box
- 35. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column Column Element Text Element Rendered Box Rendered Box Rendered Box
- 36. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column Column Element Rendered Box Rendered Box
- 37. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
- 38. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
- 39. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
- 40. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
- 41. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
- 42. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box Unique Key Unique Key
- 43. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box Unique Key Unique Key
- 44. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box Unique Key Unique Key
- 45. Flutter Widgets Rebuilds frequently ElementTree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box Unique Key Unique Key
- 46.
- 47. Data Flow Data (State) UserInterface @dahabdev
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. Data (State )Management 1.Scoped_model 2. Provider 3. Bloc 4. Mobx 5. Redux
- 67.
- 68.
- 69.
- 76.
- 79.
- 80.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 92.
- 93. Ahmed Abu Eldahab SeniorSoftware Consultant Google Developer Expert in Flutter /Dahabdev