AdaptiveLinearLayout

AdaptiveLinearLayout dynamically switches between Row and Column based on screen orientation, with optional reversal of child order.

How It Works

Depending on the layoutPreference and the current screen dimensions:

If LayoutPreference.Row is selected:
- Portrait: uses Row
- Landscape: uses Column
If LayoutPreference.Column is selected:
- Portrait: uses Column
- Landscape: uses Row

🎛️ Parameters

Parameter	Type	Default	Description
`children`	`List<Widget>`	—	Required list of widgets
`layoutPreference`	`LayoutPreference`	`LayoutPreference.row`	Which layout to prefer in portrait mode
`reverseDirection`	`ReverseDirection`	`ReverseDirection.none`	Whether to reverse child order
`spacing`	`double`	`0.0`	Space between children
`mainAxisAlignment`	`MainAxisAlignment`	`MainAxisAlignment.start`	Horizontal/vertical alignment
`crossAxisAlignment`	`CrossAxisAlignment`	`CrossAxisAlignment.center`	Cross alignment
`mainAxisSize`	`MainAxisSize`	`MainAxisSize.max`	Main axis size
`textDirection`	`TextDirection?`	`null`	Row layout text direction
`verticalDirection`	`VerticalDirection`	`VerticalDirection.down`	Column layout direction
`textBaseline`	`TextBaseline?`	`null`	Text baseline (for alignment if needed)

📚 Enums

LayoutPreference

enum LayoutPreference {
  row,    // Portrait = Row, Landscape = Column
  column  // Portrait = Column, Landscape = Row
}

ReverseDirection

enum ReverseDirection {
  row,      // Reverse in Row mode
  column,   // Reverse in Column mode
  none      // Do not reverse
}

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  adaptive_linear_layout: ^0.0.4

Then run:

flutter pub get

Let’s Understand With Actual Example

Desired UI

1. Portrait Layout

On Portrait Screen the first child (image) is on top and the second child (container) is below it.

Portrait example

2. Landscape/Desktop Layout

On Landscape/Desktop Screen the image is on the right, container on the left.

Landscape example

3. Row -> Column Switch

If LayoutPreference.Row is selected, it will be a Row in portrait and Column in landscape. The first element in Row appears left in portrait, but in Column mode it moves to last; we want it last in column.

Row to Column reversal gif

4. Last Image in Row

If we put the image last in Row, it appears last in Column (correct for landscape), but in Row layout it fails since the image should be first.

Incorrect row order gif

5. Custom ReverseDirection

By choosing ReverseDirection.Row or ReverseDirection.Column, we get our customized behavior.

Custom reverse direction gif

☕ Support Me

If you find my work useful, consider supporting me:

🙏 Credits

Special thanks to Marwan
for the original Login UI Template on Figma.

This layout and logic was inspired by his beautiful design work 💙