Hi Team
I need help, my app is working fine but the issue now is for me to make flutter furniture icons display different images per each card. Let me share my current logic for this,
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
centerTitle: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(30),
),
),
actions: [
IconButton(
icon: Icon(Icons.person),
onPressed: () {
// Action when person icon is pressed
},
),
IconButton(
icon: Icon(Icons.favorite),
onPressed: () {
// Action when wishlist icon is pressed
},
),
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
// Action when cart icon is pressed
},
),
],
bottom: PreferredSize(
preferredSize: Size.fromHeight(80),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Spacer(),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
hintText: 'Search...',
filled: true,
fillColor: Colors.grey,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(60),
borderSide: BorderSide.none,
),
),
),
),
),
Spacer(),
],
),
),
),
),
body: GridView.count(
crossAxisCount: 4,
padding: EdgeInsets.all(16.0),
children: List.generate(4, (index) {
return ShoppingCartItem(index: index + 1);
}),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 65,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
},
child: Text('INFORMATION'),
),
GestureDetector(
onTap: () {
},
child: Text('POLICIES'),
),
GestureDetector(
onTap: () {
},
child: Text('ABOUT'),
),
GestureDetector(
onTap: () {
},
child: Text('CONTACT'),
)
],
),),
),
),
);
}
}
class ShoppingCartItem extends StatefulWidget {
final int index;
const ShoppingCartItem({Key? key, required this.index}) : super(key: key);
@override
_ShoppingCartItemState createState() => _ShoppingCartItemState();
}
class _ShoppingCartItemState extends State<ShoppingCartItem> {
late IconData currentIcon;
late Timer timer;
@override
void initState() {
super.initState();
currentIcon = getIcon(widget.index);
timer = Timer.periodic(Duration(seconds: 3), (Timer t) {
setState(() {
currentIcon = getIcon(widget.index);
});
});
}
@override
void dispose() {
timer.cancel();
super.dispose();
}
IconData getIcon(int index) {
switch (index) {
case 1:
return Icons.king_bed;
case 2:
return Icons.chair;
case 3:
return Icons.table_chart;
case 4:
return Icons.chair_alt_rounded;
case 5:
return Icons.weekend;
case 6:
return Icons.bathroom;
default:
return Icons.error;
}
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ItemDetail(index: widget.index)),
);
},
child: Card(
elevation: 2,
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Item ${widget.index}',
style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold),
),
Icon(currentIcon, size: 25, color: Colors.cyan),
],
),
),
),
);
}
}
class ItemDetail extends StatelessWidget {
final int index;
const ItemDetail({Key? key, required this.index}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Item Detail'),
),
body: Center(
child: Text('Detail page for Item $index'),
),
);
}
}