Your WooCommerce store. Your Flutter app.

Why use Flutter for a WooCommerce app?

A shopping app should give your catalog room to shine: generous product photography, responsive variations, a clear bag and a checkout that feels consistent from one screen to the next. Flutter gives the app its own interface, while WooCommerce remains responsible for the commerce data.

Flutter shares UI and application code across platforms. Its mobile release builds compile to machine code; the browser preview uses a web build. See the Flutter architecture overview for the framework’s approach. In WooApp, the main shopping screens are Flutter screens rather than pages from your WordPress theme.

This gives a developer a useful starting point for a branded retail app without rebuilding the catalog, customer system or order administration. Your team still chooses the app identity, signing configuration and platform releases.

How Flutter connects to WordPress and WooCommerce

The app connects to the canonical HTTPS address of the WordPress installation. WooCommerce Store API supplies the catalog and cart. The WooApp plugin supplies storefront configuration, customer sessions, account resources and native checkout coordination.

Products, variations, stock, prices, coupons and shipping rules continue to live in WooCommerce. Orders arrive in the same administration area as website orders. You do not need to maintain a second product database for the app.

The URL is developer configuration. Customers open the finished app and see the connected store; they do not see a “connect your store” form. The app’s connection behavior and example commands are covered in the store connection handbook.

What comes in the Flutter source download?

The buyer package includes a Flutter source ZIP, an upload-ready WordPress plugin ZIP and offline HTML documentation. The source contains the Android and iOS projects, the Dart storefront, bundled font assets, dependency lockfile and tests.

• Storefront screens: home collections, category browsing, search and sorting, product details, image galleries and variations.
• Commerce: a WooCommerce-backed bag, quantity limits, coupons, address fields, shipping selection and server-calculated totals.
• Customer journeys: sign-in, store-enabled registration, favorites, profiles, addresses and order history.
• Native payment integration: Stripe PaymentSheet, PayPal approval and cash on delivery.
• Merchant tools: a visual home builder, image/video banners, logo sizing, six palettes and three typography styles.

The source separates API transport, store state, reusable design components and individual screens. Use lib/main.dart for the customer app. The website showcase has its own web-only entry point so its preview controls stay outside the shopper’s app interface.

Connect the store when you build

Install and activate the included plugin on your compatible WordPress/WooCommerce store. Open the source’s mobile directory, fetch its dependencies and supply STORE_URL when running or building the app.

flutter pub get
flutter run -d chrome --web-port 8090 --dart-define=STORE_URL=https://your-store.com
flutter build appbundle --release --dart-define=STORE_URL=https://your-store.com

The browser preview requires the store to permit its exact origin through CORS. Android/iOS releases use your own application identifiers and signing. An iOS build requires macOS and the Apple development toolchain. Follow the Flutter setup instructions and platform release chapters for the complete workflow.

Your store URL is public configuration. Merchant passwords and payment secret keys belong on the server, not inside Dart source or build flags. WooApp handles customer sessions through the plugin instead of asking you to embed administrator credentials.

Customize the app without editing every screen

Your merchant can change the header logo, font style and palette in WordPress. Product collections support grid, carousel and compact-list layouts. Banners support images or videos with product, category and search destinations selected by name.

Saved content and branding are retrieved on an app refresh. Changing the connected store, launcher icon, native identifiers or native code requires a rebuild. This gives agencies a clear division between everyday merchant content and developer-owned application changes.

For deeper design changes, the Flutter source remains available. Start with the shared design components, then work through the screens you want to adapt. Your native payment callback schemes should stay consistent with the platform projects.

Check the fit for your WooCommerce project

WooApp’s storefront focuses on simple and variable physical products, English and left-to-right layouts. Its checkout uses one shared billing/delivery address. Review the version requirements and extension scope before choosing it for a specialized store.

Subscriptions, bundles, custom required checkout fields and third-party gateway plugins need an integration assessment. The presence of an extension on the website does not automatically provide its native app interface. For payments, read the Stripe, PayPal and COD integration guide.

If you are comparing this approach with displaying your existing mobile website inside an app, the native versus WebView comparison explains the practical tradeoffs.