Spacer Class In Flutter

Introduction :

Spacer widget is used to create a customized spacing between the widget. It is mainly used to create an adjustable spacing between the widgets in a flex container like Rows and Columns.

Table of contents:

:: Introduction to Spacer class

:: Properties used in Spacer

Spacer class :

Flutter although provides spacing alignments that are already predefined such as spaceAround, spaceEvenlyand spaceBetween but still provides an additional Spacer widget just for adjustable spacing as per their need accordingly. The main advantage of using Spacer is that the spacing provided between the widgets is set according to our requirements.

Properties used in Spacer class :

key: Controls how one widget replaces another widget in the tree.

flex: This property is used to define how much space is required to take up between the widgets. This property creates a space between widgets in form of ratio division. It takes an integer value and its default value is 1.

Sample :

This is how the spacing between the container looks like :

As you can see above the space between the container is equally divided in an equal ratio accordingly.

Now let’s try to understand this widget by taking more examples:

Let’s Start:

Here above the code, we have used flex property with its different-different values inside the Spacer widget. Spacer widget uses flex value 3 between the first two containers and flex value 2 between the second and third container, and value 1 between the third and fourth container while no Spacer widget is used after the fourth container.

This is how it looks ::

In the above example, the flex property is used inside the Spacer widget. The flex value in total is 3 + 2 + 1 = 6 .

Now let’s understand the spacing ratio. The space between the first and second container will be 3/6 of the applied space while the space between the second and the third container will be 2/6 of the space while the flex value between the third and fourth container is 1 so it will be having 1/6 of an applied spacing.

Remember the default value of flex is 1. If the flex property is not used inside the Spacer widget it will automatically set it as its default value.

Note:: The same concept can also be applied to Column as already mentioned above.

For more info visit down the link:

Spacer class
API docs for the Spacer class from the widgets library, for the Dart programming language.api.flutter.dev

Thanks for reading this article ❤

Clap 👏 If this article helps you.

Feel free to post any queries or corrections you think are required…✔

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.