Flutter - Using FractionallySizedBox Widget Examples

This tutorial shows you how to use Flutter's FractionallySizedBox widget.

In Flutter, what if you need to set the size of a widget relative to the available space. For example, you want to set the width of a button to be 70% of the parent container. For that purpose, Flutter has a widget named FractionallySizedBox.

Below is the constructor of FractionallySizedBox along with its properties:

  const FractionallySizedBox({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child,
  })

Properties:

• Key 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 child.
• double heightFactor: Height fraction that will be applied to child.
• Widget child: The widget that will be rendered whose size depends on widthFactor and heightFactor.

To make it easy to understand how FractionallySizedBox works, for example there is a light-grey Container with a size of 200 x 100. Inside, there is a RaisedButton and we are going to set the size of the button relative to the size of the Container. What you need is wrap the button inside FractionallySizedBox.

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

  child: Container(
    width: 200.0,
    height: 100.0,
    color: Color.fromARGB(255, 235, 237, 237),
    child: FractionallySizedBox(
      widthFactor: 0.5,
      child:  RaisedButton(
        child: Text('Click'),
        color: Colors.green,
        textColor: Colors.white,
        onPressed: () {
        },
      ),
    ),
  ),

Output:

;

The below example sets the button's height to 25% of the container's height. Since the widthFactor is not set, it uses the width constraint from its parent.

  child: Container(
    width: 200.0,
    height: 100.0,
    color: Color.fromARGB(255, 235, 237, 237),
    child: FractionallySizedBox(
      heightFactor: 0.25,
      child:  RaisedButton(
        child: Text('Click'),
        color: Colors.green,
        textColor: Colors.white,
        onPressed: () {
        },
      ),
    ),
  ),

Output:

You can also set both widthFactor and heightFactor of the button like the below example.

  child: Container(
    width: 200.0,
    height: 100.0,
    color: Color.fromARGB(255, 235, 237, 237),
    child: FractionallySizedBox(
      widthFactor: 0.5,
      heightFactor: 0.25,
      child:  RaisedButton(
        child: Text('Click'),
        color: Colors.green,
        textColor: Colors.white,
        onPressed: () {
        },
      ),
    ),
  ),

Output:

By default, the child is aligned in the center. To change it, you can use alignment property

  child: Container(
    width: 200.0,
    height: 100.0,
    color: Color.fromARGB(255, 235, 237, 237),
    child: FractionallySizedBox(
      widthFactor: 0.5,
      heightFactor: 0.25,
      alignment: Alignment.bottomRight,
      child:  RaisedButton(
        child: Text('Click'),
        color: Colors.green,
        textColor: Colors.white,
        onPressed: () {
        },
      ),
    ),
  ),

Output:

That's how to use FractionallySizedBox in Flutter. It's suitable for cases where the size of a widget must be a fraction of available space.