FractionallySizedBox In Flutter

Learn how to use Flutter’s FractionallySizedBox widget in your flutter apps.

FractionallySizedBox

In Flutter, when users need to the size of a widget relative to available space. For example, a user wants to set buttons width as 70% of the parent widget users or we have a Container that takes half of the available space Vertically, and Horizontally Fractionally Sized Box Widget is used. This article has a model that discloses why you need to do to use a fractionally sized box that can be used anyplace around the screen as long as it’s inside the parent widget.

In this article, we will explore the Fractionally Sized Box Widget In Flutter. We will see how to implement a demo program on FractionallySizedBox and show how to create it in your flutter applications.

Table Of Contents::

Introduction

Properties

Code Implement

Conclusion

GitHub Link

Introduction:

FractionallySizedBox Widget is a widget that sizes its child to a fraction of the total available space. To make it easy to understand how FractionallySizedBox works, for example, there is a container with a size of 200 x 100. Inside, there is a Raised button and we are going to set the size of the button relative to the size of the container.

Demo:

Properties :

There are some properties of the FractionallySizedBox Widget:

• Key: The widget key, used to control if it’s should be replaced.
• AligntmentGeometry alignment: How the child is aligned. Defaults to Alignment. center.
• double widthFactor: Width fraction that will be applied to a child.
• double heightFactor: Height fraction that will be applied to a child.
• widget child: A widget that will be rendered whose size depends on widthFactor and heightFactor.

Code Implement:

How to implement code in dart file :

Create a new dart file called home_page.dart inside the lib folder.

In the body, we will add a Column widget with their children. Then, we will add the constructor of FractionallySizedBox which wraps the widget inside the column widget. The FractionallySizedBox needs to be wrapped in a Flexible widget, “so it plays well with a row or a column”.

Container(
    height: 24.0, 
    color: Colors.black, 
    child: Column(
        children: [
            Flexible(
                child: FractionallySizedBox(
                    heightFactor: 1, widthFactor: 0.25,
                    child: Container(color: Colors.orange),
                ),
            ),
            Fexible(
                child: FractionallySizedBox(
                    heightFactor: 1, widthFactor: 0.15,
                    child: Container(color: Colors.green)),
            ),
            Fexible(
                child: FractionallySizedBox(
                    heightFactor: 1, widthFactor: 0.05,
                    child: Container(color: Colors.blue)
                ),
            ),
        ]
    )
)

The below example sets the Container width to 50% of the parent container’s width. Since the heightFactor is not set, it uses the height constraint from its parent

Container(
  height: 200,
  width: 300,
  color: Colors.indigo,
  child: FractionallySizedBox(
    widthFactor: 0.5,
    child: Container(
      alignment: Alignment.center,
      color: Colors.red,
      child:
          _buildTextWidget(text: "Demo Project", color: Colors.white),
    ),
  ),
),

Note: You can read the full blog here.