FittedBox in Flutter

Flutter is all about widgets. There are many widgets that are used for positioning and styling of text. In this article, we’ll learn about the FittedBox widget. FittedBox is a very useful widget that scales and positions its child within itself according to fit and alignment. Consider an app, in which, you have to take input from the user and in a certain scenario, the user enters a large input that overflows and scatters other widgets. As many of the widgets are dynamic, which 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 its size beyond a certain limit. It re-scales them according to the size available. For instance, if the text is displayed inside a container, and the text is to be entered by the user. 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 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:

1. 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 it’s 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 remove any extra portions from the source, if any, as it doesn’t resize the image.

2. alignment: This property is used to align 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 is aligned according to one of these properties. You can also assign position co-ordinates to align the widgets.

 3. 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:

Dart

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('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              SizedBox(height: 10),

              // Without FittedBox

              Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 2,
                  color: Colors.green
                  )
                ),
                child: Text('This is explanation'),
                width: 80,
                height: 20,
              ),

              SizedBox(
                height: 12,
              ),

              // With FittedBox

              Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 2,
                  color: Colors.green),
                ),
                child: FittedBox(
                  child: Text('This is explanation')
                ),
                width: 80,
                height: 20,
              ),

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

Output:

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 “This is Explanation” 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 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.