How to implement the Wrap widget in Flutter?

• General

In Flutter, the Wrap widget aligns the widgets in a horizontal and vertical manner. So, in this article, we will see how to implement the Wrap widget in Flutter.

How to implement the Wrap widget in Flutter?

Generally, we use rows and columns to align the widgets. But if we have some widgets which are not able to fit in the Row/Column then it will give us an overflow Message. For example, Right Overflowed by 370 pixels.

Properties of Wrap Widget:

• direction: So the default 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 on the cross axis. So, 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 Clip enum as the object. Also, it decides whether the content inside the Wrap widget will be clipped or not.
• children: The children’s property takes in a list of widgets as the object. It will 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. Also, it 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:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
    title: "Flutter Agency",
    theme: new ThemeData(
      primarySwatch: Colors.blue
    ),
    debugShowCheckedModeBanner: false,
    home: WrapW()
    );
  }
}

class WrapW extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: const Text("Flutter Agency"),
      ),
      body: Wrap(
        // direction: Axis.vertical,
        // alignment: WrapAlignment.center,
        // spacing:8.0,
        // runAlignment:WrapAlignment.center,
        // runSpacing: 8.0,
        // crossAxisAlignment: WrapCrossAlignment.center,
        // textDirection: TextDirection.rtl,
        // verticalDirection: VerticalDirection.up,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
            child: const Center(child: Text("W1",textScaleFactor: 2,))
          ),
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
            child: const Center(child: Text("W2",textScaleFactor: 2,))
          ),
          Container(
            color: Colors.green,
            width: 100,
            height: 100,
            child: const Center(child: Text("W3",textScaleFactor: 2,))
          ),
          Container(
            color: Colors.black,
            width: 100,
            height: 100,
            child: const Center(child: Text("W4",textScaleFactor: 2,))
          ),
          Container(
            color: Colors.orange,
            width: 100,
            height: 100,
            child: const Center(child: Text("W5",textScaleFactor: 2,))
          ),
        ],
      ),
    );
  }
}

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen how to implement the Wrap widget in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter tips & tricks.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.