Home / App Templates / Flutter / UI Kits
ShopPro E-Commerce Flutter App UI TemplateShopPro E-Commerce Flutter App UI Template
Flutter e-commerce UI for Android & iOS: catalog, cart, checkout, wishlist, orders, profile, maps. MVVM, Provider, mock data.Home / App Templates / Flutter / UI Kits
ShopPro E-Commerce Flutter App UI Template
Flutter e-commerce UI for Android & iOS: catalog, cart, checkout, wishlist, orders, profile, ...
×
This item is temporarily not available for sale
Screenshots
Overview
🚀 ShopPro – Ultimate E-Commerce Flutter UI Template
ShopPro is a modern, production-ready Flutter UI template designed to help you build stunning e-commerce apps faster. Easily customize, connect your backend, and launch your app with a clean and scalable structure.
✨ Why Choose ShopPro?
- ✔️ Clean & Scalable Architecture
- ✔️ Reusable Widgets & Components
- ✔️ Easy API Integration (REST / GraphQL)
- ✔️ Localization Ready (JSON-based strings)
- ✔️ Developer-Friendly Code Structure
- ✔️ Ready-to-Run with Mock Data
- ✔️ Light & Dark Mode Ready
📱 Complete App Screens Included
- 🏠 Home, Categories & Filters
- 🛍️ Product Details (sizes, colors, reviews, offers)
- 🛒 Cart, Coupons & Checkout
- 📦 Order History & Tracking
- ❤️ Wishlist & Notifications
- 🎁 Offers & Promotions
- 🔐 Login, OTP & Onboarding
- 👤 Profile, Address & Settings
⚙️ Built for Developers
- Organized folder structure (Views, Widgets, Models, Utils)
- ViewModel-based state handling
- Easily replace mock data with real backend
- Clean, maintainable & scalable code
🎨 Beautiful UI & Assets
- SVG icons included
- 🌙 Built-in Dark Mode UI Support
- Lottie animation support
- Modern Inter font family
- Suitable for Fashion, Grocery, Beauty & Multi-store apps
🎯 Perfect For
- ✔️ Fashion E-Commerce Apps
- ✔️ Grocery Delivery Apps
- ✔️ Multi-vendor Marketplace
- ✔️ Startup MVP Projects
🔥 Start building your next e-commerce app today with ShopPro!
Features
- Flutter 3.x–compatible project (Dart SDK constraint in
pubspec.yaml) - Provider-based state management with dedicated ViewModels per feature
- Home with promotional content and category browsing
- Category and subcategory browsing
- Product listing with filters
- Rich product detail: gallery, variants, ratings & reviews section, delivery info, policies, similar products, size chart
- Shopping cart with quantity controls and coupon UI
- Wishlist
- Saved addresses and add-address flow
- Map-based confirm delivery / location (Google Maps Flutter)
- Checkout and place-order flow with payment method and add-card UI
- Order list and order tracking timeline
- Notifications and offers screens
- Onboarding, splash, login, and OTP-style screens
- Profile: edit profile, coupons, language selection
- App localization scaffold (JSON under
lib/lang) - Themed light and dark UI (colors, typography in dedicated style files)
- Mock data module for categories, products, orders, and more—easy to replace with API calls
- Android and iOS project files included
Requirements
- Flutter SDK installed and on PATH, matching the Dart SDK range declared in
pubspec.yaml(environment.sdk) - Dart (bundled with Flutter)
- Android: Android SDK, JDK 17 (as used by the included Android Gradle setup)
- iOS (optional): macOS, Xcode, CocoaPods for
pod installunderios/ - For map screens: valid Google Maps API key configuration for Android and iOS per Google’s documentation (project uses a placeholder key constant you must replace)
- Device or emulator with internet access if loading remote product images used in mock data
Instructions
- Unzip the package and open the project root in your IDE (VS Code or Android Studio with Flutter plugins).
- Run
flutter pub getin the project root. - Open
lib/utils/constants.dartand replace the map-related key with your own credentials from Google Cloud Console; restrict the key by platform as recommended. - Optional: change the application display name in
android/app/src/main/AndroidManifest.xml(android:label) and in Xcode for iOS (Display Name). - Optional: replace launcher icons under
android/app/src/main/res/mipmap-*andios/Runner/Assets.xcassets/AppIcon.appiconset. - Optional: change the Android
applicationIdandnamespaceinandroid/app/build.gradle.ktsand the iOS bundle identifier in Xcode to match your brand. - Run the app with
flutter run, or build a release APK withflutter build apk --release(output underbuild/app/outputs/flutter-apk/). - For iOS, run
cd iosthenpod install, then openios/Runner.xcworkspacein Xcode to run on a simulator or device and to archive for the App Store. - To connect a live backend, introduce your API base URL and networking layer, then replace reads from
lib/utils/mock_data.dart(and related ViewModel logic) with your services while keeping the existing UI structure. - Refer to
documentation/documentation.htmlanddocumentation/install_guide.txtin the package for the same steps in expanded form.
Other items by this author
Free support
Future product updates
Quality checked by Codester
Lowest price guarantee
Not available
Future product updates
Quality checked by Codester
Lowest price guarantee
Information
| Category | App Templates / Flutter / UI Kits |
| First release | 3 April 2026 |
| Last update | 14 April 2026 |
| Operating Systems | iOS 12.0, Android 10.0, iOS 14.0, iOS 13.0, iOS 15.0, Android 11.0, Android 12.0 |
| Files included | .html, .m, .swift, build.settings |
| Tags | android, iOS, ecommerce, cart, material design, checkout, mobile app, dart, google maps, wishlist, shopping app, provider, flutter, mvvm, onboarding |
