How to add 1 item hardcoded into last index in list using gridview on Flutter

Question

I have a lot of data in JSON more than 8 data. And I want to display 7 data from JSON and 1 hardcode data (for "More" feature). I managed to display 7 data from JSON as shown below.

here

But how can I add the last 1 data/index with the hardcode data in the box that I made?

This is my function to show the data.

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

I have a reference from Flutter Community in Telegram Group from Rodrigo Lopez, and this is the code.

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

And if I run this code, the result like this: here

The last index(8) it's not from hardcoded but it's from JSON in index 8. So how can I call 1 item from hardcoded to show in the last index(8) in list GridView?

score 3 · Accepted Answer · edited Jun 25 '19 at 08:05

3

You just need to change the if statement in the Flutter Community in Telegram Group code

from

 if (index == (numItems+1))

to

 if (index == numItems)

This will put your hardcoded content at the very end of the list no matter the list size. Important: Keep

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

edited Jun 25 '19 at 08:05

R Rifa Fauzi Komara

1,915
6
27
54

answered Jun 25 '19 at 07:50

F-1

2,887
20
28

1

Thanks, bro, it's fixed it, but I not use .length in if statement because already call it in var numItems. – R Rifa Fauzi Komara Jun 25 '19 at 08:05

score 1 · Answer 2 · answered Jun 25 '19 at 07:06

1

Basically, you'll need to do something like this:

   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',
       ....
   });

answered Jun 25 '19 at 07:06

Thepeanut

3,074
1
17
23

can you write your code in my code in the example above? – R Rifa Fauzi Komara Jun 25 '19 at 07:15

How to add 1 item hardcoded into last index in list using gridview on Flutter

2 Answers2