stretch_wrap

A Flutter widget that wraps children into multiple rows and stretches designated children to fill the remaining space in each row.

Features

• Wraps widgets into multiple rows, like Flutter's built-in Wrap.
• Stretches designated children or all children within each row to fill remaining space.
• Supports multiple stretched children in a row with different stretch ratios.
• Configurable spacing between children and rows.
• Cross-axis alignment control (start, center, end, stretch) for children within each row.
• Run alignment options (start, center, end, spaceBetween, spaceAround) for positioning children when there's remaining space.

Usage

Wrap your widgets with StretchWrap. Use Stretch to mark which children should expand to fill the remaining space:

StretchWrap(
  spacing: 8,  // Space between children
  runSpacing: 16,  // Space between rows
  children: [
    Container(width: 100, height: 50, color: Colors.red),
    Stretch(  // This will fill available space, minimum width is 50
      child: Container(width: 50, height: 50, color: Colors.blue),
    ),
    Container(width: 80, height: 50, color: Colors.green),
  ],
)

Multiple stretched children

When multiple children in the same row are wrapped with Stretch, they share the remaining space proportionally based on their flex factor:

StretchWrap(
  spacing: 8,
  children: [
    Container(width: 100),
    Stretch(  // Gets 1/3 of remaining space (width 0 prevents it from taking a whole row)
      child: Container(color: Colors.blue, width: 0),
    ),
    Stretch(  // Gets 2/3 of remaining space (width 0 prevents it from taking a whole row)
      flex: 2,
      child: Container(color: Colors.green, width: 0),
    ),
  ],
)

How it works

1. First, children are measured and arranged into rows.
2. For each row, any remaining space is divided among Stretch children, or all children if it is configured to auto-stretch.
3. If a row has multiple stretched children, space is divided according to their flex values.
4. Each stretched child is then resized to its calculated width.

Examples

See the example folder for a complete sample app.

Basic Usage

Single stretched child between fixed-width children

Multiple Stretched Children

Shows how flex values affect space distribution between multiple stretched children in the same row.

Multiple Rows

Demonstrates wrapping behavior with runSpacing when children exceed the available width.

Mixed Content

Mix of text, buttons, and other widgets showing real-world usage scenarios.

Real-world Example

Tag list with "Add Tag" button, where each tag is stretched so all rows are of equal width.

Alignment & AutoStretch

Demonstrates the alignment and autoStretch parameters for controlling how children are positioned and which children are automatically stretched.

Cross Run Alignment

Shows how children align within each run using crossRunAlignment parameter (start, center, end, stretch).