What is a Container in Flutter and how to use it with ease

What is a Container widget in Flutter?

The container in Flutter is a parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background color, etc. It is a widget that combines common painting, positioning, and sizing of the child widgets. It is also a class to store one or more widgets and position them on the screen according to our needs. Generally, it is similar to a box for storing contents. It allows many attributes to the user for decorating its child widgets, such as using margin, which separates the container with other contents. (_{source: https://www.javatpoint.com/})

The Container widget is a basic layout element in the Flutter framework. It is a box that can contain other widgets and can be styled with a variety of visual and positioning properties.

The Container widget does not have a visual representation of its own and is often used as a parent for other widgets that need to be positioned or styled in a specific way. For example, you can use a Container to add padding, margins, or a background colour to a widget, or to position a widget using a BoxDecoration.

In other words, you can use it as a wrap for other widgets and use the advantages of Container properties.

How to position a child in Container in Flutter?

To position a child widget within a Container in Flutter, you can use the alignment property of the Container widget. The alignment property takes an Alignment object that specifies the desired position of the child widget within the Container.

Here is an example of how you can use the alignment property to position a child widget within a Container:

Container(
   alignment: Alignment.bottomCenter,
  // alignment: Alignment.bottomLeft,
  // alignment: Alignment.bottomRight,
  // alignment: Alignment.center,
  // alignment: Alignment.centerLeft,
  // alignment: Alignment.centerRight,
  // alignment: Alignment.topCenter,
  // alignment: Alignment.topLeft,
  // alignment: Alignment.topRight,
),

        Container(
          alignment: Alignment.topRight,
          child: Icon(Icons.favorite, size: 100, color: Colors.red,),
        ),

Instead of writing Alignment.bottomLeft or Alignment.bottomRight you can use -1 to 0 to 1 values (screen size). This way you are more precise in the alignment position. As values you use double. Also, you can use values bigger than 1 or smaller than -1, for example, alignment: Alignment(-1.2, -1.2). Another example: you can use Alignment(0.0, 0.0) to align the child widget at the top left corner of the Container, or Alignment(1.0, 1.0) to align it at the bottom right corner.

Bellow the code you can find a simple image with alignment values.

      Container(
        alignment: Alignment(1.0, -1.0),
        child: Icon(Icons.favorite, size: 100, color: Colors.red,),
      ),

Alignment.bottomCenter, = Alignment(0.0, 1.0),
Alignment.bottomLeft, = Alignment(-1.0, 1.0),
Alignment.bottomRight, = Alignment(1.0, 1.0),
Alignment.center, = Alignment(0.0, 0.0),
Alignment.centerLeft, = Alignment(-1.0, 0.0),
Alignment.centerRight, = Alignment(1.0, 0.0),
Alignment.topCenter, = Alignment(0.0, -1.0),
Alignment.topLeft, = Alignment(-1.0, -1.0),
Alignment.topRight, = Alignment(1.0, -1.0),

What is a Container Child in Flutter?

In the Flutter framework, a Container widget can have a single child widget, which is the widget that is displayed within the Container. The child widget is specified using the child property of the Container widget.

Here is an example of how you can use the child property to specify a child widget for a Container:

Container(
  alignment: Alignment.topRight,
  child: Text ('flutterassets.com',
    style: TextStyle(
      fontSize: 30, 
      color: Colors.black45, 
      fontWeight: FontWeight.w900),),
),

In this example, the Container has a single child widget, a Text widget with the text ‘Hello World’. The Container widget does not have a visual representation of its own and is often used as a parent for other widgets that need to be positioned or styled in a specific way.

It’s worth noting that the Container widget can only have a single child widget. If you need to display multiple widgets within a Container, you can use a widget such as Row, Column, or Stack to lay out the widgets.

How to use width and height in a Container in Flutter?

To specify the width and height of a Container widget in Flutter, you can use the width and height properties of the Container widget. These properties take a double value that represents the desired width and height of the Container, respectively.

Here is an example of how you can use the width and height properties to specify the size of a Container:

Container(
      width: 200,
      height: 100,
      child: Text('Hello World'),
    );

In this example, the Container has a width of 200 pixels and a height of 100 pixels. The child widget, a Text widget with the text ‘Hello World’, will be sized to fit within the Container.

below is another example with an Icon in the Container.

      Container(
          height: 100,
          width: 200,
          color: Colors.green,
          child: Icon(Icons.favorite, color: Colors.red, size: 100,)
      ),

Container full width and height with MediaQuery in Flutter

To make a Container widget take up the full width and height of the screen in Flutter, you can use the MediaQuery class to get the dimensions of the screen and set the width and height properties of the Container accordingly.

Here is an example of how you can use the MediaQuery class to make a Container take up the full width and height of the screen:

In this example, the screen will be green.

      Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.green,
          child: Icon(Icons.favorite, color: Colors.red, size: 100,)
      ),

Or, you can separate MediaQuery from the container.

  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    return Container(
      width: screenSize.width,
      height: screenSize.height,
      color: Colors.yellow,
      child: Text('Hello World'),
    );
  }

In this example, the Container widget has a width and height equal to the width and height of the screen, respectively. The MediaQuery.of(context).size expression gets the dimensions of the screen from the BuildContext and stores them in a Size object.

How to use multiple widgets inside Container in Flutter

To use multiple widgets inside a Container in Flutter, you can use a widget such as Row, Column, or Stack to lay out the widgets within the Container.

Here is an example of how you can use a Row widget to display multiple widgets inside a Container:

Container(
      child: Row(
        children: [
          Text('Hello'),
          Text('World'),
        ],
      ),
    )

In this example, the Container has a single child widget, a Row widget that contains two Text widgets. The Row widget arranges the Text widgets horizontally within the Container.

You can use the Column widget to arrange the widgets vertically, or the Stack widget to overlap the widgets. You can also use a combination of these layout widgets to achieve more complex layouts.

      Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.lightGreenAccent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Icon(Icons.favorite, color: Colors.red, size: 50,),
              Icon(Icons.call, color: Colors.green, size: 50,),
              Icon(Icons.share, color: Colors.blue, size: 50,),
              Icon(Icons.close, color: Colors.red, size: 50,),
            ],
          )
      ),

      Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.lightGreenAccent,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Icon(Icons.favorite, color: Colors.red, size: 50,),
              Icon(Icons.call, color: Colors.green, size: 50,),
              Icon(Icons.share, color: Colors.blue, size: 50,),
              Icon(Icons.close, color: Colors.red, size: 50,),
            ],
          )
      ),

You can wrap any or all of the children in a new Container.

      Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.lightGreenAccent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: 200,
                color: Colors.lightBlueAccent,
                child: Icon(Icons.favorite, color: Colors.red, size: 50,),
              ),
              Icon(Icons.call, color: Colors.green, size: 50,),
              Icon(Icons.share, color: Colors.blue, size: 50,),
              Icon(Icons.close, color: Colors.red, size: 50,),
            ],
          )
      ),

      Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.lightGreenAccent,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: 200,
                color: Colors.lightBlueAccent,
                child: Icon(Icons.favorite, color: Colors.red, size: 50,),
              ),
              Icon(Icons.call, color: Colors.green, size: 50,),
              Icon(Icons.share, color: Colors.blue, size: 50,),
              Icon(Icons.close, color: Colors.red, size: 50,),
            ],
          )
      ),

If you want to read more about Icons here it is: Flutter Basics – How to use Icons in Flutter

How to use background colour in a Container in Flutter

To use a colour property in a Container widget in Flutter, you can use the colour property of the Container widget. The colour property takes a Color object that specifies the colour to use for the background of the Container.

Here is an example of how you can use the color property to set the background colour of a Container:

        Container(
          color: Colors.green,
          child: Text ('flutterassets.com'),
        ),

In this example, the Container has a green background colour. The Color class has a variety of methods for specifying colours, such as fromARGB and fromRGBO.

You can also use the decoration property of the Container widget. The decoration property takes a BoxDecoration object that specifies the visual properties of the Container, including the background colour.

Here is an example of how you can use the decoration property to set the background colour of a Container:

Container(
      decoration: BoxDecoration(
        color: Colors.yellow,
      ),
      child: Text('flutterassets.com'),
    )

In this example, the Container has a yellow background colour. The BoxDecoration class also supports other visual properties, such as borders, border radius, and gradients.

How to use margin in a Container in Flutter

To use a margin in a Container widget in Flutter, you can use the margin property of the Container widget. The margin property takes an EdgeInsets object that specifies the amount of space to add around the Container. Margins are outside Container. This example shows 4 types of margins. Three are commented out. Use one.

      Container(
          margin: const EdgeInsets.all(10.0),
          // margin: const EdgeInsets.only(left: 10.0, top: 20.0),
          // margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
          // margin: const EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 20.0),
          height: 100,
          width: 200,
          color: Colors.green,
          child: Icon(Icons.favorite, color: Colors.red, size: 50,)
      ),

In this example, the Container has a margin of 10 pixels on all sides. The EdgeInsets class has a variety of methods for specifying margins, such as only and symmetric.

It’s worth mentioning that the margin property adds space outside the Container, while the padding property adds space inside the Container.

How to use padding in a Container in Flutter

To use padding in a Container widget in Flutter, you can use the padding property of the Container widget. The padding property takes an EdgeInsets object that specifies the amount of space to add inside the Container. Paddings are inside Container. This example shows 4 types of padding. Three of them are commented out. You can use one.

      Container(
          // padding: const EdgeInsets.all(10.0),
          padding: const EdgeInsets.only(left: 80.0, top: 20.0),
          // padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
          // padding: const EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 20.0),
          height: 100,
          width: 200,
          color: Colors.green,
          child: Icon(Icons.favorite, color: Colors.red, size: 50,)
      ),

In this example, the Container has a padding of 10 pixels on all sides. The EdgeInsets class has a variety of methods for specifying padding, such as only and symmetric.

How to use decoration in a Container in Flutter

To use a decoration in a Container widget in Flutter, you can use the decoration property of the Container widget. The decoration property takes a BoxDecoration object that specifies the visual properties of the Container, such as the background color, border, and border radius.

In simple words, Decoration adds visual enhancement to the container and it uses BoxDecoration to do this.

I am writing a separate post about BoxDecoration because it is a bit bigger topic (here is the link).

      Container(
        width: 200,
        height: 200,
        margin: const EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          color: Colors.lightBlueAccent,
          border: Border.all(
            color: Colors.red,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(20),
        ),
      ),