|
| 1 | +import 'package:flutter/material.dart'; |
| 2 | +import 'package:flutter_ecommerce_furniture/core/ext/buildcontext_ext.dart'; |
| 3 | +import 'package:flutter_ecommerce_furniture/features/product_details/data/mock_data_repo.dart'; |
| 4 | +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; |
| 5 | + |
| 6 | +import '../../../config/theme/styles.dart'; |
| 7 | +import '../../../core/utils/number_utils.dart'; |
| 8 | +import '../../../core/wigets/circle_background_widget.dart'; |
| 9 | +import '../../../core/wigets/product_image.dart'; |
| 10 | +import '../../product_details/presentation/widgets/checkout_group_button.dart'; |
| 11 | +import '../../product_details/presentation/widgets/number_selection.dart'; |
| 12 | +import '../../product_list/data/mock_product_list.dart'; |
| 13 | + |
| 14 | +const _rowSize = 120.0; |
| 15 | +const _padding = 12.0; |
| 16 | + |
| 17 | +class CartPage extends StatefulWidget { |
| 18 | + const CartPage({super.key}); |
| 19 | + |
| 20 | + @override |
| 21 | + State<CartPage> createState() => _CartPageState(); |
| 22 | +} |
| 23 | + |
| 24 | +class _CartPageState extends State<CartPage> { |
| 25 | + final _listColors = listProductColorsMap.entries.toList(); |
| 26 | + |
| 27 | + List<Map<String, dynamic>> _cartProductList = |
| 28 | + recommendedProductList.sublist(0, 6); |
| 29 | + |
| 30 | + final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>(); |
| 31 | + |
| 32 | + double _totalPrice = 0.0; |
| 33 | + |
| 34 | + void removeItem(int index) { |
| 35 | + _listKey.currentState!.removeItem( |
| 36 | + index, |
| 37 | + (context, animation) => _buildCartItem(index, animation), |
| 38 | + ); |
| 39 | + |
| 40 | + _cartProductList.removeAt(index); |
| 41 | + } |
| 42 | + |
| 43 | + void refreshList() { |
| 44 | + setState(() { |
| 45 | + _cartProductList = recommendedProductList.sublist(0, 6); |
| 46 | + }); |
| 47 | + } |
| 48 | + |
| 49 | + @override |
| 50 | + Widget build(BuildContext context) { |
| 51 | + return Container( |
| 52 | + padding: const EdgeInsets.symmetric(horizontal: 8), |
| 53 | + color: Colors.transparent, |
| 54 | + child: Column( |
| 55 | + crossAxisAlignment: CrossAxisAlignment.start, |
| 56 | + children: [ |
| 57 | + const SizedBox( |
| 58 | + height: 56, |
| 59 | + ), |
| 60 | + const Row( |
| 61 | + mainAxisAlignment: MainAxisAlignment.spaceBetween, |
| 62 | + children: [ |
| 63 | + Text( |
| 64 | + 'My Cart', |
| 65 | + style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), |
| 66 | + ), |
| 67 | + FaIcon(FontAwesomeIcons.search) |
| 68 | + ], |
| 69 | + ), |
| 70 | + const SizedBox(height: 8), |
| 71 | + Expanded( |
| 72 | + child: AnimatedList( |
| 73 | + key: _listKey, |
| 74 | + initialItemCount: _cartProductList.length, |
| 75 | + itemBuilder: (BuildContext context, int index, animation) => |
| 76 | + _buildCartItem(index, animation), |
| 77 | + ), |
| 78 | + ), |
| 79 | + CheckoutGroupButton( |
| 80 | + price: _totalPrice, |
| 81 | + onPressed: () { |
| 82 | + //TODO goto checkout cart |
| 83 | + }, |
| 84 | + actionText: 'Check out', |
| 85 | + ) |
| 86 | + ], |
| 87 | + ), |
| 88 | + ); |
| 89 | + } |
| 90 | + |
| 91 | + Widget _buildCartItem(int index, Animation<double> animation) { |
| 92 | + if (index > _cartProductList.length - 1) return Container(); |
| 93 | + Map<String, dynamic> item = _cartProductList[index]; |
| 94 | + return FadeTransition( |
| 95 | + opacity: animation, |
| 96 | + child: SizeTransition( |
| 97 | + sizeFactor: animation, |
| 98 | + child: CartRowProductItem( |
| 99 | + product: item, |
| 100 | + selectedColor: _listColors[index].value, |
| 101 | + selectedColorName: _listColors[index].key, |
| 102 | + onRemoved: (product) { |
| 103 | + removeItem(_cartProductList.indexOf(product)); |
| 104 | + }, |
| 105 | + onItemPriceChanged: (double itemPrice) { |
| 106 | + _calculateTotalPrice(itemPrice); |
| 107 | + }, |
| 108 | + ), |
| 109 | + ), |
| 110 | + ); |
| 111 | + } |
| 112 | + |
| 113 | + _calculateTotalPrice(double itemPrice) { |
| 114 | + setState(() { |
| 115 | + _totalPrice = itemPrice; |
| 116 | + }); |
| 117 | + } |
| 118 | +} |
| 119 | + |
| 120 | +class CartRowProductItem extends StatefulWidget { |
| 121 | + final Map<String, dynamic> product; |
| 122 | + final Color selectedColor; |
| 123 | + final String selectedColorName; |
| 124 | + final ValueChanged<Map<String, dynamic>> onRemoved; |
| 125 | + final ValueChanged<double> onItemPriceChanged; |
| 126 | + |
| 127 | + const CartRowProductItem({ |
| 128 | + super.key, |
| 129 | + required this.product, |
| 130 | + required this.selectedColor, |
| 131 | + required this.selectedColorName, |
| 132 | + required this.onRemoved, |
| 133 | + required this.onItemPriceChanged, |
| 134 | + }); |
| 135 | + |
| 136 | + @override |
| 137 | + State<CartRowProductItem> createState() => _CartRowProductItemState(); |
| 138 | +} |
| 139 | + |
| 140 | +class _CartRowProductItemState extends State<CartRowProductItem> { |
| 141 | + int _numberItem = 1; |
| 142 | + double _itemPrice = 0.0; |
| 143 | + |
| 144 | + @override |
| 145 | + void initState() { |
| 146 | + _itemPrice = widget.product['price'] * _numberItem; |
| 147 | + super.initState(); |
| 148 | + } |
| 149 | + |
| 150 | + @override |
| 151 | + Widget build(BuildContext context) { |
| 152 | + final isDark = context.isDarkModeEnabled; |
| 153 | + return Padding( |
| 154 | + padding: const EdgeInsets.all(8.0), |
| 155 | + child: Stack( |
| 156 | + children: [ |
| 157 | + Container( |
| 158 | + height: _rowSize, |
| 159 | + decoration: BoxDecoration( |
| 160 | + color: isDark |
| 161 | + ? Styles.textFieldBackgroundDark |
| 162 | + : Styles.textFieldBackgroundLight, |
| 163 | + borderRadius: BorderRadius.circular(20), |
| 164 | + )), |
| 165 | + Padding( |
| 166 | + padding: const EdgeInsets.all(8), |
| 167 | + child: Row( |
| 168 | + crossAxisAlignment: CrossAxisAlignment.center, |
| 169 | + mainAxisSize: MainAxisSize.max, |
| 170 | + children: [ |
| 171 | + ProductImage( |
| 172 | + size: _rowSize - _padding * 2, |
| 173 | + path: widget.product['image']), |
| 174 | + const SizedBox(width: 16), |
| 175 | + _buildRightContent(), |
| 176 | + ], |
| 177 | + ), |
| 178 | + ) |
| 179 | + ], |
| 180 | + ), |
| 181 | + ); |
| 182 | + } |
| 183 | + |
| 184 | + Widget _buildRightContent() { |
| 185 | + return Expanded( |
| 186 | + child: Container( |
| 187 | + padding: const EdgeInsets.all(8), |
| 188 | + child: Column( |
| 189 | + children: [ |
| 190 | + _buildTitleAndRemoveIcon(), |
| 191 | + const SizedBox(height: 8), |
| 192 | + _buildColorContent(), |
| 193 | + const SizedBox(height: 8), |
| 194 | + _buildPriceAndQuantity() |
| 195 | + ], |
| 196 | + ), |
| 197 | + ), |
| 198 | + ); |
| 199 | + } |
| 200 | + |
| 201 | + Widget _buildPriceAndQuantity() { |
| 202 | + return Row( |
| 203 | + mainAxisSize: MainAxisSize.max, |
| 204 | + mainAxisAlignment: MainAxisAlignment.spaceBetween, |
| 205 | + children: [ |
| 206 | + Text( |
| 207 | + '\$${currencyFormat.format(_itemPrice)}', |
| 208 | + style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold), |
| 209 | + ), |
| 210 | + NumberSelection( |
| 211 | + height: 20, |
| 212 | + numberSize: 12, |
| 213 | + iconSize: 10, |
| 214 | + numberInitial: 2, |
| 215 | + onChanged: (number) { |
| 216 | + setState(() { |
| 217 | + _numberItem = number; |
| 218 | + _itemPrice = widget.product['price'] * _numberItem; |
| 219 | + widget.onItemPriceChanged.call(_itemPrice); |
| 220 | + }); |
| 221 | + }, |
| 222 | + ) |
| 223 | + ], |
| 224 | + ); |
| 225 | + } |
| 226 | + |
| 227 | + Widget _buildColorContent() { |
| 228 | + return Row( |
| 229 | + children: [ |
| 230 | + CircularBackgroundWidget( |
| 231 | + size: 24, |
| 232 | + backgroundColor: widget.selectedColor, |
| 233 | + child: null, |
| 234 | + ), |
| 235 | + const SizedBox(width: 8), |
| 236 | + Text(widget.selectedColorName, style: const TextStyle(fontSize: 14)) |
| 237 | + ], |
| 238 | + ); |
| 239 | + } |
| 240 | + |
| 241 | + Widget _buildTitleAndRemoveIcon() { |
| 242 | + return Row( |
| 243 | + mainAxisSize: MainAxisSize.max, |
| 244 | + mainAxisAlignment: MainAxisAlignment.spaceBetween, |
| 245 | + children: [ |
| 246 | + Expanded( |
| 247 | + child: Text( |
| 248 | + widget.product['title'], |
| 249 | + maxLines: 1, |
| 250 | + overflow: TextOverflow.ellipsis, |
| 251 | + style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold), |
| 252 | + ), |
| 253 | + ), |
| 254 | + GestureDetector( |
| 255 | + onTap: () { |
| 256 | + widget.onRemoved.call(widget.product); |
| 257 | + }, |
| 258 | + child: const Padding( |
| 259 | + padding: EdgeInsets.symmetric(horizontal: 8), |
| 260 | + child: FaIcon(FontAwesomeIcons.trashCan, size: 18), |
| 261 | + ), |
| 262 | + ), |
| 263 | + ], |
| 264 | + ); |
| 265 | + } |
| 266 | +} |
0 commit comments