All posts
Mobile·7 min read

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.

77
The builder77 team
builder77.com

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.

dart
// 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=-createdAt

Try 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 web on 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:

bash
flutter create .          # adds the ios/ and android/ platform folders
flutter pub get
flutter run               # on a simulator or a connected device

Publishing 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 ipa and flutter 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.

Ready to build it?

Describe your idea and get a working first version in about a minute. Free to start, no credit card required.