Wrap widget in Flutter

Introduction

The Wrap widget helps arrange items in a row or column and automatically moves them to the next line when there is no more space. It keeps your layout neat and organized without cutting off content.

When you want to display a list of tags or chips that should flow to the next line if they don't fit in one row.

When you have buttons or icons that need to wrap to a new line on smaller screens.

When you want a responsive layout that adjusts automatically to screen size changes.

When you want to avoid horizontal scrolling by wrapping content instead.

When you want to create a flexible grid-like layout without fixed rows or columns.

Syntax

Flutter

Wrap(
  direction: Axis.horizontal,
  spacing: 8.0,
  runSpacing: 4.0,
  children: [
    Widget1(),
    Widget2(),
    // ...
  ],
)

direction sets whether children are arranged horizontally (row) or vertically (column).

spacing is the space between items in the main axis.

Examples

Basic Wrap with default horizontal direction and no spacing.

Flutter

Wrap(
  children: [
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

Wrap with vertical direction and custom spacing between items and runs.

Flutter

Wrap(
  direction: Axis.vertical,
  spacing: 10,
  runSpacing: 20,
  children: [
    Icon(Icons.star),
    Icon(Icons.favorite),
    Icon(Icons.thumb_up),
  ],
)

Wrap with spacing and runSpacing, generating multiple Chip widgets that wrap automatically.

Flutter

Wrap(
  spacing: 12,
  runSpacing: 8,
  children: List.generate(6, (index) => Chip(label: Text('Item $index'))),
)

Sample App

This app shows 8 colored boxes arranged using Wrap. The boxes flow horizontally and wrap to the next line if they don't fit. Spacing between boxes is 10 pixels horizontally and 15 pixels vertically.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Wrap Widget Example')),
        body: Center(
          child: Wrap(
            spacing: 10,
            runSpacing: 15,
            children: List.generate(
              8,
              (index) => Container(
                width: 80,
                height: 80,
                color: Colors.blue[(index + 1) * 100],
                alignment: Alignment.center,
                child: Text('Box $index', style: const TextStyle(color: Colors.white)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Important Notes

Wrap is useful for dynamic content that changes size or number.

Use spacing and runSpacing to control gaps between items and lines.

Wrap automatically handles overflow by moving items to the next line.

Summary

The Wrap widget arranges children in horizontal or vertical lines and wraps them when needed.

It helps create responsive layouts without scrolling.

Use spacing properties to control gaps between items and lines.