How to set a separate value for each category to open related categories in flutter - flutter

Question

Hello respected developers! I am trying to set separate category value for each category but now when I click on Pizza category it shows pizza, and when I click on other categories like Sandwich, Burger or anything else. it show the same value as it was designed in a widget. How to set category value for each category screen to have its own and related value. Please help me. here is a portion of my code that need to be fixed I can do it with a hard code but if I have more than 10 categories my code will be too long. Thank you very much and I really appreciate your help.
import 'package:flutter/material.dart';
import 'package:zar/screen/categories.dart';
class TopCard extends StatefulWidget {
const TopCard({Key? key}) : super(key: key);
#override
State<TopCard> createState() => _TopCardState();
}
// TOP CARD CLASS STARTS HERE
class CardItem {
final String urlImage;
final String title;
final String subTitle;
const CardItem({
required this.urlImage,
required this.title,
required this.subTitle,
});
}
// TOP CARD WIDGETS STARTS HERE
Widget topCard({
required CardItem item,
required BuildContext context,
}) =>
Container(
width: 150,
child: Column(
children: [
Expanded(
child: AspectRatio(
aspectRatio: 2 / 2,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Material(
child: Ink.image(
image: NetworkImage(item.urlImage),
fit: BoxFit.cover,
child: InkWell(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Categories(
item: item,
),
),
),
),
),
),
),
),
),
const SizedBox(height: 4),
Text(
item.title,
style: const TextStyle(
color: Color(0xff5e35b1),
fontSize: 20,
fontWeight: FontWeight.bold),
),
Text(
item.subTitle,
style: const TextStyle(
color: Colors.redAccent,
),
),
],
),
);
class _TopCardState extends State<TopCard> {
// TOP CARD LIST VIEW STARTS HERE
List<CardItem> items = const [
CardItem(
urlImage:
'https://images.unsplash.com/photo-1542834369-f10ebf06d3e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
title: 'PIZZA',
subTitle: '\$20',
),
CardItem(
urlImage:
'https://images.unsplash.com/photo-1621852004158-f3bc188ace2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
title: 'SANDWICH',
subTitle: '\$7.99',
),
CardItem(
urlImage:
'https://images.unsplash.com/photo-1534938665420-4193effeacc4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80',
title: 'FRIES',
subTitle: '\$2.99',
),
CardItem(
urlImage:
'https://images.unsplash.com/photo-1585238341710-4d3ff484184d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=804&q=80',
title: 'BURGER',
subTitle: '\$5.99',
),
];
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 20),
height: 150,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: 4,
separatorBuilder: (constext, _) => const SizedBox(width: 16),
itemBuilder: (context, index) => topCard(
context: context,
item: items[index],
),
),
);
}
}
This is my home screen category
This is my Category screen that shows Pizza categories.
And again this is my Category screen that shows the same Pizza categories. And I want this to be different.
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(top: 20),
height: 150,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: 4,
separatorBuilder: (constext, _) => const SizedBox(width: 16),
itemBuilder: (context, index) => topCard(
context: context,
item: items[index],
),
),
);
}
Here is my category screen code:
import 'package:flutter/material.dart';
import 'package:zar/widgets/top_card.dart';
class Categories extends StatelessWidget {
final CardItem item;
const Categories({Key? key, required this.item}) : super(key: key);
#override
Widget build(BuildContext context) {
final double height = MediaQuery.of(context).size.height;
final double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(item.title),
),
body: ListView(
children: [
Container(
height: 350,
width: double.infinity,
color: const Color(0xff673ab7),
child: Column(
children: [
AspectRatio(
aspectRatio: 3 / 2,
child: Image.network(item.urlImage),
),
Text(
item.title,
style: const TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold,
),
)
],
),
),
SizedBox(
height: height * 0.01,
),
Center(
child: Container(
height: 167,
child: Stack(
children: [
Positioned(
child: Material(
child: Container(
margin: const EdgeInsets.all(5),
height: 300,
width: width * 0.9,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: const Color(0xff5e35b1).withOpacity(0.3),
blurRadius: 6.0,
offset: const Offset(4, 8),
),
],
),
),
),
),
Positioned(
top: 6,
left: 5,
child: Card(
elevation: 10.0,
shadowColor: const Color(0xff5e35b1).withOpacity(0.3),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: const DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://images.unsplash.com/photo-1625395005224-0fce68a3cdc8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"),
)),
),
),
),
Positioned(
top: 15,
left: 180,
child: Container(
height: 150,
width: 180,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Pizza",
style: TextStyle(
color: Color(0xff5e35b1),
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
Text(
"Italian Chees and Beef",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Divider(
color: Color(0xff5e35b1),
),
],
),
),
),
Positioned(
top: 120,
left: 180,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Rating",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Text("4.5"),
],
),
),
),
Positioned(
top: 120,
left: 350,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Price",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Text("\$20"),
],
),
),
),
],
),
),
),
SizedBox(
height: height * 0.01,
),
Center(
child: Container(
height: 167,
child: Stack(
children: [
Positioned(
child: Material(
child: Container(
margin: const EdgeInsets.all(5),
height: 300,
width: width * 0.9,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: const Color(0xff5e35b1).withOpacity(0.3),
blurRadius: 6.0,
offset: const Offset(4, 8),
),
],
),
),
),
),
Positioned(
top: 6,
left: 5,
child: Card(
elevation: 10.0,
shadowColor: const Color(0xff5e35b1).withOpacity(0.3),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: const DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://images.unsplash.com/photo-1606502281004-f86cf1282af5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"),
)),
),
),
),
Positioned(
top: 15,
left: 180,
child: Container(
height: 150,
width: 180,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Special Mini Pizza",
style: TextStyle(
color: Color(0xff5e35b1),
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
Text(
"American Pizza",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Divider(
color: Color(0xff5e35b1),
),
],
),
),
),
Positioned(
top: 120,
left: 180,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Rating",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Text("4.5"),
],
),
),
),
Positioned(
top: 120,
left: 350,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Price",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Text("\$9.99"),
],
),
),
),
],
),
),
),
SizedBox(
height: height * 0.01,
),
Center(
child: Container(
height: 167,
child: Stack(
children: [
Positioned(
child: Material(
child: Container(
margin: const EdgeInsets.all(5),
height: 300,
width: width * 0.9,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: const Color(0xff5e35b1).withOpacity(0.3),
blurRadius: 6.0,
offset: const Offset(4, 8),
),
],
),
),
),
),
Positioned(
top: 6,
left: 5,
child: Card(
elevation: 10.0,
shadowColor: const Color(0xff5e35b1).withOpacity(0.3),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: const DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://images.unsplash.com/photo-1628840042765-356cda07504e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80"),
)),
),
),
),
Positioned(
top: 15,
left: 180,
child: Container(
height: 150,
width: 180,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Paparoni Pizza",
style: TextStyle(
color: Color(0xff5e35b1),
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
Text(
"Maxcan Pizza",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Divider(
color: Color(0xff5e35b1),
),
],
),
),
),
Positioned(
top: 120,
left: 180,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Rating",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Text("4.5"),
],
),
),
),
Positioned(
top: 120,
left: 350,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Price",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Text("\$17.50"),
],
),
),
),
],
),
),
),
SizedBox(
height: height * 0.01,
),
Center(
child: Container(
height: 167,
child: Stack(
children: [
Positioned(
child: Material(
child: Container(
margin: const EdgeInsets.all(5),
height: 300,
width: width * 0.9,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: const Color(0xff5e35b1).withOpacity(0.3),
blurRadius: 6.0,
offset: const Offset(4, 8),
),
],
),
),
),
),
Positioned(
top: 6,
left: 5,
child: Card(
elevation: 10.0,
shadowColor: const Color(0xff5e35b1).withOpacity(0.3),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 150,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: const DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://images.unsplash.com/photo-1585828922344-85c9daa264b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=640&q=80"),
)),
),
),
),
Positioned(
top: 15,
left: 180,
child: Container(
height: 150,
width: 180,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Mashroom Pizza",
style: TextStyle(
color: Color(0xff5e35b1),
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
Text(
"European Pizza",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Divider(
color: Color(0xff5e35b1),
),
],
),
),
),
Positioned(
top: 120,
left: 180,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Rating",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Text("4.5"),
],
),
),
),
Positioned(
top: 120,
left: 350,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Price",
style: TextStyle(
color: Colors.redAccent,
fontSize: 20,
),
),
Text("\$15.99"),
],
),
),
),
],
),
),
),
],
),
);
}
}
And here is my home screen code.
import 'package:flutter/material.dart';
import 'package:zar/widgets/top_card.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home"),
),
body: Container(
child: Column(
children: const [
TopCard(),
],
),
),
);
}
}