How To Easily Use Flutter Wrap Widget - Flutter Example Code

In this Flutter post, we will practically look into how to use Flutter wrap widget in Flutter apps. The role and usage of Flutter wrap widget will be discussed using a practical Flutter example for better understanding. After reading this post, I am sure you will easily be able to make use of Flutter wrap widget in your own Flutter apps.

So let’s not wait anymore and get right into its implementation phase.

What is Flutter Wrap Widget?

Let’s say we have a list of Flutter containers in our row widget. These containers have some height, width with each container having a different color. You will see that some of the containers will be seen and at the right border of screen you will see an overflow. This means that the screen width is not quite enough to show all the containers.

Flutter wrap widget will print the containers in the next line, therefore removing the overflow problem.

We will be practically implementing the same example. First we will see what will happen if we don’t use Flutter wrap widget but still want to see many containers or any other widget in our screen. Then we will practically implement Flutter wrap widget.

Implementing Flutter Wrap Widget (Example)

Let’s first see what happen when we don’t use Flutter wrap widget. See below example.

Not Using Flutter Wrap Widget

Let’s implement a Flutter row widget and give it a list of Flutter container widgets. See below code:

Row(
      children: [
        Container(height: 100, width: 100, color: Colors.red),
        Container(height: 100, width: 100, color: Colors.green),
        Container(height: 100, width: 100, color: Colors.blue),
        Container(height: 100, width: 100, color: Colors.purple),
        Container(height: 100, width: 100, color: Colors.pink),
      ],
    )

You can see that it is showing a pixel overflow on the right. Let’s now see how to remove it.

Using Flutter Wrap Widget

We will replace the row widget with a wrap widget. See below code:

Wrap(
        children: [
      // use same list of containers that are mentioned above
 ])

You can see that the containers that were created an overflow of pixels are shown in the next line. This is due to the Flutter wrap widget.

Flutter Wrap Widget Constructors

Let’s now see how we can customize the Flutter wrap widget.

Children Constructor

Wrap( children: [] )

Wrap widget has a children constructor which takes a list of widgets. You can pass any widget you want. We have passed container widgets to it which can be seen in the above code.

Alignment Constructor

It is used to align the children of wrap widget. By default, it is set to left aligned so we don’t need to implement that. See below alignments.

Wrap Alignment End

alignment: WrapAlignment.end

You can see that the alignment of wrap children is now end/right. Flutter wrap widget don’t have any width. Let’s wrap it with a Flutter sizedbox and give it a phone width width by using doube.infinity. See below:

SizedBox(
        width: double.infinity,
        child: Wrap(
          alignment: WrapAlignment.end,children:[]))

Now you can see that it is properly aligned to end.

Wrap Alignment Center

  alignment: WrapAlignment.center

It aligns all the children of wrap widget to center.

Wrap Alignment Space Around

alignment: WrapAlignment.spaceAround

You can see that the space between the containers are a bit larger than the space between containers and screen borders.

Wrap Alignment Space Between

alignment: WrapAlignment.spaceBetween

You can see that there is only space between the containers, not between containers and screen border.

Wrap Alignment Space Evenly

alignment: WrapAlignment.spaceEvenly

Equal space between containers and between containers and border can be seen if we use the space evenly wrap alignment.

Spacing Constructor

spacing: 20

flutter wrap spacing

It is used to given horizontal spacing between the children of wrap widget and can be seen in the above image.

Run Spacing Constructor

runSpacing: 20

It is used to give vertical spacing between the children of wrap widget. You can see it in the above image.

So this is how you can easily use and customize Flutter wrap widget in your own Flutter apps.

I have a task for you. I want you to customize the constructors that are left and share your experience here. Also, if you have any questions related to the customization of Flutter wrap widget then do let me know in the comment section. I would really be happy to answer all.

Below is the complete source code of the above implemented Flutter wrap widget.

Flutter Wrap Widget Implementation Source Code

flutter wrap widget

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Padding(
      padding: EdgeInsets.only(top: 100),
      child: SizedBox(
        width: double.infinity,
        child: Wrap(
          alignment: WrapAlignment.center,
          spacing: 10,
          runSpacing: 10,
          children: [
            Container(
              height: 100,
              width: 100,
              color: Colors.red,
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.green,
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.blue,
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.purple,
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.pink,
            )
          ],
        ),
      ),
    )));
  }
}

Conclusion

As a conclusion of this Flutter post, hope you now completely understand how to use and customize Flutter wrap widget. I would love to have your feedback on this post. Thanks for reading this Flutter post.

How To Easily Use Flutter Wrap Widget – Flutter Example Code