Wrap widget and Attributes

The Wrap widget in Flutter is used to display its children in multiple rows or columns based on the available space. It automatically wraps its children to the next line when they exceed the width or height of the available space.

Attributes:

1. direction (Axis):

   • The direction in which the children should be laid out. It can be either Axis.horizontal for horizontal wrapping or Axis.vertical for vertical wrapping. The default value is Axis.horizontal.

2. alignment (WrapAlignment):

   • The alignment of the children within the main axis if there is extra space. It can be WrapAlignment.start, WrapAlignment.center, WrapAlignment.end, WrapAlignment.spaceBetween, WrapAlignment.spaceEvenly, or WrapAlignment.spaceAround. The default value is WrapAlignment.start.

3. crossAxisAlignment (WrapCrossAlignment):

   • The alignment of the children within the cross axis. It can be WrapCrossAlignment.start, WrapCrossAlignment.center, or WrapCrossAlignment.end. The default value is WrapCrossAlignment.start.

4. spacing (double):

   • The spacing between adjacent children in the main axis. The default value is 0.0.

5. runSpacing (double):

   • The spacing between adjacent lines of children in the cross axis. The default value is 0.0.

6. textDirection (TextDirection):

   • The text direction to use for rendering the children. It affects the layout order and alignment of children. The default value is TextDirection.ltr.

Example:

import 'package:flutter/material.dart';

class WrapExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap Widget Example'),
      ),
      body: Wrap(
        alignment: WrapAlignment.center,
        spacing: 8.0,
        runSpacing: 4.0,
        children: <Widget>[
          Chip(
            label: Text('Chip 1'),
            backgroundColor: Colors.blue,
          ),
          Chip(
            label: Text('Chip 2'),
            backgroundColor: Colors.green,
          ),
          Chip(
            label: Text('Chip 3'),
            backgroundColor: Colors.red,
          ),
          Chip(
            label: Text('Chip 4'),
            backgroundColor: Colors.orange,
          ),
          Chip(
            label: Text('Chip 5'),
            backgroundColor: Colors.purple,
          ),
          Chip(
            label: Text('Chip 6'),
            backgroundColor: Colors.yellow,
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: WrapExample(),
  ));
}

Explanation:

• In this example, a Wrap widget is used to create a layout that automatically wraps its children to the next line when they exceed the width of the available space.

• The alignment property is set to WrapAlignment.center to align the children at the center of the main axis.

• The spacing property is set to 8.0 to provide spacing between adjacent children in the main axis.

• The runSpacing property is set to 4.0 to provide spacing between adjacent lines of children in the cross axis.

• Inside the Wrap widget, there are multiple Chip widgets representing different items. These chips will be wrapped to the next line if they exceed the width of the available space.