Container Widget In Flutter

Introduction

Hi friends!! In this article, you will learn the most common and frequently used widget in Flutter. The container widget is really good for customization. Using a container widget, we can make a custom button with different shapes, Text with different shapes, etc.

What is Container?

In Flutter, a "Container" is like a layout or box that you can use to hold and arrange other widgets. It's like a frame that you can put around other things. The container can hold only a single child. It could be text, an image, a button, or any other widget. You can customize a container using properties such as its color, padding (space inside the container), margin (space around the container), and more. It helps you control how the widgets inside it are arranged and how they look on the screen.

Basic Syntax

Container(
  // You can set various properties of the Container here
  // For example:
  width: 200,       // Width of the container
  height: 100,      // Height of the container
  color: Colors.blue,  // Background color of the container
  padding: EdgeInsets.all(10),  // Padding inside the container
  margin: EdgeInsets.all(20),   // Margin around the container
  child: YourChildWidget(),  // Widget placed inside the container
)

Let's Make Some Examples,

open your Android Studio or Visual Studio and create a new Flutter project. 

Custom Button Using Container Widget

Example 1

      Container(
      width: 150,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.red,width: 3,),
        borderRadius: BorderRadius.circular(20)
      ),
      child: InkWell(
        onTap: (){
          ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("Button is Clicked")));
        },
        child: Center(
          child: Text(
            "Click Me!!",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold
            ),
          ),
        ),
      ),
    );

Here, I have taken a Container with a height of 50 and a width of 150 and set rounded corners using decoration property. Here, the InkWell widget is used to respond to the touch interactions which means to make the container clickable.

Output

 

Example 2

      Container(
        width: 200,
        height: 50,
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.red, width: 3,),
            borderRadius: BorderRadius.circular(20)
        ),
        child: InkWell(
          onTap: () {
            ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text("Product is added to cart")));
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.shopping_cart),
              SizedBox(width: 10,),
              Text(
                "Add to Cart",
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold
                ),
              ),
            ],
          ),
        ),
      );

This example is also the same as the previous one, but here, we take a Row and add two widgets inside Row. First, we add a shopping cart icon and then add Text Widget. 

Output

 

Example 3

      Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
            gradient: LinearGradient(
            colors: [Color(0xFF43cea2),Color(0xFF004e92)],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            ),
            color: Colors.white,
            shape: BoxShape.circle,
            border: Border.all(color: Colors.red, width: 1,),
        ),
        child: InkWell(
          onTap: () {
            ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text("Continue Button is Clicked")));
          },
          child: Center(
            child: Text(
              "Continue",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Colors.white
              ),
            ),
          ),
        ),
      );

In this example, we are creating a circle custom button using the container. here, we are using the gradient property to add a gradient to the background on the container. 

Output

 

Conclusion

In this article, we have seen how to use the Container widget in Flutter. Thanks for reading, and hope you like it. If you have any suggestions or queries about this article, please share your thoughts. You can read my other articles by clicking here.

Happy learning, friends!