Flutter Wrap Widget

Automatically wrapping widgets to new lines

🔄 What is Wrap?

Wrap is a Flutter widget that displays children in multiple horizontal or vertical runs. When there's no more room, it automatically wraps to the next line, perfect for tags, chips, and flexible layouts. 


// Simple Wrap example
Wrap(
  children: [
    Chip(label: Text('Tag 1')),
    Chip(label: Text('Tag 2')),
    Chip(label: Text('Tag 3')),
  ],
)

Output:

Tag 1 Tag 2 Tag 3

Key Wrap Concepts

↩ī¸

Auto Wrap

Automatically wraps to next line 

Wrap(
  children: widgets,
)
📏

Spacing

Control space between items 

Wrap(
  spacing: 8.0,
  runSpacing: 4.0,
)
🔀

Direction

Horizontal or vertical layout 

Wrap(
  direction: Axis.vertical,
)
đŸŽ¯

Alignment

Align wrapped content 

Wrap(
  alignment: WrapAlignment.center,
)

🔹 Basic Wrap Usage

Create a simple wrap layout with chips: 

import 'package:flutter/material.dart';

class WrapExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Wrap Example')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Wrap(
          spacing: 8.0,
          runSpacing: 8.0,
          children: [
            Chip(label: Text('Flutter')),
            Chip(label: Text('Dart')),
            Chip(label: Text('Mobile')),
            Chip(label: Text('Development')),
            Chip(label: Text('UI')),
          ],
        ),
      ),
    );
  }
}

Output:

Flutter Dart Mobile Development UI

🔹 Wrap with Spacing

Control horizontal and vertical spacing: 

Wrap(
  spacing: 16.0,        // Space between items
  runSpacing: 12.0,     // Space between lines
  children: [
    Container(
      width: 80,
      height: 80,
      color: Colors.red,
      child: Center(child: Text('1')),
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.green,
      child: Center(child: Text('2')),
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
      child: Center(child: Text('3')),
    ),
  ],
)

Output:

1
2
3

🔹 Wrap Alignment

Align wrapped content using alignment properties: 

Wrap(
  alignment: WrapAlignment.center,
  spacing: 10.0,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 2'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 3'),
    ),
  ],
)

Output:

🔹 Vertical Wrap

Change direction to vertical for column-based wrapping: 

Wrap(
  direction: Axis.vertical,
  spacing: 8.0,
  runSpacing: 8.0,
  children: [
    Chip(label: Text('Item 1')),
    Chip(label: Text('Item 2')),
    Chip(label: Text('Item 3')),
    Chip(label: Text('Item 4')),
  ],
)

Output:

Item 1 Item 2 Item 3 Item 4

🔹 Practical Example: Tag List

Create a tag list that wraps automatically: 

Wrap(
  spacing: 8.0,
  runSpacing: 8.0,
  children: List.generate(
    10,
    (index) => ActionChip(
      label: Text('Tag ${index + 1}'),
      onPressed: () {
        print('Tag ${index + 1} pressed');
      },
    ),
  ),
)

Output:

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6 Tag 7 Tag 8 Tag 9 Tag 10

🧠 Test Your Knowledge

What happens when Wrap runs out of space?