Ten Prepared App Themes – One Flutter E-Commerce App Template
ShopKit is a production-ready Flutter e-commerce app template for builders who ship. As a substitute of 1 generic purchasing template, you get ten totally designed area of interest app themes – every with its personal shade system, typography and display circulate – plus a 48-screen Core Package that covers each customary commerce journey from splash to order monitoring.
Each display is hand-written Flutter code constructed from a pixel-perfect 390×844 design supply. No auto-generated widgets, no placeholder filler, no bloated dependency record. The entire template runs on bundled mock knowledge, so you’ll be able to open it and click on by way of all 192 screens with out organising a single service.
Dwell Demo: shopkit.webkodingtheme.com
Android APK: Download the demo APK – all ten themes in a single app
Browse each display in your browser: shopkit.webkodingtheme.com/demo
Documentation: shopkit.webkodingtheme.com/docs
Vital – Please Learn Earlier than You Purchase: Third-Occasion Providers Price Additional
ShopKit is a front-end app template. It ships with mock knowledge and incorporates no backend, no fee processing, no push notifications, no maps, no chat and no augmented actuality. Each display you see is a designed Flutter display pushed by pattern knowledge bundled contained in the app.
If you’d like any of these options to truly work, you could join third-party companies and pay these suppliers immediately. These prices are exterior, they’re set by the suppliers, they’ll change at any time, and they’re NOT included within the worth of this merchandise. This is applicable to the entire following:
• Augmented actuality (the Nest “view in your room” display). That display is a static UI format solely – a designed Flutter display with a placeholder picture. It has no digicam entry, no 3D rendering and no AR performance, and ShopKit bundles no AR package deal. Making it work requires a third-party AR SDK or a hosted 3D/AR commerce service at your individual further expense: anticipate a month-to-month subscription or per-view cost, paid creation or conversion of a 3D mannequin for each product, and usage-based internet hosting and bandwidth for these fashions.
• Backend and internet hosting (Firebase, Supabase, a customized API or any headless commerce platform) – month-to-month plans and utilization fees. Not included.
• Cost gateways (Stripe, PayPal, iyzico and related) – per-transaction charges set by the supplier. Not included.
• Push notifications, maps and chat – every requires its personal paid third-party account. Not included.
• Google Play Console (one-off registration price) and the Apple Developer Program (annual price) – required to publish your app to the shops. Not included.
Please verify every supplier’s present pricing earlier than you propose a undertaking round any of those options. A fuller clarification is within the “Third-Occasion Providers and Prices” part additional down this web page, and the identical warning is repeated within the included documentation and README.
Ten Area of interest App Themes
Core Package – 48 screens. The entire general-purpose retailer: auth, catalog, product, cart, checkout, orders, profile, darkish variants and each empty and error state.
Electro – 17 screens. Darkish tech aesthetic with a cyan accent and House Grotesk. Spec playing cards and comparison-friendly product layouts.
Aura – 16 screens. Luxurious jewellery and trend. Cormorant Garamond serif, gold accents, editorial whitespace.
Pawly – 16 screens. Pet store with Nunito, super-rounded shapes, pet profiles and subscription merchandise.
Fresho – 15 screens. Grocery supply with Manrope, unit pricing, amount controls and delivery-slot choice.
Fold – 16 screens. Black-and-white trend lookbook. Archivo plus Playfair italic, sharp corners, editorial really feel.
Glow – 16 screens. Magnificence and skincare in powder pink with Lora and Karla. Pores and skin-type badges, routine steps, pattern picker.
Nest – 16 screens. Furnishings and residential in heat neutrals and terracotta. Room-based looking plus an AR preview display – a static UI format solely, with no AR performance behind it. Turning it into working AR requires a paid third-party AR service at your individual expense (see “Third-Occasion Providers and Prices” under).
Peak – 15 screens. Sport and health. Darkish plus volt, Barlow Condensed, diagonal vitality.
Tods – 17 screens. Children and presents. Baloo 2, major colours, age-group filters and a gift-box builder.
Each theme covers the identical core journey – house, catalog, product element, cart, checkout, order success, monitoring, search, profile – so whichever one you ship, nothing is lacking.
192 Screens, Not Placeholders
48 Core Package screens plus 144 area of interest screens. Each is an actual Flutter widget tree laid out at 390×844, not a stub with a title and a button. Display information map one-to-one onto the design supply: S17 turns into s17_product_detail.dart, E05 turns into e05.dart, so discovering the code behind a screenshot takes seconds.
The included documentation ships a gallery of actual screenshots grouped by theme, captured from the working apps, so you’ll be able to see precisely what you’re shopping for earlier than you open a single file.
Clear Structure That Stays Clear
ShopKit is a small monorepo with an enforced dependency path. shopkit_core holds each theme, shared Sk* widget and Core Package display – and it’s forbidden from importing http, dio or any API shopper. shopkit_domain holds plain fashions and summary repository interfaces with typed AppFailure error dealing with. Every template app provides the implementations.
Which means connecting a backend by no means touches a display file. Write your repository implementations in opposition to the interfaces, swap AppRepositories.mock() on your personal manufacturing facility in major.dart, and all 192 screens hold working.
Ship one theme, not ten. Most patrons want a single app. Run shopkit/instruments/extract_template.sh electro ~/my-app and also you get a minimal standalone Flutter undertaking containing solely shopkit_core, shopkit_domain and the theme you picked – no lifeless code shipped to the shop.
Characteristic Highlights
Materials 3 theming – Every theme implements a shared ShopKitTheme contract with specific tokens for background, floor, textual content, accent, border, standing colours, radius scale and typography. Change one model shade and it propagates by way of each display.
Darkish mode – Darkish tokens throughout the equipment plus devoted darkish screens for house, product element and cart, so you’ll be able to see the remedy utilized finish to finish. Electro is darkish by default.
GoRouter navigation – Each template ships a whole declarative route map with named routes and customized web page transitions.
Reusable widget library – SkPrimaryButton, SkProductCard, SkOrderCard, SkBottomNav, SkAppBar, SkShopkitDialog, SkSnackbar, inputs, chips, amount steppers and empty-state layouts. Prefixed, documented and reused throughout all ten themes.
Typed error dealing with – AppFailure variants (community, auth, validation, notFound, server) within the area layer, so actual API errors map cleanly onto UI states that exist already.
Interactive HTML design supply, included – Each display was constructed from a pixel-perfect 390×844 HTML design supply, and that design supply ships contained in the obtain in design-source/. It opens in your net browser – no Photoshop, Figma, Sketch or XD wanted – and a plain-language index names each file. Browse the identical factor earlier than shopping for within the online demo. The documentation maps each design token to code.
A brief dependency record – Plain Flutter and Dart. The one third-party packages are google_fonts and go_router. No proprietary runtime, no license server, no obfuscated code.
Getting Began
The obtain is a Flutter monorepo. Open documentation/index.html for the complete information, or run the Core Package demo immediately:
New to Flutter? A 50-second setup video is included within the obtain – documentation/video/setup-walkthrough.mp4, playable offline. It reveals your complete first run with nothing sped up or staged: unzipping the obtain, the 2 setup instructions, 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 area of interest theme, use the extract script as a substitute – it copies solely shopkit_core, shopkit_domain and your chosen template right into a clear standalone undertaking with the trail dependencies already rewritten.
Documentation
A single self-contained HTML information, readable offline, protecting:
Display gallery – actual screenshots grouped by theme
Core consumer flows – a walkthrough from splash by way of checkout to order monitoring, with the route fixed and display file for each step
Branding information – change colours, fonts, emblem, app identify and icon with out writing Dart; precise information and values to edit
Changing the placeholder pictures – step-by-step, each the fast URL swap and the totally offline asset route
Design information – what each file in design-source/ is and what to open it with, written for individuals who have by no means used design software program
Troubleshooting – the frequent first-run errors with their precise messages and fixes
Reference – undertaking construction, theming, parts, routing and FAQ
What’s Included
shopkit_core – 10 themes, the shared Sk* widget library, 48 Core Package screens, route transitions
shopkit_domain – fashions and summary repository interfaces with typed failures
11 runnable apps – Core Package, Electro, Aura, Pawly, Fresho, Fold, Glow, Nest, Peak, Tods, plus a showcase hub that browses all of them
Instruments – single-theme extractor and app-icon generator
Design supply – each display design as a browsable net web page plus the 1024×1024 app-icon PNG, with a plain-language index; no Photoshop, Figma or different design software program wanted
Documentation – the complete HTML information described above, plus a 50-second offline setup walkthrough video
Checks – a boot smoke take a look at per template plus router circulate checks for the Core Package
Attempt it before you purchase: Live demo ·
Android APK ·
All screens ·
Documentation
Necessities
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 solely)
Fundamental Flutter and Dart information – it is a source-code app template, not a no-code builder
Third-Occasion Providers and Prices
ShopKit is a Flutter UI app template. It ships with built-in mock knowledge and runs out of the field – you do not want any account, server or subscription to open the undertaking, run it and browse all 192 screens.
Please learn this earlier than shopping for: should you later select to attach this template to a third-party backend service, or to show the Nest “view in your room” display into working augmented actuality, doing so will contain exterior prices that you just pay on to these suppliers. These companies are separate merchandise from different firms, they aren’t included within the worth of this merchandise, they require your individual account, and their charges are set by them and might change at any time. Specifically:
Firebase (Google) – free tier out there, paid usage-based plans past it. Not included.
Shopify – a paid month-to-month subscription is required for a Storefront API account. Not included.
WooCommerce – the plugin itself is free, however WordPress internet hosting, area, SSL and a few extensions are paid. Not included.
Laravel, Node, Strapi or any customized API – you provide and pay for the internet hosting. Not included.
Cost gateways (Stripe, PayPal, iyzico and related) – per-transaction charges set by the supplier. Not included.
Google Play Console (one-off registration price) and Apple Developer Program (annual price) – required to publish your app. Not included.
AR SDKs and hosted 3D/AR commerce companies – month-to-month or per-view pricing, plus paid 3D mannequin creation, conversion and internet hosting. Not included. See the AR paragraph under.
Concerning the Nest AR preview display. The “view in your room” display within the Nest theme is a static UI format – a designed Flutter display with a placeholder picture. It incorporates no AR performance, no digicam entry and no 3D mannequin rendering, and it doesn’t name any AR service. ShopKit bundles no AR package deal: your complete dependency record is google_fonts and go_router.
If you’d like that display to carry out actual augmented actuality, you could construct it your self utilizing a third-party AR SDK or service – for instance ARCore, ARKit, a Flutter AR plugin, or a hosted 3D/AR commerce supplier. Establishing useful AR will contain exterior prices that you just pay on to these suppliers, on prime of the value of this merchandise. They’re separate merchandise from different firms, will not be included right here, and require your individual account. Count on to pay for at the least: a month-to-month subscription or per-view cost from a hosted AR/3D commerce supplier, the creation or conversion of a 3D mannequin for each product you wish to present (a paid service or paid software program), and usage-based internet hosting and bandwidth for these fashions. Verify every supplier’s present pricing earlier than you propose round this display. The identical is true of each different integration you add on prime of this template – backend, funds, push notifications, maps, chat: the template incorporates none of them, and connecting any of them means signing up for a paid third-party service of your individual.
ShopKit incorporates no integration code for any of the companies above. What it does include is the clear seam that makes including one simple: implement the repository interfaces in shopkit_domain and swap AppRepositories.mock() on your personal implementation – with out altering a single display.
Notes
Demo product images is loaded from Unsplash CDN URLs and is used for presentation solely. Substitute it with pictures you personal or have licensed earlier than publishing to the App Retailer or Google Play – the documentation has a step-by-step part for this. Fonts are loaded by way of the google_fonts package deal below the SIL Open Font License. Icons use Flutter’s built-in Materials Symbols set.
Assist
Assist covers set up assist, bug fixes and questions concerning the included code. It doesn’t cowl customized growth, third-party plugin integration or backend implementation. Please learn the included documentation first – most questions are answered there, and the troubleshooting part lists the frequent first-run errors. Contact us by way of the merchandise assist tab and we’ll reply inside one to 2 enterprise days.
License
Common License – Use ShopKit in a single finish product that’s free for finish customers. Appropriate on your personal app or a single shopper undertaking.
Prolonged License – Use ShopKit in a single finish product that finish customers are charged for. Required for paid apps or SaaS merchandise.
Full phrases: Envato Standard Licenses.
Roadmap
v1.1 – Further area of interest screens per theme, pill and responsive format variants, localization instance (ARB), Riverpod state-management instance department.
v1.2 – Reference API layer with a pattern backend adapter, Firebase integration instance, in-app fee sheet examples.
Later – Further app themes primarily based on purchaser demand. Buyer strategies are prioritized.
Changelog
v1.0.0 – 27 July 2026
– Preliminary launch
– Core Package: 48 screens (S01-S48) with the shared widget library and full GoRouter map
– 9 area of interest themes: Electro, Aura, Pawly, Fresho, Fold, Glow, Nest, Peak, Tods (144 screens)
– shopkit_core: 10 Materials 3 themes, Sk* widgets, route transitions
– shopkit_domain: fashions, summary repositories, typed AppFailure errors
– Darkish mode variants for house, product element and cart
– Instruments: single-theme extractor, app-icon generator
– HTML documentation with display gallery, user-flow walkthrough, branding information and troubleshooting
– Interactive 390×844 HTML design supply included within the obtain (opens in a browser, no design software program required) and browsable within the on-line demo
