Tut 2 Container || Flutter App Development

If you carefully read Scaffold code then some places you found the Container widget. So now it’s time to study what is the container , why it is so much important and why it is used so much that it present in almost every code of Flutter.

Container:- After reading its name we can assume that it is a bounded (with some height and width ) space in which we can contain something. In Flutter terms Container is a single child widget which provide a space with some height and width which can be used for show images , lists , scrollers etc. Container can take almost every widget inside it. It is a single child means it can take only widget as a child, but this single can be a multichild widget like Row , Column, or Stack which we discuss in next tutorials. For more easy understanding , I am assuming that you all guys are aware about HTML , so in html there is a tag called <div>. which can be use with any shape and size , so same in Flutter for understanding you can say that Container is a <div> of Flutter.

There are different properties of Container Widges which are define below:-


Key key,

AlignmentGeometry alignment,

EdgeInsetsGeometry padding,

Color color,

double width,

double height,

Decoration decoration,

Decoration foregroundDecoration,

BoxConstraints constraints,

Widget child,

Clip clipBehavior


Let’s discuss all the properties one by one

1. height and width:- Height and width properties are very important because these properties fix the size of the container otherwise if you don’t use these properties it will automatically take its parent size. Suppose its parent is Scaffold then it will take the complete screen size automatically because there is a point in flutter that “Every widget tries to take its parent dimensions. “

2. child:- child property is the property which is used to make a child of the Container. Container is a single child widget but can it takes as a child to multichild widgets like Row, Column, Stack etc. which we discuss later.

3. color:- color property is used to give a background color to Container. It takes Colors.colorname. In flutter many colors are already present if you want to use some shade of color then you can use[200]. This [200] represent it shade.

Note:- only black and white colors can not use [] this property in colors. They have fix shade numbers like black54 , black32 etc. same case in white.

4. alignment:- Base class of alignment is AlignmentGeometry. It takes Alignment() widget which takes two argument for dx and dy for alignment in container for its child widget. It value lies between -1 to 1 for both x and y. It is used to align the child widgets of the container widget. You can also use properties like top , bottom , topleft , bottomRight etc.

on the place of Alignment(1,1) to Alignment.bottomRight.

5. padding:- Padding is inside spacing in the Container from the border of the Container. This padding apply on the child of the Container. With the help of padding you can also align child widget but it will not a good approach L. It is just for some spacing. It uses EdgeInsets.all() , .only , .zero etc. are some properties.

6. margin:- Margin property work outside of the border of the container. Margin property works outside of the container so that you have to apply on the child of the container to see the effect.

7. decoration:- decoration property is also contains many properties. As its name suggests decoration property is used to decorate the container. It take BoxDecoration() which many properties like color , border , shodow , gradient etc.

Note:- if you are using decoration then you have to use color property inside container otherwise it will give an error, and it is used behind the child widget of the Container.

BoxDecoration itself contains many properties like color , borderradius , gradient etc. which you can see in below picture.

If above picture you can see that the properties of Boxdecoration.

Some points you have to remember:-

1. if you are using color then there is no benefit of gradient because gradient is also for background color but difference is that gradient mix two or more colors in different directions to look good.

2. If you are using Image then no benefit of color and gradient because image is also on the background of container. You can change height , width , fit ( means how image can fit in the box like BoxFit.cover, contain etc. We will discuss the Image property deep as well in later tutorials.

8. foregroundDecoration:- It also takes BoxDecoration contstructor. The main difference between decoration and foregroundDecoratin is decoration is behind the child of the Container and foregroundDecoration is in front of the child of the container.

5 views0 comments

Related Posts

See All

Tut 5 Column || Flutter App Development

If you already read about Row widget from our previous blog then it will be very easy for you to understand about Column widgets because properties are almost same with Row widget. Column:- Column is

  • Facebook
  • Instagram
  • LinkedIn
  • 1024px-Telegram_logo.svg
  • download
  • YouTube
  • Google Play