for a widget you need to add some background color, style or size etc..then just wrap your widget with the Container.

for example, simply we take one widget as Text(“hello”), this widget simply draws the text on screen as hello.

When you wrap with container like Container(, child:Text(“hello”)) now it shows some background color to it. In the same way container has so many properties we discuss here one by one.


The blue color background is nothing but container and we added some padding to the widget. padding means it leave some space in the container, for example if you are giving top padding means top side it leaves the space comes down side.


when your widget wraps with the container, you can use margin to maintain some distance to another widgets.


The decoration property allows to change the border color and and also border radius. And also we can change the shape of the container like


you can align your child widget like left, right or center..


Height & Width:

You can add specific width and height for a container, if you are not giving these values it will takes child width and height by default.


by using gradient property you can add two colors to the container and the color from left to right getting lighter.

gradient: LinearGradient(

begin: Alignment.centerleft,



If you like my article, please clap for me, you can clap 50 times also..

Mobile App Developer and Trainer