flutter-build-responsive-layout

SKILL.md

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.