Wrap Widget Flutter - DevhubSpot

A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, given by direction, leaving spacing space in between. If there is not enough space to fit the child, Wrap creates a new run adjacent to the existing children in the cross-axis.

After all the children have been allocated to runs, the children within the runs are positioned according to the alignment in the main axis and according to the crossAxisAlignment in the cross axis.

Normally when you want to layout multiple widgets horizontally or vertically you can use a row or column.But if there is not enough room the content gets clipped and you get the yellow and black overflow warning. To fix that you can use a Wrap widget instead of a Row.

Constructor of Wrap class:

Wrap({Key key, 
Axis direction, 
WrapAlignment alignment, 
double spacing, 
WrapAlignment runAlignment, 
double runSpacing, 
WrapCrossAlignment crossAxisAlignment, 
TextDirection textDirection, 
VerticalDirection verticalDirection, 
List<Widget> children})

Properties:

• direction: By default, the axis is horizontal but we can make it vertical by changing the axis from Axis.horizontal to Axis.vertical.
• alignment: We can set the alignment property to align widgets. (for ex : alignment: WrapAlignment.center).
• spacing: We can give space between the children.
• runAlignment: It shows how runs themselves should be placed in the cross-axis. By default, we have runAlignment as WrapAlignment.start.
• runSpacing: We can give runSpacing between the runs. (ex: runSpacing:5.0).
• crossAxisAlignment: We can align the children relative to each other in cross Axis.
• textDirection : We can arrange children in a row using textDirection (for ex : textDirection: TextDirection.rtl to arrange from right to left).
• clipBehaviour: This property takes in the Clip enum as the object to decide whether the content inside the Wrap widget will be clipped or not.
• children: The children property takes in a list of widgets as the object to show inside the Wrap widget or below the Wrap widget in the widget tree.
• verticalDirection: This property takes in VerticalDirection enum as the object to. This property decides the order in which each child's widget will be painted on the screen in a vertical sense.
• runtimeType: Type class is the object given to the runtimeType property. It determines the type of the Wrap widget at the run time.
• key: This property decides how one widget will replace another widget on the screen.
• haskCode: This property takes in an int value as the object which represents the state of the widget.

Implementation with Example:

Main.dart

import 'package:counterapp/widgets/WrapWidget.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WrapWidget()
    );
  }
}

WrapWidget.dart

import 'package:flutter/material.dart';

class WrapWidget extends StatefulWidget {
  const WrapWidget({super.key});

  @override
  State<WrapWidget> createState() => _WrapWidgetState();
}

class _WrapWidgetState extends State<WrapWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Wrap(
              spacing: 10.0, // left or right spacing
              runSpacing: 5.0, // top or bottom spacing
              children: List.generate(
                10, (index) => const Chip(
                  avatar: CircleAvatar(
                    backgroundColor: Colors.amberAccent,
                    child: Icon(Icons.person),
                  ),
                  label: Text("Thanks :)"),
                )
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Result: