Размещение ListTiles в строке

Question

Я сейчас ищу больше часов и не понимаю, почему невозможно поместить изображение и карточку с кучей ListTiles в строку. Ошибка, которую я получаю:

Следующее утверждение было выдано во время performLayout (): BoxConstraints устанавливает бесконечную ширину. Оскорбительные ограничения были следующими: BoxConstraints (w = Infinity, 0.0 <= h <= Infinity) </em>

Но я действительно не понимаю, что именно должно быть в Box, если это должна быть карта с ListTiles? Может ли кто-нибудь помочь мне с этим?

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

Оберните карту с расширением / гибкостью, которая решит вашу проблему ограничений. Также очень важно указать ширину изображения, так как в оставшееся место вы помещаете другие виджеты.

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

Вашему ListTile нужны ограничения, чтобы он знал, где находятся его границы.

Просто дайте ему некоторые ограничения (например, обернув SizedBox с width) или, если вы хотите возьмите как можно больше места, просто оберните каждый ListTile виджетом Flex, например Flexible или Expanded, если вы хотите равномерно разделить пространство со всеми плитками на этом Column.