Dart Tutorial
/

Flutter Chapter 11 of 16

Responsive and Adaptive Design

Make one app look right on small phones, large phones, tablets, foldables, desktops and the web.

Flutter runs on screens from a small phone to a wide monitor. A layout built for one size and stretched to another looks broken. This chapter shows how to build screens that adjust.

Lessons in this chapter

  1. MediaQuery and LayoutBuilder in FlutterLearn to read the screen size with MediaQuery and the available space with LayoutBuilder, and when to use each for responsive Flutter UI.
  2. Responsive Layouts in Flutter: Breakpoints for Phone, Tablet and DesktopBuild Flutter layouts that adapt to phone, tablet and desktop with breakpoints, adaptive navigation, responsive grids and max widths.
  3. SafeArea, Orientation and the Keyboard in FlutterHandle notches, rounded corners, landscape mode and the on-screen keyboard in Flutter with SafeArea, OrientationBuilder and view insets.
  4. Adaptive Apps in Flutter: Android, iOS, Web and DesktopMake a Flutter app feel native on each platform: detect the platform, use adaptive widgets, support mouse and keyboard, and handle web.