Container Customization In Flutter App

In this Flutter tutorial, we’ll learn the customization of the Flutter container widget. In order to make things more understandable, we’ll explain its customization using practical Flutter code examples.

Introduction: Flutter Container Widget

Just assume it is like a box that would hold things in one place or at a certain limit. Of course, a container is also a widget which means it would have some properties as well. We can customize its shape, color, height, widget, and many other properties.

Let’s now understand its customization with the help of practical Flutter code examples.

Let’s Customize our Container

You can give it height and width by using its height and width constructors.

Scaffold(

      body: Center(

        child:

        Container()

      ),

    )

As you can see here, we have only created a scaffold inside its body, we have used a center widget, which will show its child widget in the center of the screen, and we have defined a container with a center widget as its parent.

transparent_container

But as you can see there is nothing you see on the app screen. Although the container is present you cannot see it because it won’t have any height and width, and also the color of the container is not defined. So let’s do it right away.

Height and Width of Container

Container(
        height: 100,
        width: 100,
      )

This is how you give height and width to a container, but wait we still can’t see a container on our phone screen. Although it is present by default, it won’t have any color so let’s specify it as well.

Container Color

Container(

        height: 100,

        width: 100,

        color: Colors.green,

      ))

sharp_edges_container

Finally, we can see a green block on our screen which is actually a container. Congrats, you have made your container and you did some customization to it as well.

Rounded Corner Container

As we said, we will customize our container, so let’s do it. The corners aren’t looking so good, so why don’t we make them a little rounded, and let’s see if our container looks good with it?

Container Decoration

If we want to decorate the corner then we have to use the decoration constructor of our container which would use the Box Decoration class like this:

 decoration: BoxDecoration(),

We should know one thing this box decoration also has a color constructor itself, so keep in mind that if you are using the box decoration in a container then don’t specify the color like this:

  color: Colors.green,

  decoration: BoxDecoration(),  //error

Instead, use it like this:

 decoration: BoxDecoration(color: Colors.green),  //all good

Now, let’s keep going with making the edges round, for this we would have to use the border-radius constructor like this:

 decoration: BoxDecoration(

          color: Colors.green,

          borderRadius: BorderRadius.circular(20)

        ),

round_edges_container

As you can see, we have used the Border Radius class and called its circular method which takes a double value(can also pass integer) and as you can see now that all the edges are rounded, but what if you want only some of the edges to be round or just a single one. Don’t worry, flutter got your back.

Make Specific Edges Rounded

borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                bottomRight: Radius.circular(40)
                               )

specific_round_edges_container

As you can see, only the top left and bottom right are rounded and with different values, it was possible by using the only method of the border-radius class.

Padding of Container

Our container also has a padding constructor and is used to give a margin from the inside. Let’s understand it with an example given below:

Container(

            height: 100,

            width: 100,

            padding: EdgeInsets.all(20),

            decoration: BoxDecoration(

              color: Colors.green,

            ),

            child: Container(

              height: 100,

              width: 100,

              color: Colors.red,

            ))

As you can see here, we have given a child container to the parent container with the color red. We have given a padding property to the parent container by calling the class EdgeInSets and using its method which means from all four sides. So if you see it now the padding is applied to the container which is inside the container.

Margin of Container

Now let’s talk about the margin of a container. It works the same as padding, the difference is that it gives the margin from outside of the container. Let’s understand it with an example given below:

Container(

            height: 100,

            width: 100,

            decoration: BoxDecoration(

              color: Colors.green,

            ),

            child: Container(
            margin: EdgeInsets.all(20),
              height: 100,

              width: 100,

              color: Colors.red,

            ))

As you can see here, we have given a child container to the parent container with the color red. We have given the margin property to the child container, now as you can see the output is the same as it was shown in the case of padding.

But understand this, the margin is from the outside and padding is from the inside in the case of containers. So as you can see, the margin works in this case, the reason is that you can see that the container red has some margin working on its container which decreases the size of the red container.

Hope you now know how and when to apply the padding and margin to the containers in a flutter.

Shadow of Container

Let’s now give our container some shadows as well. Shadows are an awesome way to make the widget more attractive, of course, it depends on your requirement, whether you want it or not. Let’s now jump right into how to give your container a shadow.

decoration: BoxDecoration(
            boxShadow: [
                      BoxShadow(
                           color: Colors.grey,
                           blurRadius: 10,
                           spreadRadius: 1)
                                ],
          color: Colors.white

    )

So as you can see in the above code, we have used the box-shadow constructor, and as you can see it takes a list and is denoted by square brackets ([]). Moving forward, we have used the box-shadow class as the first item of the list and we have given it a color, and a blur radius, which means, to which extent should it be blurred. You can play with the values to get your desired shadow, also we have given it a spread radius, which is used to make the shadow go to as much extent as we want it to. Let’s see how is it looking after an added shadow:

I know it does not look much attractive, but you can play with the values. Let us play with it as well.

decorated_container

Conclusion

In conclusion, hope you now have a detailed practical understanding of how to properly customize the Flutter container widget. Do leave your valuable feedback in the comment section.

We’d be very delighted to see you pay a visit to our other articles on Flutter app development and Python programming. Thank you for reading this one.