What is Wrap in Flutter?

Wrap is a layout widget that displays its children in multiple horizontal or vertical runs. When there's not enough space in the current run, it creates a new run. It's perfect for displaying chips, tags, or any collection of items that need to flow like text.

Basic Usage

DARTRead-only

Wrap(
  spacing: 8.0, // gap between adjacent children
  runSpacing: 4.0, // gap between runs (lines)
  children: [
    Chip(label: Text('Flutter')),
    Chip(label: Text('Dart')),
    Chip(label: Text('Widget')),
    Chip(label: Text('Layout')),
    Chip(label: Text('Wrap')),
  ],
)

Wrap(
  spacing: 8.0, // gap between adjacent children
  runSpacing: 4.0, // gap between runs (lines)
  children: [
    Chip(label: Text('Flutter')),
    Chip(label: Text('Dart')),
    Chip(label: Text('Widget')),
    Chip(label: Text('Layout')),
    Chip(label: Text('Wrap')),
  ],
)

Key Properties

direction: Axis.horizontal (default) or Axis.vertical.
alignment: How to align children within a run (e.g., WrapAlignment.start, center, end, spaceBetween).
spacing: Space between children along the main axis.
runAlignment: How to align runs along the cross axis.
runSpacing: Space between runs.
crossAxisAlignment: How to align children within a run in the cross axis (e.g., start, end, center).
textDirection, verticalDirection: Control the order.

Wrap vs Row/Column

Use Row/Column when you have a fixed number of items that should stay in one line. Use Wrap when the number of items can vary and you want them to automatically wrap to the next line.

Common Use Cases

Tags or chips in a blog post.
Keyword lists.
Photo galleries that wrap.
Filter buttons that adapt to screen width.

Key Points to Remember

Wrap automatically moves children to the next line when they don't fit.
Control gaps with spacing and runSpacing.
Align runs with runAlignment.
Wrap is more flexible than Row/Column for dynamic content.

Try it yourself

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Wrap Example')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Wrap(
            spacing: 10,
            runSpacing: 10,
            children: List.generate(15, (index) => Chip(label: Text('Item $index'))),
          ),
        ),
      ),
    );
  }
}

Wrap( spacing: 8.0, // gap between adjacent children runSpacing: 4.0, // gap between runs (lines) children: [ Chip(label: Text('Flutter')), Chip(label: Text('Dart')), Chip(label: Text('Widget')), Chip(label: Text('Layout')), Chip(label: Text('Wrap')), ], )

Try it yourself

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Wrap Example')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Wrap(
            spacing: 10,
            runSpacing: 10,
            children: List.generate(15, (index) => Chip(label: Text('Item $index'))),
          ),
        ),
      ),
    );
  }
}

Flutter Wrap Widget Tutorial for Beginners

Flutter Wrap Widget Tutorial for Beginners

What is Wrap in Flutter?

Basic Usage

Key Properties

Wrap vs Row/Column

Common Use Cases

Key Points to Remember

Try it yourself

Test Your Knowledge

Need help?

Flutter Wrap Widget Tutorial for Beginners

Flutter Wrap Widget Tutorial for Beginners

What is Wrap in Flutter?

Basic Usage

Key Properties

Wrap vs Row/Column

Common Use Cases

Key Points to Remember

Try it yourself

Test Your Knowledge

Need help?