flutter-build-responsive-layout

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

To ensure that layouts adapt fluidly to the app window (which is especially important on platforms with resizable windows or multi-window multitasking), determine available space using these principles:

• Use MediaQuery.sizeOf(context): Instead of accessing the full MediaQuery.of(context) (which triggers rebuilds for any MediaQuery property change), use the modern and efficient MediaQuery.sizeOf(context) to retrieve the dimensions of the application window.
• Use LayoutBuilder: Place layout decisions inside a LayoutBuilder when you want a component to adapt based on the size allocated to it by its parent widget rather than the global screen dimensions. Use constraints.maxWidth to choose the appropriate widget subtree to render.
• Avoid global orientation builders: Do not rely on device orientation builders (OrientationBuilder or MediaQuery.orientationOf) near the top of the widget tree to switch main layouts. The device orientation does not always reflect the actual available layout space, particularly in multi-window or foldable multitasking modes.
• Do not check for physical hardware type: Do not check whether the current hardware is a "phone", "tablet", or "desktop" to determine layout rules. Layouts must adapt to window constraints, not physical hardware types, since resizable windows, picture-in-picture, and screen splits are standard on modern platforms.

Widget Sizing and Constraints