What is the FittedBox widget in Flutter?

• Flutter
• Flutter Widget Guide

Flutter is all about widgets. Many widgets are used for the positioning and styling of text. So, in this article, we’ll see what is the FittedBox widget in Flutter.

What is the FittedBox widget in Flutter?

FittedBox is a very useful widget that scales and positions its child within itself according to fit and alignment. Let’s consider an app, in which, you have to take input from the user. Also in a certain scenario, the user enters a large input that overflows and scatters other widgets.  Many of the widgets in Flutter are dynamic. That means they can grow and shrink in size, according to their child widget’s size. So, in this case, the user interface wouldn’t be adaptive. In order to overcome this problem, we can use the FittedBox widget.

FittedBox restricts its child widgets from growing their size beyond a certain limit. It re-sizes them according to the size available. For instance, if the text is displayed inside a container and the user enters the text. If the user enters a large string of text, then the container would grow beyond its allocated size. But, if we wrap it with FittedBox, then it would fit the text according to the size available. For a large string, it would shrink its size, hence would fit in the container.

Constructor:

Syntax:

FittedBox({
    Key key,
    BoxFit fit: BoxFit.contain,
    AlignmentGeometry alignment: Alignment.center,
    Widget child
  }
)

Properties:

fit: This property is of type BoxFit. It is used to describe how a box is inscribed in another box. It caters to sizing semantics. Now, we’ll see its properties:

• contain: Using this property, we contain the source entirely in the target box, no matter how large it may be.
• cover: It makes the source as small as possible, while still covering the entire target box.
• fill:  It fills the entire target box, impacting the source’s aspect ratio.
• fitHeight: It ensures that the full height of the source is shown, even if it overflows the target box horizontally.
• fitWidth: It ensures that the full width of the source is shown, even if it overflows the target box vertically.
• none: It aligns the source inside the target box and removes any extra portions from the source, if any, as it doesn’t resize the image.

alignment: This property aligns the child widget in FittedBox. Various attributes for this property are bottomCenter, bottomLeft, bottomRight, center, centerLeft, centerRight, topCenter, topLeft, topRight. As the name suggests, the child widget aligns according to one of these properties. You can also assign position co-ordinates to align the widgets.

child: This is the required property in FittedBox. The widget which we want to wrap in FittedBox is assigned as a child to FittedBox. It only takes one child widget. Any widget that displays something on-screen, most preferably text, can be wrapped with FittedBox.

Example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
    return MaterialApp(
     home: Scaffold(
      appBar: AppBar(
       title: Text('Flutter Agency'),
       backgroundColor: Colors.blue,
      ),
      body: Container(
       alignment: Alignment.center,
        child: Column(
         children: [
          SizedBox(height: 10),

          // Without FittedBox

          Container(
           decoration: BoxDecoration(
            border: Border.all(width: 2,
             color: Colors.blue
             )
            ),
            child: Text('FittedBox example'),
            width: 80,
            height: 20,
          ),

          SizedBox(
           height: 12,
          ),

          // With FittedBox

          Container(
           decoration: BoxDecoration(
            border: Border.all(width: 2,
            color: Colors.blue),
           ),
           child: FittedBox(
            child: Text('FittedBox Example')
           ),
           width: 80,
           height: 20,
         ),

         SizedBox(
          height: 100,
         ),
        ],
       ),
      ),
     ),
    );
   }
  }

Explanation:

In the above example, we have taken two containers to demonstrate the use of FittedBox. Both the containers have the same height and the same width. The first container is not wrapped in FittedBox and the text “FittedBox” is given to it as a child. Since the container has limited height and width, so it can accommodate only partial text. But, in the second case, we have wrapped the Text widget with FittedBox and the same constraints are also passed to this container. We here see that the whole text is accommodated in the container. It is because FittedBox scales down the text to fit in the Container.

It is very useful in that scenario when you have to limit the widget from expanding or shrinking, but you also have to adjust child widgets according to that constraints, as it makes UI better.

Conclusion: 

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen what is the FittedBox widget in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter tips & tricks.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.