Telegram API Question posted in
A comprehensive official documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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',
       ....
   });
    Login or Signup to reply.
  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search