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.

1. Ahmed Abu Eldahab
GDE Flutter & Dart
@dahabdev
Build responsive
applications with
Google Flutter
Slides: bit.ly/flutter-web-part3

2. Ahmed Abu Eldahab
Google Developer Expert in Flutter & Dart
Senior Technical Consultant
Kortobaa LLC CTO
/Dahabdev

3. bit.ly/dahab-youtube

4. Flutter is Google’s UI toolkit
for building beautiful,
natively compiled
applications for mobile, web,
and desktop from a single
codebase

5. The last 4 months
What's new in

6. https://flutter.dev/docs/whats-new

7. Dev Tools in VS Code Flutter 1.20
https://dartcode.org/releases/

8. Dev Tools in VS Code Flutter 1.20
https://dartcode.org/releases/

9. Auto Import - VS Code Flutter 1.20
https://dartcode.org/releases/

10. Autofill Support
Flutter 1.20

11. Mouse Cursor Support
Flutter 1.20

12. New visual appeals
Slider - RangeSlider - DatePicker - TimePicker
Flutter 1.20

13. Interactive Viewer - drag n’ drop widgets
Flutter 1.20

14. Pigeon
https://pub.dev/packages/pigeon
Flutter 1.20

15. Performance improvement
Icon & fonts tree shaking
Flutter 1.20

16. Flutter 1.22
Android 11 better animation

17. Flutter 1.22
Android notches support

18. Flutter 1.22
https://flutter.dev/docs/development/ios-14
ios 14 support

19. Flutter 1.22
Google Maps and
WebView plugins ready
for production

20. Flutter 1.22
Expanding the Button “universe”

21. Flutter 1.22
Navigator 2.0

22. Flutter 1.22
Navigator 2.0

23. Flutter 1.22
Navigator 2.0

24. Flutter 1.22
App size analysis 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 size analysis tool

26. Flutter 1.22
App size analysis tool

27. Google Pay picks Flutter
to drive its global
product development

28. Responsive
design In
Flutter

29. Why should I care ?
● Provide better user experience (UX)
● Mobile Web
● Desktop
● Tablets

30. Why
Should
I care ?

31. Responsive layout grid
- Columns
- Gutters
- Margins
1. Columns 2. Gutters 3. Margins

32. Breakpoints
https://material.io/design/layout/responsive-layout-grid.html

33. Responsive layout grid

34. ios
Android
https://material.io/design/layout/responsive-layout-grid.html

35. Common breakpoints
https://developer.android.com/training/multiscreen/screensizes.html

36. Breakpoints
https://material.io/design/layout/responsive-layout-grid.html

37. Device preview
https://pub.dev/packages/device_preview

38. Device preview
https://pub.dev/packages/device_preview

39. Device preview
https://pub.dev/packages/device_preview

40. Flutter UI support widgets
LayoutBuilder MediaQuery
https://www.youtube.com/watch?v=IYDVcriKjsw https://www.youtube.com/watch?v=A3WrA4zAaPw

41. Breakpoints

42. Breakpoints
Get Screen width

43. Breakpoints
Get Screen width
Get device mode

44. Breakpoints
Get Screen width
Get device mode

45. Breakpoints
Get Screen width
Get device mode
Set breakpoint and update the UI

46. Breakpoints
Get Screen width
Get device mode
Set breakpoint and update the UI
Is this the only way ?

47. Breakpoints
https://pub.dev/packages/responsive_builder

48. Breakpoints
https://pub.dev/packages/responsive_builder

49. Breakpoints
https://pub.dev/packages/responsive_builder

51. bit.ly/dahab-youtube

52. https://github.com/dahabit/flutter-web-session2

53. bit.ly/dahab-youtube

54. Ahmed Abu Eldahab
Google Developer Expert in Flutter & Dart
Senior Technical Consultant
Kortobaa LLC CTO
/Dahabdev