Flutter / Dart, widgets, and local ownership / Lesson 3
Constraints and responsive layout
Explain overflow by tracing constraints, then choose layout boundaries that remain useful with long or scaled text.
On this page
Lesson goals
- Trace the parent constraint first
- Understand flex allocation
- Constrain a row label deliberately
Trace the parent constraint first
A Flutter box receives minimum and maximum width and height from its parent. It chooses a size within those limits, and the parent positions it. A requested width is therefore a preference subject to constraints, not an unconditional command. Begin an overflow investigation by naming the failing axis and tracing the nearest finite bound. Adding random padding, Center, or fixed dimensions may hide one screenshot while preserving the underlying contradiction. Sketch the relevant parent-child chain and record which widget is expected to consume remaining space before changing the layout.
Understand flex allocation
Row and Column distribute children along a main axis while applying cross-axis constraints. A non-flex child can ask for more main-axis space than is available. Expanded gives its child a share of remaining bounded space; Flexible can allow a looser fit. These tools solve different contracts, so inspect the desired behavior rather than adding Expanded to every child. A text label that should wrap beside an icon needs a finite width. A vertically scrolling list inside a Column needs a finite height or a deliberately different scrolling composition.
Constrain a row label deliberately
The first fragment lets the icon retain its intrinsic role while Expanded allocates the remaining row width to a text block. maxLines and ellipsis express a particular product choice: show at most two lines and indicate truncation. They are not mandatory overflow fixes. If the full description is essential, allow wrapping and vertical growth instead, or provide an accessible detail view. Review the layout with translated text, narrow windows, and increased text scale. A design that only survives its initial short label has not established a robust constraint contract.
Widget placeRow() => const Row(children: [
Icon(Icons.place),
SizedBox(width: 8),
Expanded(child: Text('Riverside learning center and reading room',
maxLines: 2, overflow: TextOverflow.ellipsis)),
]);
The label occupies the remaining finite row width and uses at most two lines.Expanded must be used in a compatible flex parent. The example assumes the Row itself receives a bounded width.
Bound the scrolling region
The second fragment gives a header its natural height and assigns remaining height to a lazy list. This is appropriate when the enclosing Column receives finite height, such as a Scaffold body. It is not appropriate to wrap the entire Column in a vertical scroll view and retain Expanded, because the main-axis bound becomes unbounded. Decide whether the page has one continuous scrolling surface or a fixed header plus scrolling content. For a continuous complex page, slivers may express the structure more directly than nesting multiple independently scrolling children.
Widget readingList() => Column(children: [
const Padding(padding: EdgeInsets.all(16), child: Text('Reading list')),
Expanded(child: ListView.builder(
itemCount: 40,
itemBuilder: (context, index) => ListTile(title: Text('Chapter ${index + 1}')),
)),
]);
A header stays above a scrolling list of Chapter 1 through Chapter 40.The finite parent height lets Expanded allocate a viewport. Items are requested lazily rather than all laid out as a Column.
Respond to available space, not a device nickname
LayoutBuilder exposes the constraints at a particular location. It is useful when a card or pane should change arrangement according to its own available width. MediaQuery describes broader environment information, which is not necessarily the width a nested component receives. Choose breakpoints around content needs, such as two columns no longer fitting their readable minimum widths. A phone rotated into landscape and a narrow desktop window can violate assumptions based only on platform labels. Keep navigation, reading order, and focus continuity coherent when the arrangement changes.
Verify content extremes
A useful layout check includes empty data, a single row, many rows, long unbroken identifiers, right-to-left labels, keyboard visibility, and large text. These cases exercise different constraints. Do not disable text scaling merely to preserve a mockup. Prefer a layout that can grow, wrap, scroll, or change composition while preserving meaning. When an assertion names unbounded height or an overflowing RenderFlex, retain the first relevant exception and a minimal tree. Later paint failures may simply be consequences of the initial invalid layout, so diagnosing them separately wastes effort.
Common errors and fixes
A Row overflows beside a long label
- Why it happens
- The text received no usable remaining-width contract.
- How to fix it
- Use an appropriate flex child and define wrapping or truncation.
- Prevent it next time
- Exercise long translations at narrow widths.
A vertical viewport receives unbounded height
- Why it happens
- A scrollable was placed in an unconstrained vertical parent.
- How to fix it
- Bound the viewport or redesign the page as a single scrolling surface.
- Prevent it next time
- Sketch ownership of scrolling and finite bounds.
Expanded fails inside a vertical scroll view
- Why it happens
- There is no finite remaining height to divide.
- How to fix it
- Remove the contradictory flex contract and select an appropriate scrolling composition.
- Prevent it next time
- Review main-axis bounds before adding flex.
Check your understanding
1. A page needs a fixed search field and a long result list. Where should scrolling live?
Show worked solution
Use a bounded page body containing a Column with the search field and an Expanded list. The list owns result scrolling. If product requirements later say the search field should scroll away, reconsider the page as one scrolling surface rather than nesting contradictory scrollables.
2. How should a two-column card decide when to stack?
Show worked solution
Measure the available component constraints and the minimum useful content widths, including gap and padding. Choose a breakpoint from that requirement, then test long and scaled text. A device category alone does not describe the componentโs actual allocation.
Key takeaways
- Trace the parent constraint first
- Verify content extremes