StackedBar widget in Flutter - flutter

Question

I'm trying to create my own horizontal stacked bar widget in Flutter and I have some difficulties. This is repro of the code I have:
class StackedBar extends StatefulWidget {
HashMap<int, double> factors = HashMap();
StackedBar(){
factors[0] = 0.1;
factors[1] = 0.3;
factors[2] = 0.5;
factors[3] = 0.1;
}
#override
_StackedBarState createState() => new _StackedBarState();
}
class _StackedBarState extends State<StackedBar> {
#override
Widget build(BuildContext context) {
List<Widget> widgets = [];
for (int i =0; i < widget.factors.length; i++) {
var w = Flexible(
child: FractionallySizedBox(
widthFactor: widget.factors[i],
child: Container(
height: 50,
color: ColorHelper.getColor(i))));
widgets.add(w);
}
return Container(
color: Colors.white,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: widgets));
}
}
The result looks like this:
So as you can see the bar is not covering entire row. I think the problem is that FractionallySizedBox is not calculating it's fraction from rows width but rather from the space that widget will have available for him inside the row (in my case probably 1/4 of the row's width). Am I correct? If so what would be the correct solution?

Answer 1

Use Expanded instead of Flexible. Change your code like this:
final HashMap<int, double> factors = HashMap();
StackedBar(){
factors[0] = 1;
factors[1] = 3;
factors[2] = 5;
factors[3] = 1;
}
and inside your build method :
for (int i =0; i < widget.factors.length; i++) {
var w = Expanded(
flex: widget.factors[i],
child: Container(
height: 50,
color: Colors.accents[i]));
widgets.add(w);
}