You might be wondering why I have mentioned “The Container”? Since I started developing in Flutter, I found the Container widget pretty commonly used by all developers to decorate or let’s say beautify their other widgets. I have gone through many tutorials and read many articles while I was learning Flutter development, and Container widget always popped up almost everywhere. so what is a Container Widget let’s get into its details…
What is a Container Widget?
A Container Widget is used to style, decorate, position, add margins, add padding, add shape, sizing and a lot more, to other widgets wrapped inside a Container widget.
let’s look at all of its properties at a glance then we will go into details …
Container(
child: Text(''), // @required any widgetalignment:
Alignment.center, // for the alignment of the child widget.( There are total 9 alignment options)padding: EdgeInsets.all(10.0), // padding or add space around the child widget but inside the Container.margin: EdgeInsets.all(10.0), // adding space around but outside the Container widget between the parent and the Container.color: Colors.pink, // adding color to the whole Container widget.decoration: BoxDecoration(), // or ShapeDecoration(), as the word suggest to decorate in and around the widget.foregroundDecoration: BoxDecoration(), // decoration will added above the Container Widget.width: 100.0, // to give fixed size in width, to be used with alignment propertyheight: 100.0, // to give fixed size in height, to be used with alignment propertyconstraints: BoxConstraints(), // use either this or above width and heighttransform: Matrix4.rotationX(10.0), // to rotate the Container widget for styling.
),
This article is going to be lengthy, so respectfully bear with me and read till the end.
I will try and break it down for you, all the properties that I just posted above to understand better what other options are available in each property, some of the properties have more than 1 option available which is great, you can experiment as much as you want and design your own best-looking widget.
let’s start with…
Alignment. You will want to use this as the name suggest, align your child widget. There are a total of 9 options available if you type alignment: Alignment. after the full stop, you will get these options : (1) center, (2) centerLeft, (3) centerRight, (4) topRight, (5) topCenter, (6) topLeft, (7) bottomLeft, (8) bottomCenter, (9) bottomRight. Accordingly, your child widget will be aligned inside the Container widget depending on the side of the Container widget.
tip: when alignment property is added, you will have to add width and height or use constraints property, otherwise the Container will fill the entire space available to it on the screen (if it is not wrapped inside another widget such a Row or a Column).
Margin and Padding are pretty common widgets, it is basically used to add some space around. The padding adds space on the inside and Margin add on the outside. The image below will explain it.
Container(
child: Container(
color: Colors.lightGreenAccent,
padding: EdgeInsets.all(50),
margin: EdgeInsets.all(100),
child: Text(
'Padding',
style: TextStyle(color: Colors.black, fontSize: 22.0),
),
),
color: Colors.purple,
width: double.infinity,
height: 400.0,
// alignment: Alignment.center,
),The above code is in reference to the image above, I have highlighted the padding and margin property, you will notice that the child Container is adding padding inside and pushing the text away from the edges. The margin property is adding space around the child Container which is coloured in light green accent. Padding and Margin have 4 different options which are commonly used in Flutter.
1) padding: EdgeInsets.all(50.0),
2) padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
3) padding: EdgeInsets.only(), // choose from left,right,top,bottom
4) padding: EdgeInsets.fromLTRB(10,5,30,6), // different padding for all sides.1) margin: EdgeInsets.all(50.0),
2) margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
3) margin: EdgeInsets.only(), // choose from left,right,top,bottom
4) margin: EdgeInsets.fromLTRB(10,5,30,6), // different margin for all sides.
now let’s discuss in detail about the decoration property…
Decoration property in the Container is what actually gives styling to the Container. There are two widgets that can be used with decoration property that the BoxDecoration() or ShapeDecoration. Both have very similar properties but with little difference to it.
decoration: BoxDecoration(
color: Colors.purple,
// shape: BoxShape.circle, // if you want circle, default is rectangle
gradient: LinearGradient(
colors: [Colors.pink, Colors.lightBlueAccent],
begin: Alignment.bottomLeft,
end: Alignment.topRight), // adds border around the container
border: Border.all(
color: Colors.lightGreenAccent,
width: 6.0,
style: BorderStyle.solid,
),// adds rounded curve around the corners
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),// adds shadow behind the container
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 15.0,
spreadRadius: 3.0,
offset: Offset(10.0, 10.0),
),
],
),
the above code will result in the image below…
tip: if you are adding color property inside decoration then remove it from the Container, otherwise it will throw an error, secondly either use gradient or color inside decoraion either one will work but not together.
now let’s see how decoration property works with ShapeDecoration?
decoration: ShapeDecoration(
color: Colors.pink,
shape: CircleBorder( // shape is required
side: BorderSide(
color: Colors.blueAccent,
width: 6.0,
style: BorderStyle.solid,
),
),
OR
/*shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
side: BorderSide(
color: Colors.blueAccent,
width: 6.0,
style: BorderStyle.solid,
),
),*/
OR
/*shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
side: BorderSide(
color: Colors.blueAccent,
width: 6.0,
style: BorderStyle.solid,
),
),*/
OR
/*shape: ContinuousRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
side: BorderSide(
color: Colors.blueAccent,
width: 6.0,
style: BorderStyle.solid,
),
),*/// here it is shadows and BoxShadow is in BoxDecorations
shadows: [
BoxShadow(
color: Colors.grey,
blurRadius: 15.0,
spreadRadius: 3.0,
offset: Offset(10.0, 10.0),
),
],
),
),
This is the result of the above code…
As you compare BoxDecoration and ShapeDecoration code, most of the properties are the same, such as colour, border, borderRadius, boxShadow, gradient. The difference is in ShapeDecoration, shape property is required. You can replicate the same with BoxDecoration as well but it is better to use ShapeDecoration if you want something other than a rectangle. There are other options available in the shape property, I have commented those out for reference, you are free to try it out yourself. You can just copy-paste the code any software that your use for Flutter development and experiment with it.
The BoxDecoration and ShapeDecoration widgets can also be used with foregroundDecoration property of the Container widget, the difference between the decoration and foregroundDecoration, the latter one is used for styling above the Container widget and it will hide everything behind it, eg: if you have a Text widget as your child inside the Container, the Text widget will not be visible if you use foregroundDecoration.
I hope you learned something new from my article and if you did do clap for me as many times as possible and share this article with your friends & family on what ever social media you are on, encouraging me learn, read and then write. You can always support by buying a Cup of Coffee ☕️ for me. If you have any suggestions please do leave comments below. Thank you very much for reading till the end.
Reference to my previous articles :
