Как добавить 1 элемент, жестко закодированный в последний индекс в списке, используя gridview на Flutter

Question

У меня много данных в JSON, более 8 данных.И я хочу отобразить 7 данных из JSON и 1 данные жесткого кода (для функции «Дополнительно»).Мне удалось отобразить 7 данных из JSON, как показано ниже.

здесь

Но как я могу добавить последние 1 данные / индекс с данными жесткого кода в поле, котороеЯ сделал?

Это моя функция для отображения данных.

Widget _cardCategory(AsyncSnapshot<CatlistResult> snapshot) {
    var numItems = snapshot == null ? 0 : snapshot.data.catlist.sublist(1, 8).length;
    return Card(
      elevation: 5.0,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(5))),
      margin: EdgeInsets.all(20.0),
      child: GridView.builder(
        shrinkWrap: true,
        itemCount: numItems,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            child: Card(
              elevation: 0.0,
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: Image.asset('assets/images/main/cat_${snapshot.data.catlist[index].a}.png', fit: BoxFit.cover),
                  ),
                  Text(
                    snapshot.data.catlist[index].c,
                    style: TextStyle(fontSize: 10),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

У меня есть рекомендация от Flutter Community в Telegram Group от Родриго Лопеса , и этокод.

Widget _cardCategory(AsyncSnapshot<CatlistResult> snapshot) {
    var numItems = snapshot == null ? 0 : snapshot.data.catlist.sublist(1, 8).length;
    return Card(
      elevation: 5.0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
      margin: EdgeInsets.all(20.0),
      child: numItems == 0
          ? Container()
          : GridView.builder(
        shrinkWrap: true,
        itemCount: numItems + 1,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
        itemBuilder: (BuildContext context, int index) {
          String imagePath;
          String itemText;
          if (index == (numItems+1)) {
            imagePath = 'assets/images/main/cat_999.png';
            itemText = 'More';
          } else {
            imagePath = 'assets/images/main/cat_${snapshot.data.catlist[index].a}.png';
            itemText = snapshot.data.catlist[index].c;
          }
          return GestureDetector(
            child: Card(
              elevation: 0.0,
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: Image.asset(imagePath, fit: BoxFit.cover),
                  ),
                  Text(
                    itemText,
                    style: TextStyle(fontSize: 10),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

И если я запускаю этот код, результат будет следующим: здесь

Последний индекс (8) не из жесткого кода, а изJSON в индексе 8. Так как я могу вызвать 1 элемент из жестко закодированного для отображения в последнем индексе (8) в списке GridView?

Answer 1

По сути, вам нужно сделать что-то вроде этого:

   List<dynamic> items = snapshot.data.catlist.sublist(0, 7); // Take first 7 items from the list

   // Add a new item to the end, use the format as for other items, if needed
   items.add({
       'imagePath': 'http://myimage.url',
       ....
   });

Answer 2

Вам просто нужно изменить оператор if в сообществе Flutter в коде Telegram Group

с

 if (index == (numItems+1))

на

 if (index == numItems) 

.содержание в самом конце списка независимо от размера списка.Важно: держите

itemCount: numItems + 1, //+1 is important