Container widget in Flutter

The Container widget is one of the most commonly used widgets in Flutter. It is a versatile widget that can be used to customize the appearance and layout of other widgets. In this article, we will discuss in detail how to use the Container widget in Flutter.

What is the Container widget in Flutter?

The Container widget is a fundamental widget in Flutter that provides a rectangular visual element that can be customized with various properties such as color, padding, margin, and decoration. The Container widget is a powerful and flexible widget that can be used to create various layouts and designs.

How to use the Container widget in Flutter

Here are the steps to use the Container widget in Flutter:

Step 1: Import the widget

The first step to use the Container widget is to import it into your Flutter project. You can import the Container widget by adding the following line of code to the top of your Dart file:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

import 'package:flutter/material.dart';

[/dm_code_snippet]

Step 2: Create a widget and specify its properties

Once you have imported the Container widget, you can create an instance of it and specify its properties. The Container widget has many properties that can be used to customize its appearance and layout.

2.1 Setting the color property

One of the most basic properties of the Container widget is the color property. You can use this property to set the background color of the container. For example, to create a container with a red background color, you can use the following code:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

Container(
  color: Colors.red,
)

[/dm_code_snippet]

2.2 Setting the width and height properties

You can use the width and height properties to set the width and height of the container, respectively. For example, to create a container with a width of 100 and a height of 100, you can use the following code:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

Container(
  color: Colors.red,
  width: 100,
  height: 100,
)

[/dm_code_snippet]

2.3 Setting the margin and padding properties

You can use the margin and padding properties to set the margins and padding of the container, respectively. The margin property specifies the space around the container, while the padding property specifies the space between the container’s border and its child widget.

For example, to create a container with a margin of 10 and a padding of 20 on the horizontal axis and 10 on the vertical axis, you can use the following code:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

Container(
  color: Colors.red,
  width: 100,
  height: 100,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
)

[/dm_code_snippet]

2.4 Setting the decoration property

You can use the decoration property to set the decoration of the container. The decoration property takes an instance of the BoxDecoration class, which allows you to set various properties such as the border, border radius, and gradient.

For example, to create a container with a red background color, rounded corners, and a black border, you can use the following code:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

Container(
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(10),
    border: Border.all(color: Colors.black, width: 2),
  ),
)

[/dm_code_snippet]

2.5 Adding child widgets to the Container

Finally, you can add child widgets to the Container widget by using the child property. The child widget will be placed inside the container and can be used to display text, images, or other widgets.

For example, to create a container with a red background color, a child widget that displays the text “Hello World”, and a padding of 20 on the horizontal axis and 10 on the vertical axis, you can use the following code:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

Container(
  color: Colors.red,
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  child: Text("Hello World"),
)

[/dm_code_snippet]

Step 3: Add the widget to your layout

Once you have created a Container widget with the desired properties, you can add it to your layout by using it as a child widget of another widget such as a Row, Column, or Scaffold.

For example, to create a layout with a row of three containers, you can use the following code:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

Row(
  children: [
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
    ),
  ],
)

[/dm_code_snippet]

This will create a row of three containers with a red, green, and blue background color, each with a width and height of 100.

Conclusion

The Container widget is a versatile and powerful widget in Flutter. That can be used to customize the appearance and layout of other widgets. In this article, we discussed how to use the Container widget in Flutter by specifying its properties such as color, width, height, margin, padding, decoration, and child widgets. We also showed how to add the Container widget to a layout by using it as a child widget of another widget. With the knowledge of how to use the Container widget, you can create beautiful and responsive user interfaces in your Flutter app.

You can refer to flutter’s official documentation for detailed information about container widget.

The GitHub repository of the container widget sample app is here.

You can also find information about using layout widgets in Flutter here.