Search for a command to run...
How can You build a responsive Flutter app using Relative values rather than Pixel values?
No comments yet. Be the first to comment.
In this series, I am going to explain all the important Flutter widgets in detail.
Exploring Scaffold Widget: A blog explaining what is Scaffold, how to use it, and examples. An in-depth guide for newbie and senior developers.
Lessons from Code, Content, and Consistency
Reliability basics: Outbox pattern + why it matters
Introducing Kafka/Redpanda + move to event-driven workflow
Connect Orders ↔ Inventory (first working service-to-service flow)
Inventory service + gRPC + proto contracts
height, width,space.px, we mostly use rem, em, and other units. Because the px doesn't really adjust to the width and height of the screen.width and height to size the children of FractionallySizedBox.double value as input. Values between ( 0.0 - 1.0). For example 0.5 means 50% , 1.0 means 100%.
widthFactor. But for height.
child of the FractionallySizedBox.
Row or Column has one problem. Flexible or Expanded widget. width and height of the Row or Column are not specified usually. As a result, FractionallySizedBox will be perplexed as to what the parent size is. Because FractionallySizedBox sizes its offspring relatively to its parent at the end of the day.height, width, or space between two widgets, etc.class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FractionallySizedBox "),
),
body: Container(
width:MediaQuery.of(context).size.width,
height:MediaQuery.of(context).size.height,
color: Colors.blueGrey,
child: Column(
children: [
Flexible(
child: FractionallySizedBox(
widthFactor: 0.8,
heightFactor: 0.8,
child: Container(
color: Colors.orange,
),
),
),
Flexible(
child: FractionallySizedBox(
widthFactor: 0.6,
heightFactor: 0.6,
child: Container(
color: Colors.white,
),
),
),
Flexible(
child: FractionallySizedBox(
widthFactor: 0.4,
heightFactor: 0.4,
child: Container(
color: Colors.green,
),
),
)
],
),
)
);
}
}
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.blueGrey,
child: Column(
children: [
Container(
width: 200,
height: 50,
color: Colors.orange,
),
const Flexible(
child: FractionallySizedBox(
heightFactor: 0.1,
),
),
Container(
width: 200,
height: 50,
color: Colors.white,
),
const Flexible(
child: FractionallySizedBox(
heightFactor: 0.2,
),
),
Container(
width: 200,
height: 50,
color: Colors.green,
),
],
),
),
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("FractionallySizedBox"),
),
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height/2,
color: Colors.blueGrey,
alignment:Alignment.bottomRight,
child: FractionallySizedBox(
widthFactor: 0.6,
child: ElevatedButton(
onPressed:(){},
child:Text("Button"),
)
)
),
);
}
}
Thank you for taking the time to read this article. 🙏. If you found it useful, please share it with others.
Also, if you have any suggestions, please leave them in the comments section. ✍️ See you soon. Until then....
