Placing ListTiles in a Row

user_11168170 0
Viewed 3435

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"),
                  ),
                ]),
              ),
            ]),
          ),
        ),
      ),
    );
  }
flutter-web flutter-layout dart flutter
2 Answers

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

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.

user_69199630
Related