From PWA to App Store: shipping a Flutter app with builder77
Every builder77 mobile app starts as an installable PWA. When you're ready for the stores, convert it to a native Flutter project that shares the same database.
Getting an app onto someone's phone used to mean picking a platform, learning its toolchain and waiting on a review queue before anyone could try it. builder77 splits that journey into two stages: ship a PWA today so real people can use it, and move to native Flutter when you're ready for the App Store and Google Play.
Stage 1: a PWA your users can install right now
When you build a mobile app on builder77, it's designed as a phone app from the start: full-height layout, bottom tab navigation, large touch targets and safe-area padding for notched screens. When you publish, it gets a web app manifest and a service worker, which makes it installable.
- Press Publish and scan the QR code with your phone.
- On iPhone, tap Share → Add to Home Screen. On Android, use the install prompt or the browser menu.
- The app opens full-screen with its own icon, just like a native app.
This is the fastest way to get feedback. You can share a link with ten testers this afternoon, watch how they use it, and keep improving it in the builder — every publish updates the app for everyone instantly, with no store review.
Stage 2: convert to Flutter
When the app is in good shape, open the Flutter tab and convert it. This costs 3 message credits. builder77 generates a Flutter project — a pubspec.yaml and lib/main.dart — with the same screens, features and visual identity as your web app, written with Material 3.
The important part: the Flutter app talks to the same cloud database through the builder77 REST API, using the same collection and field names. Data created in the PWA shows up in the native app and vice versa, and your app users can sign in on either.
// Generated at the top of lib/main.dart
const String kApiBase = 'https://builder77.com';
const String kProjectId = 'your-project-id';
// Example call made by the generated M77Client
// GET $kApiBase/api/runtime/$kProjectId/db/habits?sort=-createdAtTry it before you download it
You can run the Flutter version without installing anything. There are two options in the Flutter tab:
- DartPad — open the generated code in DartPad for a quick look.
- Cloud build (Plus plan and above) — builder77 runs a real
flutter build webon our servers and shows the compiled app right in the builder. It's the most faithful preview of what the native app will do.
If the cloud build reports an error or something looks off, ask for a fix in chat and convert again. Because the web app is the source of truth, it's usually best to get the web version right first and then regenerate the Flutter project.
Download and open the project
On Starter and above you can download the Flutter project. From there, it's a standard Flutter workflow:
flutter create . # adds the ios/ and android/ platform folders
flutter pub get
flutter run # on a simulator or a connected devicePublishing to the stores
Store submission still happens in Apple's and Google's tools, under your own developer accounts. The general checklist looks like this:
- Set a unique bundle ID / application ID and your app name.
- Add app icons and a launch screen for both platforms.
- Configure signing: a distribution certificate and provisioning profile on iOS, an upload keystore on Android.
- Build release binaries with
flutter build ipaandflutter build appbundle. - Prepare store listings: screenshots, description, privacy details and a support URL.
- Submit for review in App Store Connect and Google Play Console.
Store reviewers look closely at privacy. If your app has sign-in and stores personal data, you'll need a privacy policy URL — you can ask builder77 to add a privacy page to your web app and link to it.
Keep the PWA around
Shipping native doesn't mean retiring the web version. The PWA keeps working on the same data, so people can use your app in a browser, on a desktop, or before they've installed it from the store. One product, two front doors, one backend.
Our advice: validate with the PWA, convert when users ask for it, and treat the store version as the polished edition of something people already love.