在 Flutter 中使 Row 子项尽可能宽（父项的剩余宽度）？

Question

我有一个小部件，我想在从 REST 下载一些数据时显示它 API。当 Future 尚未完成时，FutureBuilder 将使用它。

它应该显示一个灰色方块和一条灰色线。

类似于 Facebook 所做的事情：

我用一个 Row 和两个 Container 实现了它。但是，我希望该线向右水平扩展，并在 Row 内使用尽可能多的 space。这就是撞墙的地方。我该怎么做？

这是我的代码：

class Waiting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Container(
              color: Colors.grey[200],
              height: 40,
              width: 40,
            ),
            SizedBox(width: 20),
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 8),
              child: Container(
                color: Colors.grey[200],
                width: 140, // I want this to be as wide as possible
                height: 10,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

用展开的小部件简单地包裹那部分：-

class Waiting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Container(
              color: Colors.grey[200],
              height: 40,
              width: 40,
            ),
            SizedBox(width: 20),
            Expanded(                           //added expanded over here
            child: Padding(
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 8),
              child: Container(
                color: Colors.grey[200],                    
                height: 10,
              ),
            ),
            ),
          ],
        ),
      ),
    );
  }
}

在 Flutter 中使 Row 子项尽可能宽（父项的剩余宽度）？

Make a Row child as wide as possible (the remaining width of the parent) in Flutter?

flutter

dart

flutter-layout

flutter-container

flutter-row