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