Creating responsive UIs and other nuances of Flutter Web

on YouTube ↗25m

" summary

Covers making Flutter Web UIs adapt using MediaQuery for window size or LayoutBuilder for parent constraints, concrete breakpoints (compact <600dp, medium 600–840, expanded >840), and using AnimatedPadding and percentage-based sizing (2% horizontal) to animate/rescale elements. Explains conditional imports with a web-specific file using dart:html plus a fallback and using kIsWeb at runtime, details SEO limits because Flutter renders via JavaScript and recommends server-side rendering or a separate SEO-friendly landing page, and notes web-only widgets like selectableText and MouseRegion and AdaptiveScaffold.

AI-written summary · about

" chapters (12)

1. 0:00Responsive UI in Flutter Web
2. 1:09Why responsive UI matters
3. 3:14Abstract measure approach
4. 7:08Choosing breakpoints
5. 9:16Animations and sizing
6. 11:05Flutter Web nuances
7. 12:32Conditional importing
8. 15:05SEO challenges and solutions
9. 17:31Server-side rendering
10. 19:36Web-specific widgets
11. 22:23Adaptive Scaffold
12. 24:09Q&A

" related talks

• 34mGoogle Flutter: The Next Frontier in Mobile DevelopmentKamal Shree · droidcon Toronto 2019
• 22mInnovation and Trends in Flutter for webKamal Shree · 360|AnDev 2020
• 13mLearn how Flutter enhances web appsKevin Moore · Google I/O 2022
• 31mFlutter. New Approach to Web DevelopmentAleksandr Denisov · code.talks 2023
• 13mBuilding platform adaptive appsKevin Moore · Google I/O 2021
• 42mFlutter everywhere — from Mobile to WebFaisal Abid · Android Summit 2019
• 06mFlutter: Falling in Love Again with Mobile and Web DevLara Martin · Codemotion Berlin 2019
• 33mBeyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and WebEmily Fortuna, Emily Shack · Google I/O 2019