Flutter Container implementation With Various Examples

Flutter Container implementation With Various Examples

Flutter Container is the most used widget. It is similar to div layout if you are familiar with web development. Just like div act as a box in web development, container act as a box in a flutter. It has many properties like margin, border, padding, content in the box that allows you to design it to look beautiful. In this entire tutorial, you will learn the implementation of the flutter container.

Syntax of Flutter Container

Below is the syntax of the container.

Container({Key key,
           AlignmentGeometry alignment, 
           EdgeInsetsGeometry padding, 
           Color color, 
           Decoration decoration, 
           Decoration foregroundDecoration, 
           double width, 
           double height, 
           BoxConstraints constraints, 
           EdgeInsetsGeometry margin, 
           Matrix4 transform, 
           Widget child, 
           Clip clipBehavior: Clip.none});

Explanation of the arguments

alignment: It is used to align the child of the container.

padding: Empty space around the child.

color: Color of the container.

decoration: Its use is to decorate the container, like a shadow, border e..t.c. It is used to paint behind the child.

foregroundDecoration : It is used to paint the front part of the child.

width: Width of the container

height: Height of the container.

constraints: Use it if you want to add an additional condition to the child.

margin: Empty space around the container.

transform: The transformation matrix to apply before painting the container.

child: It is the child of the container.

clipBehavior: The clip behaviour when Container. decoration is not null

These were the arguments you can use inside the container class. The most used arguments are padding, margin, decoration, child, width, height, decoration and color.

In the next section, you will know the various examples of flutter container. And we will use most of the arguments of it.

Examples of Flutter Container

In this section, you will know the various examples of the container. Let’s look at each of them.

Example 1: Create a Simple Container

To create a simple container you have to use the widget Container(). Inside the container, you can add single or multiple child widgets like text, icon, row, columns e.t.c. Below is the code for a simple Container Creation.

Please note that Here I am creating Stateful Widget for the app. But You can also use Stateless Widget.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(ContainerApp());
}

class ContainerApp extends StatefulWidget {

  @override
  _ContainerAppState createState() => _ContainerAppState();
}

class _ContainerAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text("Container App"),
        ),
        body: Center(
          child: Container(
            child: Text("Welcome to Code the Best"),
          ),
        ),
      )
    );
  }
}

Output

Creating a Simple Container with text
Creating a Simple Container with text

Example 2: Add Background Color to the Container

In the above example, you are seeing only text. Let’s add background color and increase the width and height of the Container. You can add a background color using color argument and to increase the size of the container you have to use the width and height argument. The width is automatically adjusted according to the screen.

Below is the code to add color to the container.

Container(
            padding: EdgeInsets.all(20),
            margin: EdgeInsets.all(10),
            height: 100,
            color: Colors.redAccent,
            child: Center(child: Text("Welcome to Code the Best",style: TextStyle(color: Colors.white  ))),
          ),

Output

Adding color to the container in flutter
Adding color to the container in flutter

Example 3: Add Border to the Container

You can add a border to the container using the decoration argument. Inside the decoration, you have to use BoxDecoration() and define the border color and width for the container. But make sure that include color of the container inside the decoration instead of outside, otherwise it leads to error.

Use the below lines of code to add the border to the container.

Container(
            padding: EdgeInsets.all(20),
            margin: EdgeInsets.all(10),
            height: 100,

            child: Center(child: Text("Welcome to Code the Best",style: TextStyle(color: Colors.white  ))),
            decoration: BoxDecoration(
              color: Colors.redAccent,
              border: Border.all(color:Colors.pink,width: 10),
            ),
          ),

Output

Adding border to the container in flutter
Adding border to the container in flutter

Example 4: Add Circular Border to the Container

To add a circular border to the container you have to use borderRadius argument with BorderRadius.circular(your_radius). Below is the code to add a circular border to it.

Container(
            padding: EdgeInsets.all(20),
            margin: EdgeInsets.all(10),
            height: 100,
            
            child: Center(child: Text("Welcome to Code the Best",style: TextStyle(color: Colors.white  ))),
            decoration: BoxDecoration(
              color: Colors.redAccent,
              border: Border.all(color:Colors.pink,width: 10),
              borderRadius: BorderRadius.circular(10)
            ),
          ),

You can see I have added a circular radius of 10 around the corner.

Output

Adding circular border to the container
Adding a circular border to the container

Example 5: Add box shadow to container in flutter

You can also add a shadow around the container. To do so you have to use the boxShadow argument. Use the following lines of code inside the decoration to add a box shadow to the container.

Container(
            padding: EdgeInsets.all(20),
            margin: EdgeInsets.all(10),
            height: 100,
            
            child: Center(child: Text("Welcome to Code the Best",style: TextStyle(color: Colors.white  ))),
            decoration: BoxDecoration(
              color: Colors.redAccent,
              border: Border.all(color:Colors.pink,width: 10),
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  offset: Offset(5,5)

                )
              ]
            ),
          ),

The color and position of the shadow are defined inside the BoxShadow() using color and offset argument. You can also add other things like opacity, blur radius, spread radius. But for more understanding make it simple.

Output

Adding box shadow to the container
Adding box shadow to the container

Conclusion

The Flutter container allows you to design a custom widget for your UI. You can use a container to build a custom style card. These are the examples I have compiled for implementing Container in Flutter. I hope you have liked this tutorial. If you have any query then you can contact us for help.

Code The Best
Hi, I am CodeTheBest. Here you will learn the best coding tutorials on the latest technologies like a flutter, react js, python, Julia, and many more in a single place.