Modern Shoes Online App UI

A modern, Nike-inspired shoes e-commerce mobile UI built with Flutter.
This project focuses on a clean, animated shopping experience: product listing, product detail with carousel, and a minimal cart flow.

---

Overview

• Platform: Flutter (Android & iOS)
• Language: Dart (SDK constraint >=2.7.0 <3.0.0)
• Primary goal: Showcase a polished e-commerce UI for shoes, not a full backend-integrated store.

---

Features

• Home screen

  • Product list of Nike shoes built from static data.
  • Animated list items using animate_do (fade-in on scroll).
  • Custom top AppBar with:
    • Burger menu button leading to the menu screen.
    • Search and filter icons.
    • Cart icon with a badge (hard-coded item count).

• Product detail

  • Full-width image carousel using carousel_slider.
  • Additional hero image and Nike logo.
  • Product name, price, and selectable sizes (horizontal scroll).
  • "Add to cart" button and favorite (heart) button.

• Cart page

  • Simple "My Bag" list with 3 example products.
  • Each item shows product image, name, price, and quantity.
  • Total amount section and a "CHECKOUT" button (no real payment flow).

• Menu page

  • Full-screen menu with large typography.
  • Items like "Home", "New in", "Sale", "Profile", "Log out".
  • Tapping any item currently navigates back to HomePage.

• Visuals & theming

  • Custom colors defined in lib/theme/colors.dart.
  • Custom font Averta loaded from assets/fonts/Averta-Std.ttf.
  • High-quality Nike shoe images stored in assets/images/.

---

Tech Stack & Dependencies

• Flutter

  • Uses MaterialApp with a custom font theme.

• Dart

  • Pre-null-safety constraints: sdk: ">=2.7.0 <3.0.0".

• Key packages (from pubspec.yaml):

  • flutter_svg: render SVG icons (burger, search, filter, heart).
  • carousel_slider: image carousel on the product detail page.
  • animate_do: entry animations for list items and components.
  • cupertino_icons, line_icons (base icon support).

---

Project Structure

Main relevant folders and files:

• lib/

  • main.dart
    • Entry point; sets up MaterialApp, global font, and HomePage as the home widget.
  • pages/
    • home_page.dart – Product listing screen, uses products and getAppBar.
    • product_detail_page.dart – Detailed view with images, sizes, and "Add to cart".
    • cart_page.dart – Simple cart UI with total price and checkout button.
    • menu_page.dart – Full-screen side menu shown from the burger icon.
  • widgets/
    • app_bar.dart – Custom app bar with burger, search, filter, and cart icons.
    • product_slider.dart – Carousel slider component with active/inactive dots.
  • constant/
    • product_data.dart – Static list of product data (id, name, price, images, sizes).
  • theme/
    • colors.dart – Color constants used across the UI (primary, white, black, grey).

• assets/

  • images/
    • Product images (multiple angles per shoe).
    • UI icons: burger_icon.svg, search_icon.svg, filter_icon.svg, heart_icon.svg.
    • Branding: nike_logo.png.
  • fonts/
    • Averta-Std.ttf configured as family Averta in pubspec.yaml.

• Platform folders

  • android/, ios/ – Standard Flutter-generated platform code.

---

Running the App

1. Prerequisites

   • Flutter SDK installed (flutter doctor passes).
   • Android Studio / Xcode set up for device emulators or a physical device connected.

2. Clone and install dependencies

   git clone <this-repo-url>
   cd app.mobile.shoes-online-app-ui
   flutter pub get

3. Run on a device or emulator

   flutter run

   • Select your preferred device from the device list in your IDE or via CLI.

---

Customization Guide

• Change products

  • Edit lib/constant/product_data.dart.
  • Each product includes:
    • id, img, name, price
    • mul_img (list of images for the slider)
    • sizes (list of available sizes as strings)

• Change colors

  • Update values in lib/theme/colors.dart (e.g., primary, grey, black, white).

• Change font

  • Replace assets/fonts/Averta-Std.ttf with your font file.
  • Update the fonts section in pubspec.yaml accordingly.
  • Adjust ThemeData(fontFamily: 'Averta') in lib/main.dart if you rename the family.

• Icons and images

  • Place new images in assets/images/.
  • Ensure paths match the code references in pages and widgets.
  • If you add new asset folders, also update the assets: section in pubspec.yaml.

---

Limitations & Notes

• Static data only: No backend, API integration, or real authentication.
• Cart logic is minimal:
  • Cart item count and totals are essentially hard-coded examples.
  • "ADD TO CART" and "CHECKOUT" buttons have no real business logic.
• Pre-null-safety code:
  • The project is written for Dart < 2.12 (no null-safety).
  • You can migrate it to null-safety if you plan to use newer Dart/Flutter versions.

---

Possible Next Improvements

• Implement real cart state management and totals (e.g., using Provider, Bloc, or Riverpod).
• Add search and filter functionality to the home screen.
• Integrate with a real backend / API for product data.
• Add user authentication and profile screens.
• Implement responsive layout tweaks for tablets.

---

License

Specify your preferred license here (e.g., MIT, Apache 2.0) if you plan to open source this project.