Container Customization In Flutter App

flutter containers

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. The source code will also be provided.

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,

            ))

padding_of_container

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,

            ))

padding_of_container

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:

container_shadow

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

Custom Container Source Code

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. The 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.

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.

27 thoughts on “Container Customization In Flutter App”

  1. Pingback: Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language - Let Me Flutter

  2. Pingback: Flutter App Stack Widget Detailed Explanation With Example - Let Me Flutter

  3. Pingback: Textfield In Flutter App Detailed Explanation With Example - Let Me Flutter

  4. Pingback: Beautiful Grid View Builder In Flutter App- - Let Me Flutter

  5. Pingback: Flutter Glassmorphism Login UI Template - Let Me Flutter

  6. Pingback: How To Use Columns In Flutter Apps – Let Me Flutter

  7. Pingback: How To Use Rows In Flutter Apps – Let Me Flutter

  8. Pingback: Neumorphic Effect In Flutter App Container Widget – Let Me Flutter

  9. Pingback: How To Use Animated Container In Flutter? Explained With Example – Let Me Flutter

  10. Pingback: Instagram News Feed UI In Flutter-Beautiful Flutter Design-Flutter Instagram Template Part 1 – Let Me Flutter

  11. Pingback: Signup Flutter Form UI Design-Beautiful Flutter UI Template – Let Me Flutter

  12. Pingback: Signup Flutter Form UI Design 2022-Beautiful Flutter UI Template – Let Me Flutter

  13. Aԝ, this wаs ɑ reɑlly good post. Taking the time and actual effort to make a great article… but whаt can I say… I pսt things off a
    whole lot and never manage tо get neɑrly
    anything done.

  14. Pingback: Flutter Carousel Slider Beautiful Customization With Example - Let Me Flutter

  15. Pingback: Flutter Range Slider Beautiful Customization With Example | Syncfusion - Let Me Flutter

  16. Pingback: How To Implement Flutter ListView Horizontal - Let Me Flutter

  17. Pingback: How To Implement Flutter ListView Builder Horizontal - Let Me Flutter

  18. Pingback: How To Easily Use Flutter RaisedButton Icon - Let Me Flutter

  19. Pingback: How To Easily Set Flutter Container Full Width - Let Me Flutter

  20. Pingback: How To Easily Change Flutter Container Size - Let Me Flutter

  21. Pingback: How To Easily Customize Flutter Container Shadow - Let Me Flutter

  22. Pingback: How To Easily Change Flutter Container Border Radius - Let Me Flutter

  23. Pingback: How To Easily Change Flutter Container Color - Let Me Flutter

  24. Pingback: How To Easily Add Flutter Container Background Image - Let Me Flutter

  25. Pingback: How To Easily Customize Flutter Container Margin - Let Me Flutter

  26. Pingback: How To Properly Use Flutter Visibility Widget - Let Me Flutter

Leave a Comment

Your email address will not be published.