Как l oop данных из пожарного магазина с пользовательским макетом

Question

У меня есть макет с фиктивными данными

body: ListView(
  children: <Widget>[
    Container(
      padding: EdgeInsets.only(right: 15.0),
      width: MediaQuery.of(context).size.width - 30.0,
      height: MediaQuery.of(context).size.height - 50.0,
      child: GridView.count(
        crossAxisCount: 2,
        primary: false,
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 15.0,
        childAspectRatio: 0.8,
        children: <Widget>[
          _buildCard('Cookie mint', '\Rp.3.99',
              'assets/cookiemint.jpg', false, false, context),
          _buildCard('Cookie cream', '\Rp.25.500',
              'assets/cookiecream.jpg', true, false, context),
          _buildCard('Cookie classic', '\Rp.35.000',
              'assets/cookieclassic.jpg', false, true, context),
          _buildCard('Cookie choco', '\Rp.51.500',
              'assets/cookiechoco.jpg', false, false, context),
        ],
      ),
    )
  ],
),

Результат

Но когда я использую реальные данные из пожарного магазина, мой макет сломан. Я использую ListView.builder для l oop этих данных

body: ListView(
  children: <Widget>[
    Container(
      padding: EdgeInsets.only(right: 15.0),
      width: MediaQuery.of(context).size.width - 30.0,
      height: MediaQuery.of(context).size.height - 50.0,
      child: GridView.count(
        crossAxisCount: 2,
        primary: false,
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 15.0,
        childAspectRatio: 0.8,
        children: <Widget>[
          ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) => _buildCardItem(
              context,
              snapshot.data.documents[index],
              false,
              'assets/burger.jpg',
              false,
            ),
          )
        ],
      ),
    )
  ],
),

И результат будет

Я думаю, возможно ListView.builder создать новый макет внутри моего макета? Я новичок с флаттером. Есть ли способ повторить данные другим способом, кроме использования ListView.builder? Или все же придется использовать его каким-либо образом? Нужен совет. Спасибо

Answer 1

Где у вас есть:

children: <Widget>[
          ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) => _buildCardItem(
              context,
              snapshot.data.documents[index],
              false,
              'assets/burger.jpg',
              false,
            ),
          )
        ]

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

Ваши itens основаны на списке snapshot.data.documents. Вы можете использовать его с функцией .map для создания другого списка виджетов на основе этого:

children: snapshot.data.documents.map(
(item) => _buildCardItem(
              context,
              item,
              false,
              'assets/burger.jpg',
              false,
            )

).toList(),

Answer 2

После просмотра я исправил пример кода

children: snapshot.data.documents.map<Widget>((document) {
  return ListTile(
    title: Text(document['item_name']),
    subtitle: Text(document['item_price']),
  );
}).toList(),

Answer 3

Какова цель внешнего ListView, у вас есть 3 прокручиваемых виджета, вложенных вместе, это не кажется мне необходимым, и у многих людей возникают проблемы с ListView firestore и StreamBuilder, если это не так добавив что-нибудь, я бы попытался удалить это.

snapshot.data.documents.map((DocumentSnapshot document) => document.data['//Youlabels']);