Container Customization In Flutter App

Let’s talk about containers but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into containers, what they really are, their role, and usage in flutter apps. So the first thing that would come to your mind will be, what is a container in the flutter app?

Introduction

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.

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 but 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 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 all 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 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.

Shadows of Container

Let’s now give our container some shadows as well. Shadows is 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, 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 be. 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.

Little Customization of Container

decorated_container

As you can see that, we have done only a little customization, i.e. we have used a parent and child container, giving both of them shadows but the colors of the containers are different. Also, we have given the child container a margin, and the result is in front of you. Code for implementing this is given below:

Container(

          height: 100,

          width: 100,

          decoration: BoxDecoration(

              borderRadius: BorderRadius.only(

                  topRight: Radius.circular(40),

                  bottomLeft: Radius.circular(40)),

              boxShadow: [

                BoxShadow(color: Colors.grey, blurRadius: 7, spreadRadius: 3)

              ],

              color: Colors.blue[400]),

          child: Container(

            margin: EdgeInsets.all(20),

            height: 100,

            width: 100,

            decoration: BoxDecoration(

                borderRadius: BorderRadius.only(

                    topRight: Radius.circular(40),

                    bottomLeft: Radius.circular(40)),

                boxShadow: [

                  BoxShadow(color: Colors.grey, blurRadius: 7, spreadRadius: 3)

                ],

                color: Colors.white),

          ),

        )

You can play with the values of your container and see what outcome is generated from it.

Thanks for reading this article, hope to see you in our next ones as well. Thanks.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.