Using FractionallySizedBox in a Row - flutter

Question

I want to have a widget of arbitrary width that contains a row of three widgets sized relatively to its parent.
FractionallySizedBox sounds like the right tool for the job, so I tried it like this:
Container(height: 24.0, color: Colors.black, child:
Row(children: [
FractionallySizedBox(heightFactor: 1, widthFactor: 0.25,
child: Container(color: Colors.orange)),
FractionallySizedBox(heightFactor: 1, widthFactor: 0.15,
child: Container(color: Colors.green)),
FractionallySizedBox(heightFactor: 1, widthFactor: 0.05,
child: Container(color: Colors.blue)),
]
)
But I'm getting an error
BoxConstraints forces an infinite width.
This happens even when I set some width on the enclosing container.
Why doesn't this work?

Answer 1

As explained in the "FractionallySizedBox (Flutter Widget of the Week)" video by the Flutter team, the FractionallySizedBox needs to be wrapped in Flexible widget, "so it plays well with a row or a column".
Reference: https://www.youtube.com/watch?v=PEsY654EGZ0
This should be the solution to the original question, formatted below:
Container(
height: 24.0,
color: Colors.black,
child: Row(
children: [
Flexible(
child: FractionallySizedBox(
heightFactor: 1, widthFactor: 0.25,
child: Container(color: Colors.orange),
),
),
Flexible(
child: FractionallySizedBox(
heightFactor: 1, widthFactor: 0.15,
child: Container(color: Colors.green)),
),
Flexible(
child: FractionallySizedBox(
heightFactor: 1, widthFactor: 0.05,
child: Container(color: Colors.blue)
),
),
]
)
)
I have also worked on something similar and was looking for a solution to the problem, this is my code for representing data levels:
Row(
children: <Widget>[
Flexible(
child: FractionallySizedBox(
widthFactor: 1,
child: Container(
margin: EdgeInsets.only(right: 5),
height: 6,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(125)),
),
)
),
),
Flexible(
child: FractionallySizedBox(
widthFactor: 1,
child: Container(
margin: EdgeInsets.only(right: 5),
height: 6,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(125)),
),
)
),
),
Flexible(
child: FractionallySizedBox(
widthFactor: 1,
child: Container(
margin: EdgeInsets.only(right: 5),
height: 6,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(125)),
),
)
),
),
Flexible(
child: FractionallySizedBox(
widthFactor: 1,
child: Container(
margin: EdgeInsets.only(right: 5),
height: 6,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(125)),
),
)
),
),
Flexible(
child: FractionallySizedBox(
widthFactor: 1,
child: Container(
margin: EdgeInsets.only(right: 5),
height: 6,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(125)),
),
)
),
),
],
),
Resulting in:
evenly spaced bars

Answer 2

You can't use FractionallySizedBox in Row or Column directly. You can split as percent Row and Column use flex parameter of Expand widget like below.
Row(
children: <Widget>[
Expanded(
flex: 6, // 60% of space => (6/(6 + 4))
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 4, // 40% of space
child: Container(
color: Colors.purple,
),
),
],
),

Answer 3

FractionallySizedBox seems to only work outside of Row, Column, and Wrap widgets. I would recommend this approach instead:
class FractionalPositioningQuestion extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Replace with the size your parent widget is.
final pWidth = MediaQuery.of(context).size.width;
return Row(children: <Widget>[
Container(
width: pWidth * 0.25,
color: Colors.orange,
),
Container(
width: pWidth * 0.15,
color: Colors.green,
),
Container(
width: pWidth * 0.05,
color: Colors.blue,
),
],
mainAxisAlignment: MainAxisAlignment.center, // Depending on what you want
);
}
}
You still need to find a way to obtain the arbitrary width of the parent widget though.
Hope this helps a little at least :-)

Answer 4

FractionallySizedBox refused to work within Rows.
Much easier to use the flex field of Expanded.
import 'package:flutter/material.dart';
myRow() => Row(children: [
Expanded(
flex: 8,
child: Container(
height: 100,
color: Colors.green,
),
),
Expanded(
flex: 2,
child: Container(
height: 100,
color: Colors.red,
),
),
]);
content() => Column(children: [
Text(" ----Start ----"),
myRow(),
Text(" ----End ----"),
]);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) => MaterialApp(
title: 'Flutter Playground',
home: Material(
child: SafeArea(child: Container(width: 80, child: content()))));
}

Answer 5

FractionallySizedBox doesn't work as expected in rows and columns, even wrapped in a Flexible widget.
tldr: It seems like the heightFactor (for columns) is applied not to the box itself, but to the column overall. This is a neat effect, but not what is expected
Details:
I made a DartPad that lets you see it.
OrangeBoxes have heighFactor=0.5 (you can change it in the code)
BlueBoxes are fixed at 20px by 20px.
Problem1
Expected Behavior: Two OrangeBoxes take up the whole screen. Half each.
Actual Behavior: Two OrangeBoxes each take up 1/4.
Problem2
Expected Behavior: One OrangeBox takes up half the screen. Adding BlueBoxes doesn't make the Orange Box smaller.
Actual Behavior: Adding BlueBoxes makes the OrangeBox smaller. So that the whole column takes up half the screen. Then, if many Blue Boxes added, the whole column eventually grows.
Photos
I also tested this on Android, and I get the same rendering behavior from a quick-and-dirty check.
Extra Notes
The gist is here if someday the dartpad link breaks
https://gist.github.com/chonghorizons/0d97a4202a0cd8838aa25713f1c19c13