flutter-build-responsive-layout

Name: flutter-build-responsive-layout
Author: flutter

926installs159forks

How to install flutter-build-responsive-layout?

flutter/agent-plugins/flutter-build-responsive-layout

$npx -y skills add flutter/agent-plugins --skill flutter-build-responsive-layout

Installs into the current project.

Summary

Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

Files · 1

View on GitHub

SKILL.md

1	# Implementing Adaptive Layouts
2
3	## Contents
4	- [Space Measurement Guidelines](#space-measurement-guidelines)
5	- [Widget Sizing and Constraints](#widget-sizing-and-constraints)
6	- [Device and Orientation Behaviors](#device-and-orientation-behaviors)
7	- [Workflow: Constructing an Adaptive Layout](#workflow-constructing-an-adaptive-layout)
8	- [Workflow: Optimizing for Large Screens](#workflow-optimizing-for-large-screens)
9	- [Examples](#examples)
10
11	## Space Measurement Guidelines
12	Determine the available space accurately to ensure layouts adapt to the app window, not just the physical device.
13
14	* Use `MediaQuery.sizeOf(context)` to get the size of the entire app window.
15	* 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.
16	* 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.
17	* 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.
18
19	## Widget Sizing and Constraints
20	Understand and apply Flutter's core layout rule: Constraints go down. Sizes go up. Parent sets position.
21
22	* Distribute Space: Use `Expanded` and `Flexible` within `Row`, `Column`, or `Flex` widgets.
23	* 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).
24	* 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.
25	* 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`.
26	* Lazy Rendering: Always use `ListView.builder` or `GridView.builder` when rendering lists with an unknown or large number of items.
27
28	## Device and Orientation Behaviors
29	Ensure the app behaves correctly across all device form factors and input methods.
30
31	* Do not lock screen orientation. Locking orientation causes severe layout issues on foldable devices, often resulting in letterboxing (the app centered with black borders). Android large format tiers require both portrait and landscape support.
32	* Fallback for Locked Orientation: If business requirements strictly mandate a locked orientation, use the `Display API` to retrieve physical screen dimensions instead of `MediaQuery`. `MediaQuery` fails to receive the larger window size in compatibility modes.
33	* Support Multiple Inputs: Implement support for basic mice, trackpads, and keyboard shortcuts. Ensure touch targets are appropriately sized and keyboard navigation is accessible.
34
35	## Workflow: Constructing an Adaptive Layout
36
37	Follow this workflow to implement a layout that adapts to the available `BoxConstraints`.
38
39	Task Progress:
40	- [ ] Identify the target widget that requires adaptive behavior.
41	- [ ] Wrap the widget tree in a `LayoutBuilder`.
42	- [ ] Extract the `constraints.maxWidth` from the builder callback.
43	- [ ] Define an adaptive breakpoint (e.g., `largeScreenMinWidth = 600`).
44	- [ ] If `maxWidth > largeScreenMinWidth`: Return a large-screen layout (e.g., a `Row` placing a navigation sidebar and content area side-by-side).
45	- [ ] If `maxWidth <= largeScreenMinWidth`: Return a small-screen layout (e.g., a `Column` or standard navigation-style approach).
46	- [ ] Run validator -> resize the application window -> review layout transitions -> fix overflow errors.
47
48	## Workflow: Optimizing for Large Screens
49
50	Follow this workflow to prevent UI elements from stretching unnaturally on large displays.
51
52	Task Progress:
53	- [ ] Identify full-width components (e.g., `ListView`, text blocks, forms).
54	- [ ] If optimizing a list: Convert `ListView.builder` to `GridView.builder` using `SliverGridDelegateWithMaxCrossAxisExtent` to automatically adjust column counts based on window size.
55	- [ ] If optimizing a form or text block: Wrap the component in a `ConstrainedBox`.
56	- [ ] Apply `BoxConstraints(maxWidth: [optimal_width])` to the `ConstrainedBox`.
57	- [ ] Wrap the `ConstrainedBox` in a `Center` widget to keep the constrained content centered on large screens.
58	- [ ] Run validator -> test on desktop/tablet target -> review horizontal stre

People who liked this also viewed

6 picks

Type

flutter-build-responsive-layout

926installs159forks

View on GitHub

How to install flutter-build-responsive-layout?

flutter/agent-plugins/flutter-build-responsive-layout

$npx -y skills add flutter/agent-plugins --skill flutter-build-responsive-layout

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Implementing Adaptive Layouts
2
3	## Contents
4	- [Space Measurement Guidelines](#space-measurement-guidelines)
5	- [Widget Sizing and Constraints](#widget-sizing-and-constraints)
6	- [Device and Orientation Behaviors](#device-and-orientation-behaviors)
7	- [Workflow: Constructing an Adaptive Layout](#workflow-constructing-an-adaptive-layout)
8	- [Workflow: Optimizing for Large Screens](#workflow-optimizing-for-large-screens)
9	- [Examples](#examples)
10
11	## Space Measurement Guidelines
12	Determine the available space accurately to ensure layouts adapt to the app window, not just the physical device.
13
14	* Use `MediaQuery.sizeOf(context)` to get the size of the entire app window.
15	* 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.
16	* 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.
17	* 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.
18
19	## Widget Sizing and Constraints
20	Understand and apply Flutter's core layout rule: Constraints go down. Sizes go up. Parent sets position.
21
22	* Distribute Space: Use `Expanded` and `Flexible` within `Row`, `Column`, or `Flex` widgets.
23	* 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).
24	* 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.
25	* 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`.
26	* Lazy Rendering: Always use `ListView.builder` or `GridView.builder` when rendering lists with an unknown or large number of items.
27
28	## Device and Orientation Behaviors
29	Ensure the app behaves correctly across all device form factors and input methods.
30
31	* Do not lock screen orientation. Locking orientation causes severe layout issues on foldable devices, often resulting in letterboxing (the app centered with black borders). Android large format tiers require both portrait and landscape support.
32	* Fallback for Locked Orientation: If business requirements strictly mandate a locked orientation, use the `Display API` to retrieve physical screen dimensions instead of `MediaQuery`. `MediaQuery` fails to receive the larger window size in compatibility modes.
33	* Support Multiple Inputs: Implement support for basic mice, trackpads, and keyboard shortcuts. Ensure touch targets are appropriately sized and keyboard navigation is accessible.
34
35	## Workflow: Constructing an Adaptive Layout
36
37	Follow this workflow to implement a layout that adapts to the available `BoxConstraints`.
38
39	Task Progress:
40	- [ ] Identify the target widget that requires adaptive behavior.
41	- [ ] Wrap the widget tree in a `LayoutBuilder`.
42	- [ ] Extract the `constraints.maxWidth` from the builder callback.
43	- [ ] Define an adaptive breakpoint (e.g., `largeScreenMinWidth = 600`).
44	- [ ] If `maxWidth > largeScreenMinWidth`: Return a large-screen layout (e.g., a `Row` placing a navigation sidebar and content area side-by-side).
45	- [ ] If `maxWidth <= largeScreenMinWidth`: Return a small-screen layout (e.g., a `Column` or standard navigation-style approach).
46	- [ ] Run validator -> resize the application window -> review layout transitions -> fix overflow errors.
47
48	## Workflow: Optimizing for Large Screens
49
50	Follow this workflow to prevent UI elements from stretching unnaturally on large displays.
51
52	Task Progress:
53	- [ ] Identify full-width components (e.g., `ListView`, text blocks, forms).
54	- [ ] If optimizing a list: Convert `ListView.builder` to `GridView.builder` using `SliverGridDelegateWithMaxCrossAxisExtent` to automatically adjust column counts based on window size.
55	- [ ] If optimizing a form or text block: Wrap the component in a `ConstrainedBox`.
56	- [ ] Apply `BoxConstraints(maxWidth: [optimal_width])` to the `ConstrainedBox`.
57	- [ ] Wrap the `ConstrainedBox` in a `Center` widget to keep the constrained content centered on large screens.
58	- [ ] Run validator -> test on desktop/tablet target -> review horizontal stre

People who liked this also viewed

6 picks

Type