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