flutter_shopping_app

Educational Flutter Shopping App demonstrating a complete mobile app development workflow: Dart fundamentals, interactive UI, user authentication, product catalog, cart functionality, smooth animations.

Overview

This Flutter project is designed as a step-by-step guide for beginner-to-intermediate developers to build a fully functional shopping app.
It covers core Dart programming concepts, Flutter UI development, user input validation, navigation with animations, state management using Provider.
The project simulates a real-world shopping interface and follows best practices in modular code structure, clean code, and documentation.

Features

• Welcome Screen with aesthetic design, app title, images, and Sign-Up/Sign-In buttons.
• User Authentication:
  • Sign-Up with validation (Full Name, Email, Password, Confirm Password)
  • Sign-In with validation (Email, Password)
  • Success dialogs with navigation to the shopping home screen
• Smooth Transitions:
  • Fade animations between Sign-Up/Sign-In and Home Screen
• Shopping Home Screen:
  • AppBar titled "Our Products" (or “منتجاتنا” in Arabic)
  • Horizontal PageView for featured product images
  • Responsive GridView (2 cards per row) with product images, titles, and Add-to-Cart button
  • SnackBar feedback when items are added to the cart
  • "Hot Offers" section using vertical ListView.builder
• Arabic Localization:
  • All texts appear in Arabic using .arb files
  • Sign-Up/Sign-In field labels and messages localized
• Responsive UI for different screen sizes
• State Management using Provider for cart functionality

Structure

flutter_shopping_app/ ├─ android/
├─ ios/
├─ assets/ │ ├─ images/ │ │ ├─ local_logo.png
│ │ ├─ product1.png │ │ ├─ product2.png │ │ └─ offer1.png │ └─ l10n/ │ ├─ intl_en.arb │ └─ intl_ar.arb ├─ lib/ │ ├─ main.dart │ ├─ models/ │ │ ├─ product.dart │ │ └─ cart_model.dart │ ├─ l10n/ │ │ └─ app_localizations.dart │ ├─ screens/ │ │ ├─ welcome_screen.dart │ │ ├─ sign_up_screen.dart │ │ ├─ sign_in_screen.dart │ │ └─ home_screen.dart │ └─ widgets/ │ ├─ product_card.dart │ └─ offer_item.dart ├─ pubspec.yaml └─ README.md