Flutter Build Responsive Layout Skill 安全审计

2name: flutter-build-responsive-layout3description: 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.4metadata:

21*   **Use `MediaQuery.sizeOf(context)`** to get the size of the entire app window.22*   **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.23*   **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.24*   **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.25

46**Task Progress:**47- [ ] Identify the target widget that requires adaptive behavior.48- [ ] Wrap the widget tree in a `LayoutBuilder`.49- [ ] Extract the `constraints.maxWidth` from the builder callback.50- [ ] Define an adaptive breakpoint (e.g., `largeScreenMinWidth = 600`).51- [ ] **If `maxWidth > largeScreenMinWidth`:** Return a large-screen layout (e.g., a `Row` placing a navigation sidebar and content area side-by-side).52- [ ] **If `maxWidth <= largeScreenMinWidth`:** Return a small-screen layout (e.g., a `Column` or standard navigation-style approach).53- [ ] Run validator -> resize the application window -> review layout transitions -> fix overflow errors.

7475const double largeScreenMinWidth = 600.0;7677class AdaptiveLayout extends StatelessWidget {78  const AdaptiveLayout({super.key});7980  @override81  Widget build(BuildContext context) {82    return LayoutBuilder(83      builder: (context, constraints) {84        if (constraints.maxWidth > largeScreenMinWidth) {85          return _buildLargeScreenLayout();86        } else {87          return _buildSmallScreenLayout();88        }

59**Task Progress:**60- [ ] Identify full-width components (e.g., `ListView`, text blocks, forms).61- [ ] **If optimizing a list:** Convert `ListView.builder` to `GridView.builder` using `SliverGridDelegateWithMaxCrossAxisExtent` to automatically adjust column counts based on window size.62- [ ] **If optimizing a form or text block:** Wrap the component in a `ConstrainedBox`.63- [ ] Apply `BoxConstraints(maxWidth: [optimal_width])` to the `ConstrainedBox`.64- [ ] Wrap the `ConstrainedBox` in a `Center` widget to keep the constrained content centered on large screens.65- [ ] Run validator -> test on desktop/tablet target -> review horizontal stretching -> adjust `maxWidth` or grid extents.66

52- [ ] **If `maxWidth <= largeScreenMinWidth`:** Return a small-screen layout (e.g., a `Column` or standard navigation-style approach).53- [ ] Run validator -> resize the application window -> review layout transitions -> fix overflow errors.54

7172```dart73import 'package:flutter/material.dart';7475const double largeScreenMinWidth = 600.0;76