constrained_layout 0.0.4

An experimental Flutter layout allowing to position widgets by declaring relations between them.

ConstrainedLayout

An experimental Flutter layout allowing to position widgets by declaring relations between them.

Try out the package in an interactive playground app.

https://github.com/user-attachments/assets/eb47462c-1a3b-4990-9197-03fac519e707

Usage

Add ConstrainedLayout to the widget tree:

ConstrainedLayout(
  items: [
    // Use LinkToParent to position item at the parent's edges.
    ConstrainedItem(
      id: 'red',
      bottom: LinkToParent(),
      right: LinkToParent(),
      child: Square(Colors.red),
    ),
    // Use LinkTo to position item in relation to the target item.
    ConstrainedItem(
      id: 'green',
      bottom: LinkTo(id: 'red', edge: Edge.top),
      right: LinkTo(id: 'red', edge: Edge.left),
      child: Square(Colors.green),
    ),
    // Linking both horizontal or vertical edges will center item between target edges.
    ConstrainedItem(
      id: 'blue',
      top: LinkToParent(),
      bottom: LinkTo(id: 'green', edge: Edge.top),
      left: LinkToParent(),
      right: LinkTo(id: 'green', edge: Edge.left),
      child: Square(Colors.blue),
    ),
    // Items can be linked to different targets to position them in the desired way.
    ConstrainedItem(
      id: 'orange',
      top: LinkTo(id: 'blue', edge: Edge.bottom),
      bottom: LinkTo(id: 'green', edge: Edge.top),
      left: LinkToParent(),
      right: LinkTo(id: 'red', edge: Edge.right),
      child: Square(Colors.orange),
    ),
    // Unconstrained items are aligned to the top left corner of the parent.
    ConstrainedItem(
      id: 'yellow',
      child: Square(Colors.yellow),
    ),
  ],
)

The widget will use defined relations to determine the layout positions and sizes of its children: