flutterdartflutter-layoutflutter-containerflutter-row

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


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:

enter image description here

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

Solution

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