Flutter Wrap Widget Examples

There are many times we need to adjust widths of children widgets to make them fit to a device’s screen size. If we aren’t sure whether to keep display a widget or to put it into a new row, we can use Wrap widget.

Wrap widget shows its children in multiple horizontal or vertical runs. It renders it’s children one at a time and puts the next children to the next row automatically if there is no space left in the current row.

Wrap widget with Chip example

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap Widget'),
      ),
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          color: Colors.orange,
          child: Wrap(
            spacing: 8.0, // gap between adjacent chips
            runSpacing: 4.0, // gap between lines
            children: <Widget>[
              MyChip(label: 'John'),
              MyChip(label: 'Ms. Mya Keebler DDS'),
              MyChip(label: 'Remington Padberg', color: Colors.red),
              MyChip(label: 'Nicola Hahn DDS', color: Colors.lightGreen),
              MyChip(label: 'Modesta Ryan PhD', color: Colors.white),
              MyChip(label: 'Madelynn', color: Colors.red),
              MyChip(label: 'Prof. Chaz Kilback', color: Colors.red),
            ],
          ),
        ),
      ),
    );
  }
}


class MyChip extends StatelessWidget {
  final Color color;
  final String label;

  const MyChip({Key key, this.color, this.label}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Chip(
      avatar: CircleAvatar(backgroundColor: color ?? Colors.blue, child: Text(label[0])),
      label: Text(label),
    );
  }
}

Wrap Widget Properties

  • alignment : Determine whether children should wrap in main axis. Values are WrapAlignment.center, WrapAlignment.end, WrapAlignment.spaceAround, WrapAlignment.spaceBetween, WrapAlignment.spaceEvenly.
  • direction : Determine direction like horizontal for Row and vertical for Column.
  • spacing : Determine space between each item.
  • runSpacing : Determine space between each row like line height.

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close