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

Question

I have a widget that I want to display while I'm downloading some data from a REST API. It will be used by a FutureBuilder when the Future isn't completed yet.

It should display a grey square and a grey line.

Something similar to what Facebook does:

I implemented it with a Row and two Containers. However, I want the line to expand horizontally to the right and take as much space is available inside the Row. That's where a hit a wall. How can I do this?

Here's my code:

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

if you want to expand `Row`s item use `Expanded` – pskink Jul 28 '21 at 13:42 — pskink, Jul 28 '21 at 13:42

score 3 · Accepted Answer · answered Jul 28 '21 at 13:42

Simply wrap that part with expanded widget:-

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

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

1 Answers1