flutter-build-responsive-layout

Implementing Adaptive Layouts

Contents

• Space Measurement Guidelines
• Widget Sizing and Constraints
• Device and Orientation Behaviors
• Workflow: Constructing an Adaptive Layout
• Workflow: Optimizing for Large Screens
• Examples

Space Measurement Guidelines

Determine the available space accurately to ensure layouts adapt to the app window, not just the physical device.

• Use MediaQuery.sizeOf(context) to get the size of the entire app window.
• Use LayoutBuilder to make layout decisions based on the parent widget's allocated space. Evaluate constraints.maxWidth to determine the appropriate widget tree to return.
• Do not use MediaQuery.orientationOf or OrientationBuilder near the top of the widget tree to switch layouts. Device orientation does not accurately reflect the available app window space.
• Do not check for hardware types (e.g., "phone" vs. "tablet"). Flutter apps run in resizable windows, multi-window modes, and picture-in-picture. Base all layout decisions strictly on available window space.

Widget Sizing and Constraints

Understand and apply Flutter's core layout rule: Constraints go down. Sizes go up. Parent sets position.

• Distribute Space: Use Expanded and Flexible within Row, Column, or Flex widgets.
  • Use Expanded to force a child to fill all remaining available space (equivalent to Flexible with fit: FlexFit.tight and a flex factor of 1.0).
  • Use Flexible to allow a child to size itself up to a specific limit while still expanding/contracting. Use the flex factor to define the ratio of space consumption among siblings.
• Constrain Width: Prevent widgets from consuming all horizontal space on large screens. Wrap widgets like GridView or ListView in a ConstrainedBox or Container and define a maxWidth in the BoxConstraints.
• Lazy Rendering: Always use ListView.builder or GridView.builder when rendering lists with an unknown or large number of items.