Shoppe App is a modern E-commerce Flutter application that delivers a clean, smooth, and elegant shopping experience.
The app follows Clean Architecture principles and uses Dependency Injection, GoRouter, and Cubit for structured and maintainable code.
Shoppe App focuses on providing a delightful user journey , starting from a visually appealing Splash & Onboarding experience,
all the way to secure authentication and personalized shopping.
| Category | Tools / Packages |
|---|---|
| Framework | Flutter |
| Routing | GoRouter |
| Dependency Injection | get_it |
| State Management | Cubit / Bloc |
| Responsive UI | flutter_screenutil |
| SVG Support | flutter_svg |
| Styling | AppColors & AppTextStyles (Custom Design System) |
- 🖼️ Splash & Onboarding flow
- 🔐 Authentication (Login, Signup, Forget Password, Verification)
- 🛒 Shopping flow with user preferences
- 💬 Clean navigation with GoRouter
- 🎨 Fully responsive & adaptive design
- ⚙️ Modular architecture with Dependency Injection
The Splash Screen is the app’s entry point, introducing users with an animated logo transition before moving to the onboarding view.
- Smooth logo animation using
AnimatedPositioned - Custom transition curve (
Curves.easeOutBack) - Auto navigation using
GoRouter - Primary theme color background
- Responsive layout using
flutter_screenutil
flutter_screenutil: For responsive UI design
flutter_svg: For rendering SVG logos
go_router: For route navigationThe Onboarding Screen introduces users to the app’s look and style while allowing them to choose their gender preference before continuing.
The screen features a stylish gradient background, glowing visual effects, and interactive gender selection buttons (Men/Women).
It’s built to create an elegant and modern first impression for the user.
- 🎨 Gradient background with smooth color transitions
- 💡 Glow effect using
BackdropFilterandImageFilter.blur - 👕 Gender selection buttons: Men / Women
- ⏭️ Skip option for quick access
- 🚀 Navigation to the social authentication screen using
GoRouter - 📱 Fully responsive design using
flutter_screenutil
flutter_screenutil: For responsive scaling
go_router: For navigation
get_it: For dependency injection
Shoppe App uses a robust and clean authentication system built on top of a well-structured networking layer
that follows Clean Architecture principles and utilizes Dio, Retrofit, and Dependency Injection (get_it).
The app connects to the official backend:
The app connects to a live RESTful API hosted at
https://accessories-eshop.runasp.net/
lib/core/networking/
│
├── api_constants.dart # Base URLs & Endpoints
├── api_service.dart # Retrofit interface for API calls
├── api_service.g.dart # Auto-generated file by Retrofit
├── dio_factory.dart # Custom Dio configuration (headers, interceptors, timeouts)
├── api_error_handler.dart # Centralized error handling
├── api_error_model.dart # Model for API errors
├── api_result.dart # Wrapper for success/failure results
├── api_result.freezed.dart # Generated file using Freezed
The Authentication flow in Shoppe App provides a complete and secure user experience —
from signing up and verifying the account via email OTP, to logging in and resetting forgotten passwords.
| Endpoint | Description |
|---|---|
auth/register |
Register a new user with email, name, and password |
auth/login |
Authenticate existing user credentials |
auth/verify-email |
Send OTP to verify the registered email |
auth/validate-otp |
Validate OTP code to confirm user identity |
auth/resend-otp |
Resend OTP code in case the first one expires |
| Purpose | Package |
|---|---|
| HTTP Client | dio |
| API Abstraction | retrofit |
| Code Generation | build_runner, retrofit_generator |
| Error Handling | freezed, json_serializable |
| Dependency Injection | get_it |
| Logging | pretty_dio_logger, logger |
| Secure Token Storage | flutter_secure_storage |
- 📩 Email verification flow with OTP
- 🔐 Login & Signup integration with real API
- 🔁 Resend OTP functionality
- 🔒 Password recovery (Forget Password & New Password screens)
- 🧩 Fully handled via Cubit states (loading, success, error)
- 🚦 Navigation using GoRouter
- 📱 Responsive design using flutter_screenutil
This section showcases all Login & Forget Password related screens , including Social Authentication, Email/Password Login, and Password Recovery Flow.
This section covers the user registration flow, including email verification and OTP validation. Users can easily create a new account, verify their email, and activate their profile securely.
Other features will be added soon... stay tuned for the upcoming updates! 💫