Flutter Flitter中的StackedBar小部件

我试图在Flutter中创建自己的水平堆叠条小部件，但遇到了一些困难。这是我的代码的复制品：

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));
  }
}

类StackedBar扩展StatefulWidget{
HashMap factors=HashMap（）；
StackedBar（）{
系数[0]=0.1；
系数[1]=0.3；
系数[2]=0.5；
系数[3]=0.1；
}
@凌驾
_StackedBarState createState（）=>new_StackedBarState（）；
}
类_StackedBarState扩展状态{
@凌驾
小部件构建（构建上下文）{
列表小部件=[]；
for（int i=0；i

结果如下所示：

---

因此，正如您所看到的，该条并没有覆盖整行。我认为问题在于，FractillySizedBox不是从行宽度计算它的分数，而是从窗口小部件在行内的可用空间（在我的例子中，可能是行宽度的1/4）计算它的分数。我说得对吗？如果是这样，正确的解决方案是什么？

使用扩展而不是灵活。按如下方式更改代码：

final HashMap<int, double> factors = HashMap();

  StackedBar(){
    factors[0] = 1;
    factors[1] = 3;
    factors[2] = 5;
    factors[3] = 1;
  }

final HashMap factors=HashMap（）；
StackedBar（）{
系数[0]=1；
因子[1]=3；
因子[2]=5；
因子[3]=1；
}

在构建方法中：

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);
    }

for（int i=0；i