FittedBox in Flutter

213

FittedBox is a styling widget which is mainly used for positioning and styling of the widget. It scales and positions its child within itself according to fit property. Fit property restrict it’s child widget according to the size limits. It rescale the size of the widget based on the available size.

For example: If a user have to enter a text which is wrap in container but user enter a large string then size of container is increase. But if we wrap the container with FittedBox then it will fit text in available size.

In this tutorial, we will discuss about fittedbox in flutter. Here, we will discuss with example.

Constructor of FittedBox

(new) FittedBox FittedBox({
  Key? key,
  BoxFit fit = BoxFit.contain,
  AlignmentGeometry alignment = Alignment.center,
  Clip clipBehavior = Clip.none,
  Widget? child,
})

Code Implementation

BoxFit.cover

body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 200.0,
                width: 200,
                color: Colors.blueGrey,
                child: FittedBox(
                  fit: BoxFit.cover,

                  child: Image.asset("assets/Images/girl.jpg"),
                ),
              ),
              Container(
                width: 250.0,
                height: 200.0,
                color: Colors.cyan,
                child: const FittedBox(
                  fit: BoxFit.cover,
                  child: Text(
                    "FlutterHope",
                    style:
                        TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
   
   

BoxFit.contain

body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                height: 200.0,
                width: 200,
                color: Colors.blueGrey,
                child: FittedBox(
                  fit: BoxFit.contain,
                  // fit:BoxFit.cover,
                  // fit:BoxFit.fill,
                  // fit:BoxFit.fitHeight,
                  // fit:BoxFit.fitWidth,
                  // fit: BoxFit.none,
                  child: Image.asset("assets/Images/girl.jpg"),
                ),
              ),
              Container(
                width: 250.0,
                height: 200.0,
                color: Colors.cyan,
                child: const FittedBox(
                  fit: BoxFit.contain,
                  child: Text(
                    "FlutterHope",
                    style:
                        TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    

BoxFit.fill

body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                height: 200.0,
                width: 200,
                color: Colors.blueGrey,
                child: FittedBox(
                  fit: BoxFit.fill,
                  child: Image.asset("assets/Images/girl.jpg"),
                ),
              ),
              Container(
                width: 250.0,
                height: 200.0,
                color: Colors.cyan,
                child: const FittedBox(
                  fit: BoxFit.fill,
                  child: Text(
                    "FlutterHope",
                    style:
                        TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    

BoxFit.fitHeight

body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 200.0,
                width: 200,
                color: Colors.blueGrey,
                child: FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Image.asset("assets/Images/girl.jpg"),
                ),
              ),
              Container(
                width: 250.0,
                height: 300.0,
                color: Colors.cyan,
                child: const FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text(
                    "FlutterHope",
                    style:
                        TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
   

BoxFit.fitWidth

body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 200.0,
                width: 200,
                color: Colors.blueGrey,
                child: FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Image.asset("assets/Images/girl.jpg"),
                ),
              ),
              Container(
                width: 250.0,
                height: 300.0,
                color: Colors.cyan,
                child: const FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Text(
                    "FlutterHope",
                    style:
                        TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    

BoxFit.none

body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 200.0,
                width: 200,
                color: Colors.blueGrey,
                child: FittedBox(
                  fit: BoxFit.none,
                  child: Image.asset("assets/Images/girl.jpg"),
                ),
              ),
              Container(
                width: 250.0,
                height: 300.0,
                color: Colors.cyan,
                child: const FittedBox(
                  fit: BoxFit.none,
                  child: Text(
                    "FlutterHope",
                    style:
                        TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/fittedBox

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Leave A Reply

Your email address will not be published.