#15 || Exploring Flutter Widgets || Flutter Container Widget & Its Properties

Support : https://paypal.me/ripplescode
In this video I have discussed about Container widget and its different properties.

It is a widget which is used to hold the child widget with the ability to apply some styling properties.
Key points
===========
1. If the container widget does not have a child it will fill up the the given area on screen.

2. If it contains child it will have the same width and height as of its child.

3. It should not be rendered directly on screen without parent widget. We can use Center widget, Padding Widget, Column Widget, Row Widget or Scaffold Widget as parent.

Constructor of Container Widget
================================
Container({
Key key,
Color color,
this.child,
double width,
double height,
this.alignment,
BoxConstraints constraints,
this.margin,
this.padding,
Decoration decoration,
this.foregroundDecoration,
this.transform,})

color Property
==============
Used to assign a color to the container widget. We can use only one property either color or decoration.
Different ways of setting color to the container widget as follows:
// color: Colors.red,
//color:Colors.red[600]
//color:Colors.red.shade600,
//color:Color(0x88888888),[Must use 8 digit. For 6 digit the first 2 digit will be considered as 00 and making the color transparent.]
//color: Color.fromARGB(0xFF, 0x55, 0xA5, 0x43),
//color: Color.fromARGB(255, 68, 75, 98),
color: Color.fromRGBO(68, 100, 98, 255),

child property
===============
Used to assign a child to the container widget

width and height
=================
Used to give width and height to the container.

alignment property
===================
We can use Alignment or FractionalOffset class with this alignment property to align the child widget.
FractionalOffset uses a co-ordinate system where the origin is top left.
Alignment uses a co-ordinate system where the origin is center.
// alignment: Alignment.centerLeft
// alignment: FractionalOffset.centerLeft
constraints property
======================
It is used to specify the size a widget can take up. We can use BoxConstraints in
constraints property.
constraints: BoxConstraints(
maxHeight: 300,
maxWidth: 300,
minHeight: 150,
minWidth: 150
),
If the container does not have any child then it will occupy the maxHeight and maxWidth but if it has child then it will occupy minHeight and minWidth.
If we need to expand our container to the maximum even if it has a child we can use the BoxConstraints.expand().

we can also pass width and height to the expand method.
constraints: BoxConstraints.expand(
width: 500,
height: 400
),

margin property
================
It is used to give space to the surrounding container.
/*margin: EdgeInsets.all(50.0),*/
/*margin: EdgeInsets.symmetric(vertical: 40,horizontal: 60),*/
/*margin: EdgeInsets.only(top: 10,right: 20.0,left: 30.0,bottom: 40.0),*/
/*margin: EdgeInsets.fromLTRB(10.0, 20.0,30.0, 40.0),*/

padding property
===================
It is used to give space inside container.
//padding: EdgeInsets.all(50.0),
// padding: EdgeInsets.symmetric(vertical: 40,horizontal: 60),
//padding: EdgeInsets.only(top: 10,right: 20.0,left: 30.0,bottom: 40.0),
// padding: EdgeInsets.fromLTRB(10.0, 20.0,30.0, 40.0),

decoration property
====================
This property is applied behind the container.
decoration: BoxDecoration(
//color: Colors.green,
shape: BoxShape.circle,gradient: LinearGradient(colors: [Colors.red,Colors.green])
),
decoration: FlutterLogoDecoration(
style: FlutterLogoStyle.stacked,
darkColor: Colors.red,
lightColor: Colors.green
),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))
),
color: Colors.green
),

decoration: UnderlineTabIndicator(
borderSide: BorderSide(width: 1.0,style: BorderStyle.solid,color: Colors.green)
),

foregroundDecoration
==================
Applied infront of the container

Same classes can be used as decoration
transform
==========
Performs a transformation on the container
transform: Matrix4.rotationZ(0.5),

#Container #Flutter #MasteringFlutter