skills.rest
evanca
evancaCOMMUNITY
Explore all skills by this author →
Website𝕏@ivannahereGitHub

flutter-use-column-row-first

Build responsive Flutter layouts using Row, Column, Expanded, and Flexible widgets.

628|64|Updated Apr 22, 2025
Search Tags:#flutter#overflow#DART#UI Design#Responsive Layout#row column#flex widgets
One-click install
npx skills add https://github.com/evanca/flutter-ai-rules --skill flutter-use-column-row-first
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-use-column-row-first
Source: https://github.com/evanca/flutter-ai-rules/tree/main/skills/flutter-use-column-row-first
Command: npx skills add https://github.com/evanca/flutter-ai-rules --skill flutter-use-column-row-first

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Flutter screens often break with RenderFlex overflow errors or rigid layouts that fail on different screen sizes, text scaling, or localized content. This Skill guides the agent to compose layouts from Flutter's constraint system using flex widgets first, avoiding hardcoded dimensions and coordinate-based positioning.

Core Features & Use Cases

  • Flex-first layout composition: Start vertical groups with Column and horizontal groups with Row, then distribute space with Expanded, Flexible, Spacer, and flex ratios.
  • Constraint safety rules: Prevent common errors like non-zero flex on unbounded axes, misplaced Expanded widgets, and overflow in scrollables.
  • Rigid layout avoidance: Replace hardcoded Positioned coordinates, fixed SizedBox dimensions, and mockup-copied screen sizes with adaptive patterns like LayoutBuilder, Wrap, and SafeArea.
  • Use Case: When asked to build a profile screen, the agent decomposes the mockup into nested Row and Column widgets, wraps variable-width text in Flexible, and verifies the layout at narrow and wide viewport sizes.

Quick Start

Use the flutter-use-column-row-first skill to build this Flutter screen responsively with Row and Column layouts.

Frequently Asked Questions about flutter-use-column-row-first

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a responsive layout in Flutter?▼

Start vertical groups with Column and horizontal groups with Row, then distribute free space using Expanded, Flexible, and Spacer. Use LayoutBuilder or breakpoints when the composition itself must change with available space, and test narrow and wide constraints.

When should I use Expanded vs Flexible in Flutter?▼

Use Expanded when a child must fill its allocated share of remaining main-axis space, and Flexible when a child may use less than its share. Both must be placed only under Row, Column, or Flex widgets.

Why does my Flutter Column overflow with a RenderFlex error?▼

Overflow happens when content exceeds bounded constraints, often from non-zero flex on an unbounded axis or a Column that cannot scroll. Wrap content in ListView for scrollable vertical content, or wrap a nested Column in Expanded to give it the outer column's remaining height.

Can I use Stack and Positioned for Flutter layouts?▼

Avoid Stack with hardcoded Positioned coordinates as a default layout mechanism. Use them only for concrete purposes like true visual overlap, badges, floating controls, or anchored decoration, and state the purpose in code when it is not obvious.

How do I make a Flutter Row wrap to multiple lines?▼

Use the Wrap widget when horizontal children should move onto another run instead of shrinking or overflowing. For variable-width content inside a Row, wrap it in Expanded or Flexible so it yields space to siblings.

Related Skills

Explore More Software Engineering Skills→
dimitriRemoivilledimitriRemoiville
1

widgets-and-screens

Generate Flutter screens and widgets with routing and bloc wiring.

Community
Intermediate
466852675466852675

flutter-dev

Build cross-platform Flutter apps with Riverpod, Bloc, and GoRouter.

Community
Intermediate
OM-bit-hubOM-bit-hub

responsive-design

Plan responsive UI layouts with mobile-first breakpoint strategies and testing plans.

Community
Advanced
FalkiconFalkicon
16

k-fenui

Build World of Warcraft addon UIs with composable FenUI widgets and declarative layouts.

Community
Advanced