When to use FittedBox Widget in flutter

Hi Guys, Welcome to Proto Coders Point. In this flutter article let’s learn how to fit a widget inside another widget & acquire the available space of it parent widget.

Video Tutorial

To do so we can make use of fittedbox widget of flutter.

Here is what happens when you simply wrap a widget inside another widget in flutter.

Container(
          width: 200,
          height: 200,
          color: Colors.blue,
          child: Center(
               child: Text("Subscribe To Proto Coders Point",style: TextStyle(fontSize: 60),)
            ),
   ),

As you can see in above image, The Text Widget with fontSize: 75 that is wrapped inside a Container is getting cropped and is not responsive & not fitting inside container. To fix this we can make use of FittedBox widget.

Flutter FittedBox Widget Example

Simply wrap the child widget of Container with FittedBox, What FittedBox will do is it will automatically Scales and positions its child within the available space of it parent.

Code Example

Container(
          width: 300,
          height: 200,
          color: Colors.blue,
          child: FittedBox(
              child: Center( 
                        child:  Text("Subscribe To Proto Coders Point",style: TextStyle(fontSize: 60),)
              )
          ),
),

In Above code FittedBox will simply ignore the size given to it’s child, In our case we have Text with fontSize as 60.

Drawback of this is: Suppose In Above Example I give smaller fontsize to Text, Even though it will acquire the complete available fit.

To fix this use fit Property of FittedBox widget Example below:

Container(
          width: 300,
          height: 200,
          color: Colors.blue,
          child: FittedBox(
            fit: BoxFit.scaleDown,
              child: Center(
                        child:  Text("Subscribe To Proto Coders Point",style: TextStyle(fontSize: 10),)
              )
          ),
        )