update md

2025-11-28 15:16:40 +07:00
parent 440b474504
commit 65f6f825a6
17 changed files with 73 additions and 0 deletions
--- a/docs/md/FONTAWESOME_ICON_MIGRATION.md
+++ b/docs/md/FONTAWESOME_ICON_MIGRATION.md
@@ -0,0 +1,227 @@
+# FontAwesome Icon Migration Guide
+
+## Package Added
+```yaml
+font_awesome_flutter: ^10.7.0
+```
+
+## Import Statement
+```dart
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+```
+
+## Icon Mapping Reference
+
+### Navigation Icons
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.arrow_back` | `FontAwesomeIcons.arrowLeft` | Back buttons |
+| `Icons.arrow_forward` | `FontAwesomeIcons.arrowRight` | Forward navigation |
+| `Icons.home` | `FontAwesomeIcons.house` | Home button |
+| `Icons.menu` | `FontAwesomeIcons.bars` | Menu/hamburger |
+| `Icons.close` | `FontAwesomeIcons.xmark` | Close buttons |
+
+### Shopping & Cart Icons
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.shopping_cart` | `FontAwesomeIcons.cartShopping` | Shopping cart |
+| `Icons.shopping_cart_outlined` | `FontAwesomeIcons.cartShopping` | Cart outline |
+| `Icons.shopping_bag` | `FontAwesomeIcons.bagShopping` | Shopping bag |
+| `Icons.shopping_bag_outlined` | `FontAwesomeIcons.bagShopping` | Bag outline |
+| `Icons.add_shopping_cart` | `FontAwesomeIcons.cartPlus` | Add to cart |
+
+### Action Icons
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.add` | `FontAwesomeIcons.plus` | Add/increment |
+| `Icons.remove` | `FontAwesomeIcons.minus` | Remove/decrement |
+| `Icons.delete` | `FontAwesomeIcons.trash` | Delete |
+| `Icons.delete_outline` | `FontAwesomeIcons.trashCan` | Delete outline |
+| `Icons.edit` | `FontAwesomeIcons.pen` | Edit |
+| `Icons.check` | `FontAwesomeIcons.check` | Checkmark |
+| `Icons.check_circle` | `FontAwesomeIcons.circleCheck` | Check circle |
+| `Icons.refresh` | `FontAwesomeIcons.arrowsRotate` | Refresh |
+
+### Status & Feedback Icons
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.error` | `FontAwesomeIcons.circleXmark` | Error |
+| `Icons.error_outline` | `FontAwesomeIcons.circleExclamation` | Error outline |
+| `Icons.warning` | `FontAwesomeIcons.triangleExclamation` | Warning |
+| `Icons.info` | `FontAwesomeIcons.circleInfo` | Info |
+| `Icons.info_outline` | `FontAwesomeIcons.circleInfo` | Info outline |
+
+### UI Elements
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.search` | `FontAwesomeIcons.magnifyingGlass` | Search |
+| `Icons.filter_list` | `FontAwesomeIcons.filter` | Filter |
+| `Icons.sort` | `FontAwesomeIcons.arrowDownAZ` | Sort |
+| `Icons.more_vert` | `FontAwesomeIcons.ellipsisVertical` | More options |
+| `Icons.more_horiz` | `FontAwesomeIcons.ellipsis` | More horizontal |
+
+### Calendar & Time
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.calendar_today` | `FontAwesomeIcons.calendar` | Calendar |
+| `Icons.date_range` | `FontAwesomeIcons.calendarDays` | Date range |
+| `Icons.access_time` | `FontAwesomeIcons.clock` | Time |
+
+### Payment Icons
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.payment` | `FontAwesomeIcons.creditCard` | Credit card |
+| `Icons.payments` | `FontAwesomeIcons.creditCard` | Payments |
+| `Icons.payments_outlined` | `FontAwesomeIcons.creditCard` | Payment outline |
+| `Icons.account_balance` | `FontAwesomeIcons.buildingColumns` | Bank |
+| `Icons.account_balance_outlined` | `FontAwesomeIcons.buildingColumns` | Bank outline |
+| `Icons.account_balance_wallet` | `FontAwesomeIcons.wallet` | Wallet |
+
+### Media & Images
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.image` | `FontAwesomeIcons.image` | Image |
+| `Icons.image_not_supported` | `FontAwesomeIcons.imageSlash` | No image |
+| `Icons.photo_camera` | `FontAwesomeIcons.camera` | Camera |
+| `Icons.photo_library` | `FontAwesomeIcons.images` | Gallery |
+
+### User & Profile
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.person` | `FontAwesomeIcons.user` | User |
+| `Icons.person_outline` | `FontAwesomeIcons.user` | User outline |
+| `Icons.account_circle` | `FontAwesomeIcons.circleUser` | Account |
+
+### Communication
+| Material Icon | FontAwesome Icon | Usage |
+|---------------|------------------|-------|
+| `Icons.chat` | `FontAwesomeIcons.message` | Chat |
+| `Icons.chat_bubble` | `FontAwesomeIcons.commentDots` | Chat bubble |
+| `Icons.notifications` | `FontAwesomeIcons.bell` | Notifications |
+| `Icons.phone` | `FontAwesomeIcons.phone` | Phone |
+| `Icons.email` | `FontAwesomeIcons.envelope` | Email |
+
+## Usage Examples
+
+### Before (Material Icons)
+```dart
+Icon(Icons.shopping_cart, size: 24, color: Colors.blue)
+Icon(Icons.add, size: 16)
+IconButton(
+  icon: Icon(Icons.delete_outline),
+  onPressed: () {},
+)
+```
+
+### After (FontAwesome)
+```dart
+FaIcon(FontAwesomeIcons.cartShopping, size: 24, color: Colors.blue)
+FaIcon(FontAwesomeIcons.plus, size: 16)
+IconButton(
+  icon: FaIcon(FontAwesomeIcons.trashCan),
+  onPressed: () {},
+)
+```
+
+## Size Guidelines
+
+FontAwesome icons tend to be slightly larger than Material icons at the same size. Recommended adjustments:
+
+| Material Size | FontAwesome Size | Notes |
+|---------------|------------------|-------|
+| 24 (default) | 20-22 | Standard icons |
+| 20 | 18 | Small icons |
+| 16 | 14-15 | Tiny icons |
+| 48 | 40-44 | Large icons |
+| 64 | 56-60 | Extra large |
+
+## Color Usage
+
+FontAwesome icons use the same color properties:
+```dart
+// Both work the same
+Icon(Icons.add, color: AppColors.primaryBlue)
+FaIcon(FontAwesomeIcons.plus, color: AppColors.primaryBlue)
+```
+
+## Common Issues & Solutions
+
+### Issue 1: Icon Size Mismatch
+**Problem**: FontAwesome icons appear larger than expected
+**Solution**: Reduce size by 2-4 pixels
+```dart
+// Before
+Icon(Icons.add, size: 24)
+
+// After
+FaIcon(FontAwesomeIcons.plus, size: 20)
+```
+
+### Issue 2: Icon Alignment
+**Problem**: Icons not centered properly
+**Solution**: Use `IconTheme` or wrap in `SizedBox`
+```dart
+SizedBox(
+  width: 24,
+  height: 24,
+  child: FaIcon(FontAwesomeIcons.plus, size: 18),
+)
+```
+
+### Issue 3: Icon Not Found
+**Problem**: Icon name doesn't match
+**Solution**: Check FontAwesome documentation or use search
+```dart
+// Use camelCase, not snake_case
+// ❌ FontAwesomeIcons.shopping_cart
+// ✅ FontAwesomeIcons.cartShopping
+```
+
+## Migration Checklist
+
+- [x] Add `font_awesome_flutter` to pubspec.yaml
+- [x] Run `flutter pub get`
+- [ ] Update all `Icons.*` to `FontAwesomeIcons.*`
+- [ ] Replace `Icon()` with `FaIcon()`
+- [ ] Adjust icon sizes as needed
+- [ ] Test visual appearance
+- [ ] Update documentation
+
+## Cart Feature Icon Updates
+
+### Files to Update
+1. `lib/features/cart/presentation/pages/cart_page.dart`
+2. `lib/features/cart/presentation/pages/checkout_page.dart`
+3. `lib/features/cart/presentation/widgets/cart_item_widget.dart`
+4. `lib/features/cart/presentation/widgets/payment_method_section.dart`
+5. `lib/features/cart/presentation/widgets/checkout_date_picker_field.dart`
+
+### Specific Replacements
+
+#### cart_page.dart
+- `Icons.arrow_back` → `FontAwesomeIcons.arrowLeft`
+- `Icons.delete_outline` → `FontAwesomeIcons.trashCan`
+- `Icons.error_outline` → `FontAwesomeIcons.circleExclamation`
+- `Icons.refresh` → `FontAwesomeIcons.arrowsRotate`
+- `Icons.shopping_cart_outlined` → `FontAwesomeIcons.cartShopping`
+- `Icons.shopping_bag_outlined` → `FontAwesomeIcons.bagShopping`
+- `Icons.check` → `FontAwesomeIcons.check`
+
+#### cart_item_widget.dart
+- `Icons.image_not_supported` → `FontAwesomeIcons.imageSlash`
+- `Icons.remove` → `FontAwesomeIcons.minus`
+- `Icons.add` → `FontAwesomeIcons.plus`
+- `Icons.check` → `FontAwesomeIcons.check`
+
+#### payment_method_section.dart
+- `Icons.account_balance_outlined` → `FontAwesomeIcons.buildingColumns`
+- `Icons.payments_outlined` → `FontAwesomeIcons.creditCard`
+
+#### checkout_date_picker_field.dart
+- `Icons.calendar_today` → `FontAwesomeIcons.calendar`
+
+## Resources
+
+- [FontAwesome Flutter Package](https://pub.dev/packages/font_awesome_flutter)
+- [FontAwesome Icon Gallery](https://fontawesome.com/icons)
+- [FontAwesome Flutter Gallery](https://github.com/fluttercommunity/font_awesome_flutter/blob/master/GALLERY.md)