Flutter Widgets (Boxes Part-2) The Whole Picture
Number 10 is afraid of Number 7, do you know why? you might have to read my story to know the answer. 7 is my lucky number and this is my seventh story on medium, so let’s get on with it.
Welcome back to the 2nd part of my story on Flutter Boxes. We are going to discuss another 5 types of Box widgets in Flutter. FittedBox, LimitedBox, PlaceHolder, RotatedBox and DecoratedBox. I would like to add 1 more widget to the list the Spacer, though it doesn’t end with a box as its suffix but falls in the same category. Let us start with FittedBox first.
FittedBox
Fitted Box is used to scale and position its child within itself according to its fit property. If you want to lay or adjust a widget that you feel it is out of place according to the widgets on the screen, a Fitted box comes in handy to scale and position in its proper place.
--------------------------- Constructor ----------------------
FittedBox(
fit: BoxFit.contain, // default fit property
alignment: Alignment.center, // default alignment
clipBehavior: Clip.hardEdge,
child: )There are seven different fit properties, BoxFit.Contain which is the default property then BoxFit.cover, BoxFit.fill, BoxFit.fitHeight, BoxFit.fitWidth, BoxFit.none and BoxFit.scaleDown which same as none or contain. We will see examples of all to see how it affects its child differently.
BoxFit.contain:- It sets its child to be as large as possible, while still containing the child within the bounds of the parent widget.
BoxFit.cover:- It sets its child to be as small as possible, while still covering the child within the bounds of the parent widget.
BoxFit.fill:- The child fills the parent box while also distorting the aspect ratio of the child.
BoxFit.fitHeight:- It makes sure that the child takes the full height of the parent, and lets the child overflow inside the parent widget horizontally, while still maintaining the aspect ratio.
BoxFit.fitWidth:- It makes sure that the child takes the full width of the parent, and lets the child overflow inside the parent widget vertically, while still maintaining the aspect ratio.
Boxfit.none:- It aligns the child inside the parent centring it by default and discards any portion that lies outside the bounds of the parent widget.
Boxfit.scaleDown:- Similar to none, it ensures to scale the down the child and fit in inside the parent widget. This is same as contain as it shrinks the child to fit inside the parent widget.
Limited Box
A box that limits the size of its child widget in an unbounded environment. Any widget that tries to be as big as the parent allows it to be, Limited Box limits the size of that widget’s unconstrained width, height or both to its maxWidth and maxHeight property. It works really great with ListView since ListView has the unconstrained height you will not see anything on the screen when you build it. If you wrap the child widget of ListView with a Limited Box then the size is constrained and you will get a successful build. Let’s look at its constructor and some code to understand it.
---------------------------- Constructor -------------------------
LimitedBox(
maxHeight: double.infinity, // default height
maxWidth: double.infinity, // default width
child: Container(),
)
------------------------------ Sample Code -------------------------ListView(
children: [
for (var i = 0; i < 10; i++)
LimitedBox(
maxHeight: 100,
maxWidth: 150,
child: Container(
color: RandomColor().getColor(),
),
)
],
),
This the representation of the above sample code, if you try to build this without the Limited Box widget, you will not see anything on the screen. Try it out you will the difference…
PlaceHolder
It is a widget that draws an empty box with a big “X” inside it, to indicate that the developer has reserved this space for a widget that will be replaced in future. It is very useful when your application is still in development mode and you haven't decided which widget is appropriate in that particular space, so you are holding or reserving that space by using a PlaceHolder widget. By default, it will size itself according to the unbounded space available until it has been replaced with an actual widget.
-------------------- Default construtor & Values ---------------
Placeholder(
color: = const Color(0xFF455A64), // Blue Grey 700
strokeWidth: = 2.0,
fallbackWidth: = 400.0,
fallbackHeight: = 400.0,
)
-------------------------- Sample Code --------------------------
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
color: Colors.lightBlueAccent,
height: 200,
width: 300,
),
Placeholder(
strokeWidth: 3.0,
color: Colors.pink,
fallbackHeight: 200,
fallbackWidth: 300,
),
Container(
color: Colors.lightGreen,
height: 200,
width: 300,
),
],
),
As you can see in the image on the left the big box with an ‘x’ in the middle, that is a PlaceHolder widget, there are two Containers above and below that PlaceHolder, a reserved place for another Container or any other widget.
Rotated Box
Well as the name suggests, it rotates any widget by an Integer number of quarter turns. The only required property is quarterTurns. It is very similar to Transform.rotate but much simpler. Bypassing in quarter turns which is basically number 1, 2, and 3 it will rotate the widget clockwise by a quarter. If you are looking for something more inclined then use Transform.rotate. There is nothing more than that to it.
----------------------- Constructor -----------------------
RotatedBox(
quarterTurns: 1, // @required
child: ,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.center,
color: Colors.lightBlueAccent,
height: 200,
width: 200,
child: RotatedBox(
quarterTurns: 1,
child: Text(
'Rotated by a quarter',
style: TextStyle(fontSize: 18, color: Colors.pink),
)),),
Container(
alignment: Alignment.center,
color: Colors.pinkAccent,
height: 200,
width: 200,
child: RotatedBox(
quarterTurns: 2,
child: Text(
'Rotated by 2 quarter',
style: TextStyle(fontSize: 18, color: Colors.white),
)),),
Container(
alignment: Alignment.center,
color: Colors.limeAccent,
height: 200,
width: 200,
child: RotatedBox(
quarterTurns: 3,
child: Text(
'Rotated by 3 quarter',
style: TextStyle(fontSize: 18, color: Colors.blueAccent),
)),),
],),Decorated Box
We have already seen decoration property in the Container widget, well this is exactly the same thing but as an Independent widget to decorate any other widget without the Container.
DecoratedBox(
decoration: BoxDecoration(), // @required
position: DecorationPosition.background, // default
child: , // any widget
)You can check my story on the Container widget where I have discussed in detail about the decoration property. The position property in Decorated Box has two options (1) DecorationPosition.background and (2) DecorationPosition.foreground, again it is exactly same as foreground decoration property in the Container widget so no point in writing about it all over again.
Spacer
It is used to create space between widget, normally used with Row or Column though it has MainAxisAlignment property which divides space among its children, but sometimes we need extra space between two widgets or customize it according to our UI then Spacer with its only property known as flex ( very similar behaviour to Expanded widget property flex ) does the trick.
Spacer(
flex: 1, // default is 1
),Now I think is the right time to give you the answer to the question I asked when I started this story.
Seven (ate) Eight Nine.
We have come to the end of our second part, I will see you next week with some new experiments on Flutter widgets. I did get a comment to write on TabBar view, but I was thinking to start writing on Buttons, let’s see…
You know what! you can clap 50 times, I mean 50 times for 1 story, well I do not want to be greedy so I think I will have a high 5, you know what I mean, wink! wink!. Well if you liked it and learnt something new share it with your friends and family and clap for me. Leaving links to previous stories and also to my social channels, follow me to stay updated. Thank you!
SafeArea Widget, Expanded & Flexible, Container Widget, Row and Column, Stack & Positioned, Boxes Part-1.
Care to follow me … on Instagram, Twitter, Linkedin, Reddit.
You can always support by buying a Cup of Coffee ☕️ for me.
