Flutter Container : Detailed Introduction

Flutter Container is a fundamental widget in Flutter that provides the basic layout structure for the widgets. It is a lightweight, non-scrollable widget that can hold multiple child widgets and control the padding, margins, and the background color of its child widgets. In this tutorial, we will discuss the basics of the Container widget and learn how to use it effectively.

Creating a Container

Creating a Container in Flutter is easy and straightforward. You can create a Container by simply wrapping the widget inside the Container widget and defining the properties you want.

Here is an example of how to create a simple Container:

Container(
  color: Colors.blue,
  padding: EdgeInsets.all(20),
  child: Text("Hello, World!"),
)

In this example, the Container has a blue background color and a padding of 20 pixels on all sides. The child widget is a Text widget that displays the text “Hello, World!”.

Properties of Container

The Container widget has several properties that can be used to customize its appearance and behavior. Here are the most commonly used properties:

1. color: This property sets the background color of the Container.
2. padding: This property sets the amount of space to add around the child widget. You can set the padding for each side of the Container using the EdgeInsets class.
3. margin: This property sets the amount of space outside of the Container. Like the padding property, you can set the margin for each side of the Container using the EdgeInsets class.
4. decoration: This property allows you to add a border, background image, or gradient to the Container.
5. child: This property holds the widget that is displayed inside the Container.
6. alignment: This property sets the alignment of the child widget inside the Container. The default value is Alignment.center.
7. width and height: These properties set the width and height of the Container. By default, the Container takes up as much space as it needs to fit its child widget.

Example

Here is an example of how to create a Container with a border, a background color, and a rounded corner:

Container(
  width: 200,
  height: 200,
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
  ),
  child: Text(
    "Hello, World!",
    style: TextStyle(
      color: Colors.white,
      fontSize: 20,
    ),
  ),
)

In this example, the Container has a width and height of 200 pixels, a padding of 20 pixels on all sides, and a blue background color. The border has a black color and a width of 2 pixels, and the corners of the Container are rounded with a radius of 20 pixels. The child widget is a Text widget that displays the text “Hello, World!” with white color and a font size of 20 pixels.

Conclusion

The Container widget is a fundamental widget in Flutter that provides the basic layout structure for the widgets