https://docs.flutter.dev/ui/widgets/layout から生成されたSkills

SKILL.md

name	description	metadata
flutter-layout	...	model last_modified models/gemini-3.1-pro-preview Wed, 04 Mar 2026 00:59:16 GMT

Flutter Layout Architecture

Goal

Analyzes Flutter UI requirements and implements optimal layout structures using single-child, multi-child, and sliver widgets. It evaluates spatial constraints, scrolling behaviors, and responsive design needs to generate production-ready, performant Dart code while adhering to strict Flutter layout protocols.

Instructions

1. Analyze UI Requirements Evaluate the provided design or description to determine the number of children, scrolling requirements, and alignment needs. STOP AND ASK THE USER: If the scrolling behavior (e.g., lazy loading vs. static), cross-axis alignment, or responsive breakpoints are not explicitly defined, pause and request clarification before generating code.

2. Apply Decision Logic Use the following flowchart logic to select the appropriate widget composition:

   • Single Child?
     • Needs specific dimensions? -> SizedBox or FractionallySizedBox
     • Needs padding? -> Padding
     • Needs alignment? -> Align or Center
     • Needs background/decoration? -> Container
     • Needs aspect ratio? -> AspectRatio
   • Multiple Children (Non-Scrolling)?
     • Linear horizontal? -> Row
     • Linear vertical? -> Column
     • Overlapping? -> Stack
     • Wrapping content? -> Wrap
   • Multiple Children (Scrolling)?
     • Homogeneous list? -> ListView.builder
     • Grid layout? -> GridView.builder
     • Complex/Mixed scrolling effects? -> CustomScrollView with Slivers.

3. Implement Single-Child Layouts When wrapping a single widget to alter its layout constraints, use the most specific widget available rather than defaulting to Container.

   // Prefer specific layout widgets over Container for performance
   const Align(
     alignment: Alignment.bottomRight,
     child: Padding(
       padding: EdgeInsets.all(16.0),
       child: SizedBox(
         width: 200.0,
         height: 100.0,
         child: Placeholder(),
       ),
     ),
   );

4. Implement Multi-Child Layouts Construct linear or overlapping layouts. Explicitly define mainAxisAlignment and crossAxisAlignment.

   // Standard Row/Column implementation
   Row(
     mainAxisAlignment: MainAxisAlignment.spaceBetween,
     crossAxisAlignment: CrossAxisAlignment.center,
     children: const [
       Icon(Icons.home),
       Expanded(
         child: Padding(
           padding: EdgeInsets.symmetric(horizontal: 8.0),
           child: Text('Dashboard'),
         ),
       ),
       Icon(Icons.settings),
     ],
   );
   
   // Stack implementation for overlapping
   Stack(
     alignment: Alignment.center,
     children: [
       const Image(image: AssetImage('background.png')),
       Positioned(
         bottom: 10.0,
         right: 10.0,
         child: FloatingActionButton(onPressed: () {}),
       ),
     ],
   );

5. Implement Sliver Layouts for Complex Scrolling For layouts requiring collapsible app bars, mixed lists, and grids within the same scrollable area, implement a CustomScrollView.

   CustomScrollView(
     slivers: <Widget>[
       const SliverAppBar(
         pinned: true,
         expandedHeight: 250.0,
         flexibleSpace: FlexibleSpaceBar(
           title: Text('Sliver Layout'),
         ),
       ),
       SliverPadding(
         padding: const EdgeInsets.all(8.0),
         sliver: SliverGrid(
           gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
             crossAxisCount: 2,
             mainAxisSpacing: 10.0,
             crossAxisSpacing: 10.0,
             childAspectRatio: 4.0,
           ),
           delegate: SliverChildBuilderDelegate(
             (BuildContext context, int index) {
               return Container(
                 alignment: Alignment.center,
                 color: Colors.teal[100 * (index % 9)],
                 child: Text('Grid Item $index'),
               );
             },
             childCount: 20,
           ),
         ),
       ),
       SliverList(
         delegate: SliverChildBuilderDelegate(
           (BuildContext context, int index) {
             return ListTile(title: Text('List Item $index'));
           },
           childCount: 10,
         ),
       ),
     ],
   );

6. Validate-and-Fix Layout Constraints Review the generated tree for common constraint violations.

   • Check: Is a ListView nested inside a Column?
   • Fix: Wrap the ListView in an Expanded or Flexible widget to provide bounded height.
   • Check: Is a Row overflowing its horizontal bounds?
   • Fix: Wrap text/variable-width children in Expanded or use a Wrap widget instead of Row.

Constraints

• Strict Constraint Rule: Constraints go down, sizes go up, parent sets position. Never attempt to force a child size that violates parent constraints.
• No Unbounded Viewports: Never place a scrollable widget (e.g., ListView, GridView) directly inside an unconstrained parent (e.g., Column, Row) without wrapping it in an Expanded or Flexible widget.
• Const Usage: You MUST use the const keyword for all layout widgets and their children where the state is immutable at compile time.
• Widget Specificity: Do not use Container if a more specific widget (Padding, SizedBox, Align) achieves the exact same layout.
• No Deprecated APIs: Ensure all layout properties and widget names conform to the latest stable Flutter SDK (e.g., do not use deprecated text styles or button types within the layout).