How to reduce the size of the shopping card in flutter?

Question

Hi Team

I have shopping card on my home page, issue i am unable to reduce the size of it to be small, so other card could easily display due to width and height. IS there a better way in flutter can achieve this? 

 

How do i also have a Quantity - and + with Add to card button so item on the shopping card increment and decrement?

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:ecape_decor_pty_ltd/screens/forgot-password.dart';
import 'package:ecape_decor_pty_ltd/screens/login.dart';
import 'package:ecape_decor_pty_ltd/screens/profile.dart';

class HomeScreen extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('Home'),
        centerTitle: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(30),
          ),
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.person),
            onPressed: () {
              _scaffoldKey.currentState?.openEndDrawer();
            },
          ),
          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'),
                )
              ],
            ),
          ),
        ),
      ),
      endDrawer: Drawer(
        child: LoginForm(),
      ),
    );
  }

  void _openLoginDrawer(BuildContext context) {
    _scaffoldKey.currentState!.openDrawer();
  }
}

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 List<IconData> icons;
  late int currentIndex;
  late Timer timer;

  @override
  void initState() {
    super.initState();
    icons = [
      Icons.library_books,
      Icons.wallet_membership,
      Icons.storage,
      Icons.media_bluetooth_off,
      Icons.plumbing,
      Icons.camera,
      Icons.shower,
      Icons.campaign,
      Icons.tv,
      Icons.stairs_sharp
    ];
    currentIndex = widget.index - 1;
    timer = Timer.periodic(Duration(seconds: 3), (Timer t) {
      setState(() {
        currentIndex = (currentIndex + 1) % icons.length;
      });
    });
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

  @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.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                'Item ${widget.index}',
                style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 5),
              Expanded(
                child: Container(
                  width: 35,
                  height: 35,
                  child: Icon(icons[currentIndex],
                  size: 25,
                  color: _generateRandomColor(),
                  ),
                ),
                ),

                // removing and adding item from the cart.
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    IconButton(onPressed: () {

                    }, 
                    icon: Icon(Icons.remove_shopping_cart),
                    ),
                    Text('1',
                    style: TextStyle(fontSize: 15.0),
                    ),
                    IconButton(onPressed: () {

                    },
                     icon: Icon(Icons.add_shopping_cart),
                     ),
                  ],
                )
              
              
            ],
          ),
        ),
      ),
    );
  }

  Color _generateRandomColor() {
    return Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
  }
}