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:
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),
),
),
),The below example sets the button’s height to 75% of the container’s height. Since the widthFactor is not set, it uses the width constraint from its parent.
Container(
height: 100,
width: 180,
color: Colors.purpleAccent,
child: FractionallySizedBox(
heightFactor: 0.75,
child: RaisedButton(
color: Colors.white,
child: _buildTextWidget(text: 'Click', color: Colors.red),
onPressed: () {},
),
),
),The below example describes how we can set the height and width of the containers wrapped in a row widget using FractionallySizedBox. It’s really important if we use FractinallySizedBox widget in row or column must be wrapped in flexible widget. Here, I try to explain to you that we can set the height and width of containers using different heightFactor and widthFactor.
Container(
height: 220,
width: double.infinity,
color: Colors.yellowAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
child: FractionallySizedBox(
heightFactor: 1,
widthFactor: 1,
child: Container(color: Colors.orange),
),
),
Flexible(
child: FractionallySizedBox(
heightFactor: 0.7,
widthFactor: 0.7,
child: Container(color: Colors.green)),
),
Flexible(
child: FractionallySizedBox(
heightFactor: 0.4,
widthFactor: 0.4,
child: Container(color: Colors.blue)),
),
]),
),By Default, the Child is aligned at a Center. To change the position of the child wrapped in FractionallySizedBox we use alignment Property. Consider a code snippet as below:
Container(
height: 100,
width: 180,
color: Colors.purpleAccent,
child: FractionallySizedBox(
heightFactor: 0.6,
widthFactor: 0.5,
alignment: Alignment.bottomRight,
child: RaisedButton(
color: Colors.white,
child: _buildTextWidget(text: 'Click', color: Colors.red),
onPressed: () {},
),
),
),Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white54,
appBar: AppBar(
title: Text('Fractionally Sized Box'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
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),
),
),
),
Flexible(
child: FractionallySizedBox(
heightFactor: 1,
widthFactor: 1,
child: Container(
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Flexible(
child: FractionallySizedBox(
widthFactor: 0.08,
child: _buildTextWidget(
text: 'Fractional', color: Colors.deepOrangeAccent),
)),
Flexible(
child: FractionallySizedBox(
widthFactor: 0.05,
child: _buildTextWidget(
text: 'Sized', color: Colors.indigoAccent),
)),
Flexible(
child: FractionallySizedBox(
widthFactor: 0.05,
child: _buildTextWidget(text: 'Box', color: Colors.black),
)),
],
),
),
),
),
Container(
height: 220,
width: double.infinity,
color: Colors.yellowAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
child: FractionallySizedBox(
heightFactor: 1,
widthFactor: 1,
child: Container(color: Colors.orange),
),
),
Flexible(
child: FractionallySizedBox(
heightFactor: 0.7,
widthFactor: 0.7,
child: Container(color: Colors.green)),
),
Flexible(
child: FractionallySizedBox(
heightFactor: 0.4,
widthFactor: 0.4,
child: Container(color: Colors.blue)),
),
]),
),
Container(
height: 100,
width: 180,
color: Colors.purpleAccent,
child: FractionallySizedBox(
heightFactor: 0.6,
widthFactor: 0.5,
alignment: Alignment.bottomRight,
child: RaisedButton(
color: Colors.white,
child: _buildTextWidget(text: 'Click', color: Colors.red),
onPressed: () {},
),
),
),
],
),
);
}
_buildTextWidget({
required String text,
required Color color,
}) {
return Text(
text,
style: TextStyle(color: color, fontWeight: FontWeight.bold, fontSize: 20),
);
}
}Conclusion:
In the article, I have explained the FractionallySizedBox Widget’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to the FractionallySizedBox Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the FractionallySizedBox Widget in your flutter projects. We will show you what the FractionallySizedBox Widget is?. Some FractionallySizedBox widget properties, make a demo program for working FractionallySizedBox Widget. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the FractionallySizedBox :
GitHub – flutter-devs/fractionallysizedbox
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
