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.
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?
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