ShopKit - Flutter E-Commerce App Template with 10 app themes and 192 screens

Ten Ready App Themes – One Flutter E-Commerce App Template

ShopKit is a production-ready Flutter e-commerce app template for developers who ship. Instead of one generic shopping template, you get ten fully designed niche app themes – each with its own color system, typography and screen flow – plus a 48-screen Core Kit that covers every standard commerce journey from splash to order tracking.

Every screen is hand-written Flutter code built from a pixel-perfect 390×844 design source. No auto-generated widgets, no placeholder filler, no bloated dependency list. The whole template runs on bundled mock data, so you can open it and click through all 192 screens without setting up a single service.

Live Demo: shopkit.webkodingtheme.com
Android APK: Download the demo APK – all ten themes in one app
Browse every screen in your browser: shopkit.webkodingtheme.com/demo
Documentation: shopkit.webkodingtheme.com/docs

Important – Please Read Before You Buy: Third-Party Services Cost Extra

ShopKit is a front-end app template. It ships with mock data and contains no backend, no payment processing, no push notifications, no maps, no chat and no augmented reality. Every screen you see is a designed Flutter screen driven by sample data bundled inside the app.

If you want any of those features to actually work, you must sign up for third-party services and pay those providers directly. Those costs are external, they are set by the providers, they can change at any time, and they are NOT included in the price of this item. This applies to all of the following:

• Augmented reality (the Nest “view in your room” screen). That screen is a static UI layout only – a designed Flutter screen with a placeholder image. It has no camera access, no 3D rendering and no AR functionality, and ShopKit bundles no AR package. Making it work requires a third-party AR SDK or a hosted 3D/AR commerce service at your own additional expense: expect a monthly subscription or per-view charge, paid creation or conversion of a 3D model for every product, and usage-based hosting and bandwidth for those models.
• Backend and hosting (Firebase, Supabase, a custom API or any headless commerce platform) – monthly plans and usage charges. Not included.
• Payment gateways (Stripe, PayPal, iyzico and similar) – per-transaction fees set by the provider. Not included.
• Push notifications, maps and chat – each requires its own paid third-party account. Not included.
• Google Play Console (one-off registration fee) and the Apple Developer Program (annual fee) – required to publish your app to the stores. Not included.

Please check each provider’s current pricing before you plan a project around any of these features. A fuller explanation is in the “Third-Party Services and Costs” section further down this page, and the same warning is repeated in the included documentation and README.

ShopKit ten niche app themes - Core Kit, Electro, Aura, Pawly, Fresho, Fold, Glow, Nest, Peak, Tods

Ten Niche App Themes

Core Kit – 48 screens. The complete general-purpose store: auth, catalog, product, cart, checkout, orders, profile, dark variants and every empty and error state.

Electro – 17 screens. Dark tech aesthetic with a cyan accent and Space Grotesk. Spec cards and comparison-friendly product layouts.

Aura – 16 screens. Luxury jewelry and fashion. Cormorant Garamond serif, gold accents, editorial whitespace.

Pawly – 16 screens. Pet shop with Nunito, super-rounded shapes, pet profiles and subscription products.

Fresho – 15 screens. Grocery delivery with Manrope, unit pricing, quantity controls and delivery-slot selection.

Fold – 16 screens. Black-and-white fashion lookbook. Archivo plus Playfair italic, sharp corners, editorial feel.

Glow – 16 screens. Beauty and skincare in powder pink with Lora and Karla. Skin-type badges, routine steps, sample picker.

Nest – 16 screens. Furniture and home in warm neutrals and terracotta. Room-based browsing plus an AR preview screen – a static UI layout only, with no AR functionality behind it. Turning it into working AR requires a paid third-party AR service at your own expense (see “Third-Party Services and Costs” below).

Peak – 15 screens. Sport and fitness. Dark plus volt, Barlow Condensed, diagonal energy.

Tods – 17 screens. Kids and gifts. Baloo 2, primary colors, age-group filters and a gift-box builder.

Every theme covers the same core journey – home, catalog, product detail, cart, checkout, order success, tracking, search, profile – so whichever one you ship, nothing is missing.

ShopKit 192 screens across ten themes, all built at 390x844

192 Screens, Not Placeholders

48 Core Kit screens plus 144 niche screens. Each one is a real Flutter widget tree laid out at 390×844, not a stub with a title and a button. Screen files map one-to-one onto the design source: S17 becomes s17_product_detail.dart, E05 becomes e05.dart, so finding the code behind a screenshot takes seconds.

The included documentation ships a gallery of real screenshots grouped by theme, captured from the running apps, so you can see exactly what you are buying before you open a single file.

ShopKit architecture - shopkit_core UI layer, shopkit_domain interfaces, template apps with mock or remote repositories

Clean Architecture That Stays Clean

ShopKit is a small monorepo with an enforced dependency direction. shopkit_core holds every theme, shared Sk* widget and Core Kit screen – and it is forbidden from importing http, dio or any API client. shopkit_domain holds plain models and abstract repository interfaces with typed AppFailure error handling. Each template app supplies the implementations.

That means connecting a backend never touches a screen file. Write your repository implementations against the interfaces, swap AppRepositories.mock() for your own factory in main.dart, and all 192 screens keep working.

Ship one theme, not ten. Most buyers need a single app. Run shopkit/tools/extract_template.sh electro ~/my-app and you get a minimal standalone Flutter project containing only shopkit_core, shopkit_domain and the theme you picked – no dead code shipped to the store.

ShopKit features - Material 3, dark mode, GoRouter, Google Fonts, shared widgets, pixel-perfect, clean Dart, extract script, documentation, tests

Feature Highlights

Material 3 theming – Each theme implements a shared ShopKitTheme contract with explicit tokens for background, surface, text, accent, border, status colors, radius scale and typography. Change one brand color and it propagates through every screen.

Dark mode – Dark tokens across the kit plus dedicated dark screens for home, product detail and cart, so you can see the treatment applied end to end. Electro is dark by default.

GoRouter navigation – Every template ships a complete declarative route map with named routes and custom page transitions.

Reusable widget library – SkPrimaryButton, SkProductCard, SkOrderCard, SkBottomNav, SkAppBar, SkShopkitDialog, SkSnackbar, inputs, chips, quantity steppers and empty-state layouts. Prefixed, documented and reused across all ten themes.

Typed error handling – AppFailure variants (network, auth, validation, notFound, server) in the domain layer, so real API errors map cleanly onto UI states that already exist.

Interactive HTML design source, included – Every screen was built from a pixel-perfect 390×844 HTML design source, and that design source ships inside the download in design-source/. It opens in your web browser – no Photoshop, Figma, Sketch or XD needed – and a plain-language index names every file. Browse the same thing before buying in the online demo. The documentation maps every design token to code.

A short dependency list – Plain Flutter and Dart. The only third-party packages are google_fonts and go_router. No proprietary runtime, no license server, no obfuscated code.

ShopKit quick start - extract template, flutter create, flutter run

Getting Started

The download is a Flutter monorepo. Open documentation/index.html for the full guide, or run the Core Kit demo straight away:

New to Flutter? A 50-second setup video is included in the download – documentation/video/setup-walkthrough.mp4, playable offline. It shows the entire first run with nothing sped up or staged: unzipping the download, the two setup commands, then the app launching on a simulator and a product opening.

cd shopkit/templates/core_kit
flutter pub get
flutter create . --platforms=ios,android --project-name my_shop --org com.yourbrand
flutter run

To ship a single niche theme, use the extract script instead – it copies only shopkit_core, shopkit_domain and your chosen template into a clean standalone project with the path dependencies already rewritten.

Documentation

A single self-contained HTML guide, readable offline, covering:

Screen gallery – real screenshots grouped by theme
Core user flows – a walkthrough from splash through checkout to order tracking, with the route constant and screen file for every step
Branding guide – change colors, fonts, logo, app name and icon without writing Dart; exact files and values to edit
Replacing the placeholder images – step by step, both the quick URL swap and the fully offline asset route
Design files – what every file in design-source/ is and what to open it with, written for people who have never used design software
Troubleshooting – the common first-run errors with their actual messages and fixes
Reference – project structure, theming, components, routing and FAQ

What’s Included

shopkit_core – 10 themes, the shared Sk* widget library, 48 Core Kit screens, route transitions
shopkit_domain – models and abstract repository interfaces with typed failures
11 runnable apps – Core Kit, Electro, Aura, Pawly, Fresho, Fold, Glow, Nest, Peak, Tods, plus a showcase hub that browses them all
Tools – single-theme extractor and app-icon generator
Design source – every screen design as a browsable web page plus the 1024×1024 app-icon PNG, with a plain-language index; no Photoshop, Figma or other design software needed
Documentation – the full HTML guide described above, plus a 50-second offline setup walkthrough video
Tests – a boot smoke test per template plus router flow tests for the Core Kit

ShopKit - ten apps, one purchase

Try it before you buy: Live demo · Android APK · All screens · Documentation

Requirements

Flutter SDK 3.24 or newer
Dart 3.3 or newer
Android Studio or VS Code with the Flutter extension
Xcode 15+ for iOS builds (macOS only)
Basic Flutter and Dart knowledge – this is a source-code app template, not a no-code builder

Third-Party Services and Costs

ShopKit is a Flutter UI app template. It ships with built-in mock data and runs out of the box – you do not need any account, server or subscription to open the project, run it and browse all 192 screens.

Please read this before buying: if you later choose to connect this template to a third-party backend service, or to turn the Nest “view in your room” screen into working augmented reality, doing so will involve external costs that you pay directly to those providers. Those services are separate products from other companies, they are not included in the price of this item, they require your own account, and their fees are set by them and can change at any time. In particular:

Firebase (Google) – free tier available, paid usage-based plans beyond it. Not included.
Shopify – a paid monthly subscription is required for a Storefront API account. Not included.
WooCommerce – the plugin itself is free, but WordPress hosting, domain, SSL and some extensions are paid. Not included.
Laravel, Node, Strapi or any custom API – you supply and pay for the hosting. Not included.
Payment gateways (Stripe, PayPal, iyzico and similar) – per-transaction fees set by the provider. Not included.
Google Play Console (one-off registration fee) and Apple Developer Program (annual fee) – required to publish your app. Not included.
AR SDKs and hosted 3D/AR commerce services – monthly or per-view pricing, plus paid 3D model creation, conversion and hosting. Not included. See the AR paragraph below.

About the Nest AR preview screen. The “view in your room” screen in the Nest theme is a static UI layout – a designed Flutter screen with a placeholder image. It contains no AR functionality, no camera access and no 3D model rendering, and it does not call any AR service. ShopKit bundles no AR package: the entire dependency list is google_fonts and go_router.

If you want that screen to perform real augmented reality, you must build it yourself using a third-party AR SDK or service – for example ARCore, ARKit, a Flutter AR plugin, or a hosted 3D/AR commerce provider. Setting up functional AR will involve external costs that you pay directly to those providers, on top of the price of this item. They are separate products from other companies, are not included here, and require your own account. Expect to pay for at least: a monthly subscription or per-view charge from a hosted AR/3D commerce provider, the creation or conversion of a 3D model for every product you want to show (a paid service or paid software), and usage-based hosting and bandwidth for those models. Check each provider’s current pricing before you plan around this screen. The same is true of every other integration you add on top of this template – backend, payments, push notifications, maps, chat: the template contains none of them, and connecting any of them means signing up for a paid third-party service of your own.

ShopKit contains no integration code for any of the services above. What it does contain is the clean seam that makes adding one straightforward: implement the repository interfaces in shopkit_domain and swap AppRepositories.mock() for your own implementation – without changing a single screen.

Notes

Demo product photography is loaded from Unsplash CDN URLs and is used for presentation only. Replace it with images you own or have licensed before publishing to the App Store or Google Play – the documentation has a step-by-step section for this. Fonts are loaded via the google_fonts package under the SIL Open Font License. Icons use Flutter’s built-in Material Symbols set.

Support

Support covers installation help, bug fixes and questions about the included code. It does not cover custom development, third-party plugin integration or backend implementation. Please read the included documentation first – most questions are answered there, and the troubleshooting section lists the common first-run errors. Contact us through the item support tab and we will respond within one to two business days.

License

Regular License – Use ShopKit in one end product that is free for end users. Suitable for your own app or a single client project.

Extended License – Use ShopKit in one end product that end users are charged for. Required for paid apps or SaaS products.

Full terms: Envato Standard Licenses.

Roadmap

v1.1 – Additional niche screens per theme, tablet and responsive layout variants, localization example (ARB), Riverpod state-management example branch.
v1.2 – Reference API layer with a sample backend adapter, Firebase integration example, in-app payment sheet examples.
Later – Additional app themes based on buyer demand. Customer suggestions are prioritized.

Changelog

v1.0.0 – 27 July 2026
– Initial release
– Core Kit: 48 screens (S01-S48) with the shared widget library and full GoRouter map
– Nine niche themes: Electro, Aura, Pawly, Fresho, Fold, Glow, Nest, Peak, Tods (144 screens)
– shopkit_core: 10 Material 3 themes, Sk* widgets, route transitions
– shopkit_domain: models, abstract repositories, typed AppFailure errors
– Dark mode variants for home, product detail and cart
– Tools: single-theme extractor, app-icon generator
– HTML documentation with screen gallery, user-flow walkthrough, branding guide and troubleshooting
– Interactive 390×844 HTML design source included in the download (opens in a browser, no design software required) and browsable in the online demo

ShopKit | Flutter E-Commerce App Template