Responsive Layout Widget

FlutKit provides a dedicated widget, AdaptiveWrap, to help developers build responsive and adaptive page layouts without manually checking screen widths or writing multiple LayoutBuilder conditions. This widget intelligently switches the number of columns and adapts the width ratios based on breakpoints you define.

Common Use Cases

Use AdaptiveWrap when you want to:

• Create multi-column layouts that adapt to screen width
• Control column count per breakpoint
• Maintain consistent spacing between widgets
• Avoid manual responsive calculations

Common use cases include dashboards, forms, settings pages, and content panels.

Accordion Constructor

AdaptiveWrap({
  Key? key,
  required List<Widget> children,
  double spacing = kDefaultPadding,
  double runSpacing = kDefaultPadding,
  int? maxColumns,
  int? minColumns,
  List<double>? columnRatios,
  Map<double, int>? breakpoints,
  WrapAlignment alignment = WrapAlignment.start,
  WrapCrossAlignment crossAlignment = WrapCrossAlignment.start,
  double? itemHeight,
  void Function(int)? onLayoutChanged,
  bool useScreenWidth = false,
})

AdaptiveWrap({
  Key? key,
  required List<Widget> children,
  double spacing = kDefaultPadding,
  double runSpacing = kDefaultPadding,
  int? maxColumns,
  int? minColumns,
  List<double>? columnRatios,
  Map<double, int>? breakpoints,
  WrapAlignment alignment = WrapAlignment.start,
  WrapCrossAlignment crossAlignment = WrapCrossAlignment.start,
  double? itemHeight,
  void Function(int)? onLayoutChanged,
  bool useScreenWidth = false,
})

Parameter Explanation

AdaptiveWrap is a responsive layout widget designed to simplify adaptive, multi-column content layouts across different screen sizes. It dynamically adjusts the number of columns based on available width or defined breakpoints.

children (required)

required List<Widget> children,

required List<Widget> children,

A list of widgets that will be arranged into adaptive columns.

Each widget represents a layout item. The number of visible columns depends on breakpoints, constraints, or column settings.

spacing

double spacing = kDefaultPadding,

double spacing = kDefaultPadding,

Horizontal spacing between columns.

Use this to control the gap between items in the same row.

runSpacing

double runSpacing = kDefaultPadding,

double runSpacing = kDefaultPadding,

Vertical spacing between rows.

This spacing is applied when items wrap into the next line.

maxColumns

int? maxColumns,

int? maxColumns,

The maximum number of columns allowed.

If set, the layout will never exceed this number of columns, even on very large screens.

minColumns

int? minColumns,

int? minColumns,

The minimum number of columns allowed.

Ensures a consistent layout by preventing the layout from collapsing below a certain number of columns.

columnRatios

List<double>? columnRatios,

List<double>? columnRatios,

Defines the width ratio of each column.

Example:

columnRatios: [0.7, 0.3],

columnRatios: [0.7, 0.3],

• Column A uses 70% of available width
• Column B uses 30% of available width

The number of ratios should match the active column count.

breakpoints

Map<double, int>? breakpoints,

Map<double, int>? breakpoints,

Defines how many columns should be displayed at specific width thresholds.

Example:

breakpoints: {
  576: 1,
  768: 2,
  1024: 3,
},

breakpoints: {
  576: 1,
  768: 2,
  1024: 3,
},

Behavior:

• Width < 576 → 1 column
• 576 ≤ width < 768 → 2 columns
• 768 ≤ width < 1024 → 3 columns
• If no additional breakpoints are defined, the number of columns for larger screen widths remains 3, following the last specified breakpoint.

useScreenWidth

bool useScreenWidth = false,

bool useScreenWidth = false,

Determines how layout width is calculated.

• false (default): uses parent constraints
• true: uses full screen width (MediaQuery)

alignment

WrapAlignment alignment = WrapAlignment.start,

WrapAlignment alignment = WrapAlignment.start,

Controls horizontal alignment of items within each row.

Values:

• WrapAlignment.start
• WrapAlignment.center
• WrapAlignment.spaceBetween
• WrapAlignment.spaceAround

crossAlignment

WrapCrossAlignment crossAlignment = WrapCrossAlignment.start,

WrapCrossAlignment crossAlignment = WrapCrossAlignment.start,

Controls vertical alignment of items within a row.

Useful when items have different heights.

onLayoutChanged

void Function(int)? onLayoutChanged,

void Function(int)? onLayoutChanged,

Callback triggered when the number of active columns changes.

The callback returns:

• int: the current number of columns

Use cases:

• Adjust UI logic based on layout
• Trigger animations or data loading per layout change

Summary Table

Basic Example

AdaptiveWrap(
  breakpoints: {
    576: 1,
    768: 2,
  },
  columnRatios: const [
    0.7,
    0.3,
  ],
  spacing: 16,
  runSpacing: 16,
  children: [
    _demoCard('Column A', kSecondaryColor),
    _demoCard('Column B', kInfoColor),
  ],
),

AdaptiveWrap(
  breakpoints: {
    576: 1,
    768: 2,
  },
  columnRatios: const [
    0.7,
    0.3,
  ],
  spacing: 16,
  runSpacing: 16,
  children: [
    _demoCard('Column A', kSecondaryColor),
    _demoCard('Column B', kInfoColor),
  ],
),

Find several use case examples in the demo, please navigate to:

Base UI → Layout

Base UI → Layout

Best Practices

• Define breakpoints that match your design system
• Use consistent columnRatios across similar screens
• Avoid deeply nested layouts inside AdaptiveWrap
• Pair with FlutKit cards and panels for consistent UI

Practical Use Case Example

A common dashboard layout:

• Desktop: Content + Sidebar (2 columns)
• Tablet: Stacked but still 2 columns
• Mobile: Single-column stacked layout

AdaptiveWrap handles all of this with a single widget configuration.

Summary

AdaptiveWrap allows you to build clean, scalable, and responsive layouts with minimal code. By defining breakpoints and column ratios, you can focus on content rather than layout logic.

This makes it an ideal solution for FlutKit dashboards and adaptive content pages.