FittedBox Widget in Flutter with Example | Androidmonks

FittedBox Widget in Flutter with Example

FittedBox Widget is a simple Widget to help in creating a quick and neater way to contain a child inside a parent. The main purpose of using the FittedBox is to make the App UI look neater for dynamic children with varying length. In this tutorial, we will look at this simple widget and also, in addition, see how it can be used.

FittedBox Widget – Basics

To create a FittedBox widget, make use of the class FittedBox.

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.
FittedBox(),

I have created a sample template which we are going to be using through this article.

import 'package:flutter/material.dart';
void main()
{
  runApp(MaterialApp(
    title: 'Androidmonks',
    home: Scaffold(
      appBar: AppBar(title: Text("Androidmonks"),),
      body: ListView(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    child: Image.network("https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
                  ),
                  Container(
                    child: Text("This is a sample text to understand FittedBox widget"),
                  )
                ],
              )
            ],
        ),
    ),
  ));
  
}

Like we have seen, the example application looks like below. The text is getting overflowed to the right and the app is not able to render it. Think of a situation where the data is going to come from a server. There will be very less control over what to render to the user and what not to render to the user. FittedBox widget makes sure that the final data is being properly rendered to the user irrespective of how the data is. The child is forced to fit inside the parent. We will see how the data can be Fit inside the Container in the rest of the sections below.

Container without the FittedBox
 Container without the Fitted box

FittedBox – Before and After

From the example above, the App looks like it cannot handle the overflow of data. The Text widget we specified is nowhere in the picture. We will look at what happens when the FittedBox widget is added to the application.

import 'package:flutter/material.dart';
void main()
{
  runApp(MaterialApp(
    title: 'Androidmonks',
    home: Scaffold(
      appBar: AppBar(title: Text("Androidmonks"),),
      body: ListView(
            children: <Widget>[
              FittedBox(child: Row(
                children: <Widget>[
                  Container(
                    child: Image.network("https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
                  ),
                  Container(
                    child: Text("This is a sample text to understand FittedBox widget"),
                  )
                ],
              ),)
            ],
        ),
    ),
  ));
  
}

This is how the layout has been changed and the application looks like,

After adding the FittedBox Widget
After adding the FittedBox Widget

FittedBox – Properties

There are only 2 properties associated with the FittedBox widget. Both of them along with their working is given below.

Fit

Fit attribute applies the BoxFit class on the Widget. It consists of lot of options including cover, fill etc. It is up to the developer to decide how the widgets/children should be arranged.

To understand better, find the example below,

import 'package:flutter/material.dart';
void main()
{
  runApp(MaterialApp(
    title: 'Androidmonks',
    home: Scaffold(
      appBar: AppBar(title: Text("Androidmonks"),),
      body: ListView(
            children: <Widget>[
              FittedBox(child: Row(
                children: <Widget>[
                  Container(
                    child: Image.network("https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
                  ),
                  Container(
                    child: Text("This is a widget"),
                  )
                ],
              ),
              fit: BoxFit.contain,
              )
            ],
        ),
    ),
  ));
  
}

The fit is a BoxFit contain which means that whatever image/text/widget that is going to be inside the FittedBox will be contained. It can be scaled down or scaled up to contain the image and text within that space.

The final app now looks like,

Fit box with the BoxFit.contain
Fit box with the BoxFit.contain

Alignment

This lets you adjust as to where the child should be positioned inside the FittedBox. Can be any of the following or combination of them. Center, top, bottom, left, right.

It is important to consider this also while deciding to position the Child widgets of the FittedBox.

You can find a simple example below.

import 'package:flutter/material.dart';
void main()
{
  runApp(MaterialApp(
    title: 'Androidmonks',
    home: Scaffold(
      appBar: AppBar(title: Text("Androidmonks"),),
      body: ListView(
            children: <Widget>[
              FittedBox(child: Row(
                children: <Widget>[
                  Container(

                    child: Image.network("https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
                  ),
                  Container(

                    child: Text("This is a widget to understand how the fittedbox works"),
                  )
                ],
              ),
                alignment: Alignment.centerLeft,
              )
            ],
        ),
    ),
  ));
  
}

For example, purpose, defined the alignment as centerLeft. You can play with the combinations to understand how the FittedBox widget actually works.

Conclusion

FittedBox is primarily useful in handling dynamic data from the server. It makes sure that the UI looks consistent and does not provide any leakages and break the UI flow.

Make sure to experiment with the multiple values present before fixing on the final FittedBox property combination.

 

Drop in any comments you have in the section below.

“Learn and Be Curious”

Also Read  Bounded Service Android With Example | AndroidMonks

Leave a Comment

Your email address will not be published. Required fields are marked *