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

问题描述

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

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

类似于 Facebook 所做的事情：

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

这是我的代码：

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,8),child: Container(
                color: Colors.grey[200],width: 140,// I want this to be as wide as possible
                height: 10,)
          ],);
  }
}

解决方法

简单地用扩展的小部件包装该部分：-

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,8),child: Container(
                color: Colors.grey[200],height: 10,],);
  }
}