Guest User

Guest User

  • Tech Writer
  • 2.1k
  • 461.3k

How to make flutter icons from card display different icons?

Mar 10 2024 12:57 PM

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'),
      ),
    );
  }
}

 


Answers (2)