Placing ListTiles in a Row - flutter

Question

I'm reseaching now for more hours and don't get why it's not possible to put an image and a card with a bunch of ListTiles in a Row.
The error what im getting is:
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite width.
The offending constraints were:
BoxConstraints(w=Infinity, 0.0<=h<=Infinity)
But i dont really get what exactly has to be in a Box should it be the Card with the ListTiles?
Can someone help me with this?
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child:
/* card == null
? loadCards()
: ListTile() */
SingleChildScrollView(
child: Card(
child: Row(mainAxisSize: MainAxisSize.min, children: [
Image.network(
"widget.card.imageUrl",
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
),
);
},
),
Card(
child: Column(mainAxisSize: MainAxisSize.min, children: [
ListTile(
trailing: Icon(Icons.play_arrow),
title: Text("Black Lotus"),
subtitle: Text("Name"),
),
Container(
child: Row(
children: [Icon(Icons.play_arrow), Icon(Icons.polymer)],
),
),
ListTile(
title: Text("Hello"),
),
ListTile(
title: Text("Hello"),
),
]),
),
]),
),
),
),
);
}

Answer 1

Wrap Card with Expanded/Flexible which will solve your constraint problem, Also it's very important to give image width, as at remaining space you are putting other widgets.
return Scaffold(
appBar: AppBar(
title: Text('Sample'),
),
body: SingleChildScrollView(
child: Card(
child: Row(mainAxisSize: MainAxisSize.min, children: [
Image.network(
"https://cdn.pixabay.com/photo/2018/07/11/21/51/toast-3532016_1280.jpg",
width: 40,
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
),
);
},
),
Expanded(
child: Card(
child: Column(mainAxisSize: MainAxisSize.min, children: [
ListTile(
trailing: Icon(Icons.play_arrow),
title: Text("Black Lotus"),
subtitle: Text("Name"),
),
Container(
child: Row(
children: [Icon(Icons.play_arrow), Icon(Icons.polymer)],
),
),
ListTile(
title: Text("Hello"),
),
ListTile(
title: Text("Hello"),
),
]),
),
),
]),
),
),
);

Answer 2

Your ListTile needs constraints so it knows where its bounds are.
Just give it some constraints (eg. by wrapping in a SizedBox with a width) or, if you want to take it as much space as possible, just wrap each ListTile with a Flex widget such as Flexible or Expanded if you want to share space evenly with all tiles on that Column.