Need to categorize Data from json - json

Question

I am reading json data that Contain some items (and Items have some categories I wanna show data on the basis of categories like using same widget again and again just have to change category name only Here What I have done so far it show all the items.
Also Added image for items.
Widget buildItems(List<[![Items]> items) => GridView.builder(
physics: const BouncingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.vertical,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 20.0,
mainAxisExtent: 170,
),
//itemCount: items.length,
itemCount: itemCount,
itemBuilder: (context, index) {
final item = items[index];
int random = Random().nextInt(items.length);
print(random);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: InkWell(
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) =>
DetailScreen(item: item))),
// => Navigator.of(context).push(MaterialPageRoute(
// builder: (BuildContext context) =>
// ProductPage(product: product))),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black38,
// spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 5.0)),
BoxShadow(color: Colors.white, offset: Offset(-1, 0)),
BoxShadow(color: Colors.white, offset: Offset(2, 0)),
]),
child: Column(
children: [
SizedBox(
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10)),
child: Image.network(
'$imageLink${item.imageUrl}',
fit: BoxFit.fill,
width: double.infinity,
height: 110,
),
),
),
SizedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
margin:
const EdgeInsets.only(left: 5, top: 10),
height: 40,
width: 40,
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network(
'$iconLink${item.logo}',
fit: BoxFit.fill)),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Container(
width: 120,
margin: const EdgeInsets.only(
top: 7, left: 5),
child: Flexible(
child: SizedBox(
child: Text('${item.name}',
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.bodyText1),
),
),
// Flexible(
// child: Text(
// product.name,
// style: const TextStyle(
// fontWeight: FontWeight.bold,
// color: Colors.black,
// fontSize: 14),
// ),
// ),
),
),
const SizedBox(
height: 2,
),
Padding(
padding: const EdgeInsets.only(left: 5.0),
child: Text('${item.subcategory}',
style: Theme.of(context)
.textTheme
.bodyText2!
.copyWith(
color: kButtonBackground)),
),
],
),
],
),
],
),
),
],
),
),
)
// ListTile(
// onTap: () => Navigator.of(context).push(MaterialPageRoute(
// builder: (BuildContext context) =>
// ProductPage(product: product))),
// title: Text(product.name),
// ),
);
},
);
//------------------------------ JSON SAMPLE
[ {
"name": "Item1",
"category": "Apple",
"subcategory": "Productivity",
"imageUrl": "Banner.jpg",
"logo": "logo.png",
"description": "falkr."
},
{
"name": "ABC",
"category": "Testing1",
"subcategory": "Productivity",
"imageUrl": "banner.jpg",
"logo": "System.png",
"description": "Testing."
}
]
//-------------------------------
https://i.stack.imgur.com/iX9Hh.png

Answer 1

#Talal, you have to filter the list based on the selected category, like below
List<Items> categorySpecificItems = allItems.where((item) => item.category == selectedCategory).toList()
Now pass the categorySpecificItems to buildItems on the change of selected category and use some state handling to render the UI.
Hope this works!