Flutter Container Widget Example

This article explains you how to use flutter container widget with different attributes in flutter applications. In this flutter container example, We will use all important properties of flutter container widget.

Container is used to change position, color, size of child widgets. We can also decorate child widgets using properties such as border, margin, padding etc. By default container wrap the width and height of given child widget.

We can change background color of screen using flutter container color property. We can also change position of container widget using alignment and FractionalOffset properties.

Using container widget, we can also customize border of widget with help of flutter container border color and flutter container border radius properties. It is also possible to give shadow to widget using flutter container box shadow.

 

Child Property

We can use child property to set any single widget to use as child widget in container widget.

Scaffold(
body: Container(
    child: Center(
        child: Text( “CodingWithDhrumil”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),)
    ),
),
);
 
 
 

Flutter Container Color

As earlier I told that we can change background color using color property in container widget.

Container(
    color: Colors.pinkAccent,
),
 
flutter container
 
 

Flutter Container Alignment

 

Center

If we want to center any child widget then we can use alignment property. Alignment class takes two parameters for x and y. For center we need to use Alignment(0.0,0.0) or Alignment.center.

Container(
    child: new Text(“CodingWithDhrumil”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: Alignment(0.0, 0.0),
),
 
 

Top Left

For top left we have to use Alignment(-1.0,-1.0) or Alignment.topLeft same as center.

Container(
    child: Text(“CodingWithDhrumil”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: Alignment(-1.0, -1.0),
),
 
flutter container
 

Top Center

Container(
    child: Text(“CodingWithDhrumil”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: Alignment(0.0, -1.0),
),
 
 

Top Right

Container(
    child: new Text(“CodingWithDhrumil”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: Alignment(1.0, -1.0),
),
 
 

Center Left

Container(
    child: Text(“CodingWithDhrumil”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: Alignment(-1.0, 0.0),
),
 
 

Center Right

Container(
    child: new Text(“CodingWithDhrumil”, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: Alignment(1.0, 0.0),
),
 
flutter container
 

Bottom Left

Container(
    child: new Text(“CodingWithDhrumil”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: Alignment(-1.0, 1.0),
),
 
 

Bottom Center

Container(
    child: new Text(“CodingWithDhrumil”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: Alignment(0.0, 1.0),
),
 
flutter container
 

Bottom Right

Container(
    child: new Text(“CodingWithDhrumil”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: Alignment(1.0, 1.0),
),
 
 

Fractional Offset

We can also use FractionalOffset class to change position of child widget as alternative to Alignment class. For FractionalOffset class, we can submit values only between 0.0 and 1.0.

Container(
    child: new Text(“CodingWithDhrumil”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
    alignment: FractionalOffset(0.65, 0.65),
),
 
flutter container
 
 

Constraints

We can give width and height of child widget using constraints property in container widget.

Container(
    color: Colors.pinkAccent,
    child: Center(
        child: Text(“CodingWithDhrumil”, style: TextStyle(color: Colors.white), textAlign: TextAlign.center),
    ),
    constraints: BoxConstraints(
        maxHeight: 300.0,
        maxWidth: 200.0,
        minWidth: 150.0,
        minHeight: 150.0
    ),
),
 
flutter container
Container(
    color: Colors.pinkAccent,
    child: Center(
        child: Text(“CodingWithDhrumil”, style: TextStyle(color: Colors.white), textAlign: TextAlign.center),
    ),
    constraints: BoxConstraints.expand(
        width: 500.0,
        height: 500.0,
    ),
),
 
 
 

Flutter Container Margin

 

Margin All

If we want to give same margin to all four sides then we can use EdgeInsets.all () class.

Container(
    margin: EdgeInsets.all(40.0),
    color: Colors.pinkAccent,
),
 
flutter container
 

Margin Only

If we want to give margin only specific side then we can use EdgeInsets.only() class.

Container(
    child: Container(
        color: Colors.pinkAccent,
        margin: EdgeInsets.only(top: 20.0),
    ),
);
 
 

Margin Symmetric

If we want to give margin to horizontal or/and vertical side then we can use EdgeInsets.symmetric() class.

Container(
    child: Container(
        color: Colors.pinkAccent,
        margin: EdgeInsets.symmetric(horizontal: 20.0),
    ),
);
 
 

Margin FromLTRB

We can give different margins to left, top, right and bottom sides using EdgeInsets.fromLTRB() class.

Container(
    child: Container(
        color: Colors.pinkAccent,
        margin: EdgeInsets.fromLTRB(20,15,20,15),
    ),
);
 
 

Flutter Container Padding

We can give padding to all sides of screen using padding property same as margin.

Container(
    padding: EdgeInsets.all(25.0),
    child: Container(
        color: Colors.pinkAccent,
    ),
),
 
 
 

Flutter Container Decoration

decoration property decorates widget behind the child. If we want to decorate widget in front of child then we have to use foregroundDecoration property.

 

Flutter Container Border Color

We can change border color of widget using border property. We can also set width of border of widget.

Container(
    margin: EdgeInsets.all(20),
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 4),
    ),
    child: Text(“CodingWithDhrumil”, style: TextStyle(fontSize: 30)),
),
 
flutter container
 

Flutter Container Border Radius

We can also change border radius type and its value using borderRadius property.

Container(
    margin: EdgeInsets.all(20),
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 4),
        borderRadius: BorderRadius.circular(20),
    ),
    child: Text(“CodingWithDhrumil”, style: TextStyle(fontSize: 30)),
),
 
 

Flutter Container Box Shadow

Using boxShadow property, we can give specific color shadow to child widget.

Container(
    margin: EdgeInsets.all(20),
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.black, width: 4),
        boxShadow: [
            BoxShadow(
                color: Colors.pinkAccent,
                offset: Offset(8.0, 8.0),
            ),
        ],
    ),
    child: Text(“CodingWithDhrumil”, style: TextStyle(fontSize: 30)),
),
 
 
 

Flutter Container Transform

We can rotate the widget in any direction using transform property of container widget.

Container(
    alignment: FractionalOffset(0.25, 0.25),
    child: Container(
        padding: EdgeInsets.all(40.0),
        color: Colors.pinkAccent,
        child: Text(“CodingWithDhrumil”, style: TextStyle(color: Colors.white),),
        transform: Matrix4.rotationZ(0.5)
    ),
),
 
flutter container
 

Leave a Reply