Widget In Detail : Container
Tags: flutter, widget, container
Published: 2021-08-05 11:23:12

# Container


* 
**Container** , is the most common and popular widget available in Flutter.
* 
You can think a **Container** as a wrapper, which wrap other widgets.
* 
After wrapping your widget around the **Container** you can give a ```color```, ```padding```, ```margin```, etc. 
 For example , 
```
Container(
    margin: const EdgeInsets.all(10.0),
    color: Colors.blue,
    width: 48.0,
    height: 48.0,
)
``` 
* 
Output : 
![empty container.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628150487964/R7l61wBTn.png)

> Its not required to have a child. We can create an empty container too.

- 
Lets discuss all the properties which is provided by the **Container**.


## 1. `child` : 
* 
The child property of a **Container** allows us to place our own widget inside it, so that we can decorate our widget easily . We can place any widget inside the child , for example `Text`, `Row`, `Column` , `Stack` etc.
```
Container(
   child: Text("Hello Container")
)
```
* 
Output :
![Hello Container.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628150391433/RMNnFOhaB.png)


## 2. `alignment` :
* 
The **alignment** property will align the child of the container in 10 different ways.
* 
``topLeft``, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`,  `bottomLeft`, `bottomCenter`, ```bottomRight```

```
Container(
        alignment: Alignment.bottomRight,
        color: Colors.blue,
        width: 150.0,
        height: 100.0,
        child: Text("Hello Container")
)
```
* 
Output :


![align-3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628151420576/KEvEihvvt.png)


## 3. `color` : 
* 
**color** is another most common property of container which is used to give container a background color.
* 
**color** takes color provided by the Colors class. There are mainly two Colors class,
**Material **and **CupertinoColors **class. We can use both of these classes to give color to the Container
* 
```
Container(
        alignment: Alignment.bottomRight,
        color: CupertinoColors.activeGreen, // or Colors.green
        child: Text("Hello Container")
)
```
* 
Output :
![color.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628152039027/tD6ZY8D8m.png)


## 4. `constraints`
* 
With **constraints** property we can tell the **container** to expand to fill a given sizes
* 
**constraints** takes BoxConstraints class as an input. There are many constructor available inside the BoxModel. Some of them are `tightForFinite`, `loose`, `tight`, `tightFor`, etc.
* 
```
Container(
        constraints: BoxConstraints.tightForFinite(width: 200.0,height:100.0), 
        alignment: Alignment.center,
        color: CupertinoColors.activeGreen,
        child: Text("Hello Container")
)
```
* 
Above code will creates a box with constraints that require the given width or height. If no `width` or `height` were given then the constraints will be infinite, it means the box will take all the available space.
* 
Output :
![constraints.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628152952366/rJhaJFIxM.png)
* 
The `loose` constraint is nothing but an axis with a minimum constraint of 0.0. It takes `Size(width,height)` as an input.
```
Container(
        constraints: BoxConstraints.loose(Size(100.0,150.0)),
)
```
* 
![constraints2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628153273504/5UOqvSqB_.png)


> I'll explain more about constraints in some another blog as it is a very broad topic.



## 5. `decoration` :
* 
**decoration** is a very cool property which provides tons of features for our box. Lets explore them.
* 
**decoration** takes `BoxDecoration` class as an input. This class provides variety of ways to draw a box.
* 
Box can have, `border`, `shadow` , `gradients`, `image`, `alignment` etc.

```
Container(
        decoration: BoxDecoration(
          // Note: You can't have a property of "color" inside a container now as you've already defined in the decoration
          color:Colors.purple, 
          borderRadius: BorderRadius.circular(10.0),
          border:Border.all(color: Colors.red),
          boxShadow: [
            BoxShadow(
                      color: Colors.green,
                      blurRadius: 5.0,
                      spreadRadius: 5.0,
               ),
          ]
),
```
* 
![decoration.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628154664090/8Fnl5BtTw.png)

* 
Now there are two more property remaining of BoxDecoration i.e, `gradient` and `image`. Lets see how to use them
* 
```
Container(
        decoration: BoxDecoration(
          image:DecorationImage(image: NetworkImage("flutter-logo.png")),
          border:Border.all(color:Colors.black),
          gradient: LinearGradient(
                 colors: [
                     Colors.pinkAccent,
                     Colors.blueAccent
                 ])
        ),
)
```
* 
![imagedecoration.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628155121221/ygDSTmBJf.png)
* 
`gradient`: There are several types of gradients, represented by the various constructors on this class. 
**LinearGradient**, **SweepGradient**, **RadialGradient**, 

> #### LinearGradient() : 
* `colors`: List of colors
* `begin`:  Offset at which the gradient is placed.
* `end`: Offset at which the gradient stops placed.
* `stops`: A list of values from 0.0 to 1.0 that denote fractions along the gradient
* Example : as explained above

> #### RadialGradient() :
* Same as LinearGradient, But this also takes properties like `radius`, `focal`, `tileMode`, 
* `colors`: List of colors
* `stops`: A list of values from 0.0 to 1.0 that denote fractions along the gradient.
* `focal`:  The focal point of the gradient. If specified, the gradient will appear to be focused along the vector from center to focal.
* `focalRadius`: The radius of the focal point of gradient.
* `radius`: The radius of the gradient
* Example : 
``` 
Container(
        decoration: BoxDecoration(
          border: Border.all(color:Colors.black),
          gradient: RadialGradient(
            colors: [Colors.green, Colors.blue, Colors.orange, Colors.pink],
            stops: [0.2, 0.5, 0.7, 1],
            focal: Alignment(-0.1, 0.2),
            focalRadius: 1,
            radius: 0.1
        ),
),
```
* 
![radialg.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628156212520/-YHqZL0a8.png)

> #### SweepGradient() :
* Similar to Linear and Radial Gradient, however takes two different properties i.e, `startAngle`, `endAngle`
*  `startAngle`: The angle in radians at which stop 0.0 of the gradient is placed.
* `endAngle`: The angle in radians at which stop 1.0 of the gradient is placed.
* Example :
```
Container(
        decoration: BoxDecoration(
        border: Border.all(color:Colors.black),
        gradient: SweepGradient(
        colors: [Colors.blue, Colors.green, Colors.yellow, Colors.red, Colors.blue],
        stops: [0.0, 0.25, 0.5, 0.75, 1],
             ),
        ),
)
```
![sweep.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628156803043/t65h6V7pv.png)
* After applying `tartAngle` and `endAngle`
* 
![sweep2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628156896114/w1rjfP1Jl.png)

### 6. `margin`:
* Margin is used to create space around widget
```
Container(
        color:Colors.teal,
        alignment: Alignment.center,
        width: 150.0,
        height: 100.0,
        margin: EdgeInsets.only(left:10.0)
)
```

### 7. `padding`:
* Padding is used to create space from inside of widget
```
Container(
        color:Colors.teal,
        alignment: Alignment.center,
        width: 150.0,
        height: 100.0,
        padding: EdgeInsets.all(10.0)
)
```
* 
* 
`margin` and `padding` takes `EdgeInsets` class as an input. 
* 
The `EdgeInsets` has many constructor which is helpful to give margin/padding from different sides, some of them are:
* `EdgeInsets.all()`: To gives space from all the sides.
* `EdgeInsets.only()`: To give space from perticular side i.e `left`, `right`, `top`, `bottom`.
* `EdgeInsets.symmetric()`: To give space `horizontally` and `vertically`


### 8. `transform`:
* This is another a cool property, which helps us to apply matrix transformation to paint our container/box as we wanted
* **transform** takes `Matrix4` class, which has many useful constructor like, `rotationX()`, `rotationY()`, `rotationZ()`, `skew()`, `translation()`, etc
* Example :
* 
```
Container(
        transform: Matrix4.rotationZ(0.1),
        width:250.0,
        height:150.0,
        color:Colors.teal,
        child:Center(
        child:Text("Hello Container")
        )
)
```
* Output : 
* 
![transform.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628158585678/3Ec6m4mXn.png)
- Similarly you can apply `rotationX()`, `rotationY()`, `rotationZ()`, `skew()`, `translation()` properties to see cool changes


###  9. `foregroundDecoration`:
* This property will decorate the box from in front of the child. 
* The `decoration` property decorates/paints the box from behind the child. 
* Lets understand what do I meant by painting from the front of the child
* If we take same snippet used in the `decoration` example , but instead of the `decoration` I'm putting `foregroundDecoration`.
```
Container(
        foregroundDecoration: BoxDecoration(
         color:Colors.purple, 
          borderRadius: BorderRadius.circular(10.0),
          border:Border.all(color: Colors.red),
          boxShadow: [
            BoxShadow(
                      color: Colors.green,
                      blurRadius: 5.0,
                      spreadRadius: 5.0,
               ),
          ]
      ),
    child : //....
),
```
* Output :
* 
![foregrounddecoration.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628159120897/P8nBmkenQ.png)
- As we can see the `Text` is not visible. It is because the `foregroundDecoration` has painted the whole thing in-front of our child widget.


----------------------------

#### That's It. That's all you need to know about the **Container**. 
#### I hope you understood all the properties that are available in the Container widget.