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 {
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'),
),
);
}
}
Tuhin PaulPosted Mar 14, 2024, 8:08 PM
The current approach uses string paths for image assets. Consider using the AssetImage class for better asset management:
Instead of directly referencing the image path, use the Image widget with the iconImageMap:
Use the ! operator to ensure the image is not null after retrieving it from the map.
Abhishek YadavPosted Mar 13, 2024, 6:47 AM
There are a few ways you can display different images for each card in your Flutter app using furniture icons. One approach is to create a map that maps each icon to a specific image asset, and then use that map to display the corresponding image for each card. Below is an example of how you can achieve this:
getIcon()method in your_ShoppingCartItemStateclass to return the icon instead of the IconData:ShoppingCartItemwidget to use the icon returned from thegetIcon()method: