Сделать дочерний элемент Row как можно более широким (оставшаяся ширина родительского элемента) во Flutter?

Question

У меня есть виджет, который я хочу отображать при загрузке данных из REST API. Он будет использоваться FutureBuilder когда Future еще не завершено.

Он должен отобразить серый квадрат и серую линию.

Что-то похожее на то, что делает Facebook:

Я реализовал это с помощью и двух 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, 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,
              ),
            ),
            ),
          ],
        ),
      ),
    );
  }
}