Downloaded 81 times
Uploaded byAhmed Abu Eldahab
Build responsive applications with google flutter
The document discusses responsive design in Flutter applications. It provides information on building responsive layouts that adapt to different screen sizes by using techniques like breakpoints, columns, gutters and margins. It also mentions the ResponsiveBuilder and MediaQuery widgets that can help determine screen width and device mode to update the UI based on breakpoints. The last part encourages attendees to check Ahmed's YouTube channel and GitHub for more resources on building responsive Flutter web applications.
More Related Content
Similar to Build responsive applications with google flutter
![[Alexandria Devfest] the magic of flutter](https://cdn.slidesharecdn.com/ss_thumbnails/egyptdevfestthemagicofflutter-181114115455-thumbnail.jpg?width=640&height=640&fit=bounds)
Build responsive applications with google flutter
- 1. Ahmed Abu Eldahab GDEFlutter & Dart @dahabdev Build responsive applications with Google Flutter Slides: bit.ly/flutter-web-part3
- 2. Ahmed Abu Eldahab GoogleDeveloper Expert in Flutter & Dart Senior Technical Consultant Kortobaa LLC CTO /Dahabdev
- 3.
- 4. Flutter is Google’sUI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase
- 5. The last 4months What's new in
- 6.
- 7. Dev Tools inVS Code Flutter 1.20 https://dartcode.org/releases/
- 8. Dev Tools inVS Code Flutter 1.20 https://dartcode.org/releases/
- 9. Auto Import - VS Code Flutter 1.20 https://dartcode.org/releases/
- 10.
- 11.
- 12. New visual appeals Slider- RangeSlider - DatePicker - TimePicker Flutter 1.20
- 13. Interactive Viewer -drag n’ drop widgets Flutter 1.20
- 14.
- 15. Performance improvement Icon &fonts tree shaking Flutter 1.20
- 16. Flutter 1.22 Android 11better animation
- 17. Flutter 1.22 Android notchessupport
- 18.
- 19. Flutter 1.22 Google Mapsand WebView plugins ready for production
- 20. Flutter 1.22 Expanding theButton “universe”
- 21.
- 22.
- 23.
- 24. Flutter 1.22 App sizeanalysis tool --analyze-size - flutter build apk - flutter build appbundle - flutter build ios - flutter build linux - flutter build macos - flutter build windows
- 25. Flutter 1.22 App sizeanalysis tool
- 26. Flutter 1.22 App sizeanalysis tool
- 27. Google Pay picksFlutter to drive its global product development
- 28.
- 29. Why should Icare ? ● Provide better user experience (UX) ● Mobile Web ● Desktop ● Tablets
- 30.
- 31. Responsive layout grid -Columns - Gutters - Margins 1. Columns 2. Gutters 3. Margins
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. Flutter UI supportwidgets LayoutBuilder MediaQuery https://www.youtube.com/watch?v=IYDVcriKjsw https://www.youtube.com/watch?v=A3WrA4zAaPw
- 41.
- 42.
- 43. Breakpoints Get Screen width Getdevice mode
- 44. Breakpoints Get Screen width Getdevice mode
- 45. Breakpoints Get Screen width Getdevice mode Set breakpoint and update the UI
- 46. Breakpoints Get Screen width Getdevice mode Set breakpoint and update the UI Is this the only way ?
- 47.
- 48.
- 49.
- 51.
- 52.
- 53.
- 54. Ahmed Abu Eldahab GoogleDeveloper Expert in Flutter & Dart Senior Technical Consultant Kortobaa LLC CTO /Dahabdev