Building an app in FlutterFlow: Episode 1 – A new app

Before you write a single line of logic or drag a single widget, it is worth mapping out the entire platform for your FlutterFlow project on paper first. In 2026, FlutterFlow has matured into a genuinely professional-grade visual development environment — but the fundamentals of good project hygiene haven't changed. The least expensive mistake you can make is one you catch before you start. You'll thank yourself later.

TL:DR – FlutterFlow remains well ahead of comparable visual development tools and integrates cleanly with professional development and DevOps workflows. Having published apps across many frameworks over the years, and having shipped production apps built entirely in FlutterFlow, I can say with confidence it is viable for serious mobile development at any scale — from a minimum viable product to a polished, full-featured app. But you still need to think carefully about project structure, and the best way to do that is to document your work, if only for future you.

What's changed in 2026

FlutterFlow has moved fast since its early days. The platform now ships with a native desktop app for both macOS and Windows, AI-assisted widget generation, significantly improved custom code support, and a reworked Supabase integration alongside its longstanding Firebase support. The pricing tiers have been restructured more than once — the old Standard/Pro split has been replaced with a model that includes a free tier, a Standard tier, and a Teams tier, with enterprise options available on request. Always check the current FlutterFlow pricing page before committing, as the feature boundaries between tiers shift regularly.

Flutter itself is now well into its post-3.x maturity, with strong support for iOS, Android, Web, macOS, Windows, and Linux targets. The ecosystem around FlutterFlow — including Supabase, RevenueCat, Stripe, and Braintree integrations — has deepened considerably, and the GitHub integration that once required a Pro subscription is now available at lower tiers. FlutterFlow's AI features can now scaffold entire pages from a prompt, though you still need to understand what the generated code is doing if you plan to maintain it seriously.

One significant shift: the FlutterFlow community has grown large enough that there is now a robust marketplace of templates, components, and custom widgets. Before building something from scratch, it is worth checking the FlutterFlow Marketplace first.

Think about all the pieces of the FlutterFlow puzzle

You will need a FlutterFlow subscription or trial and it is worth working through the official Getting Started documentation before diving in. Beyond FlutterFlow itself, there are other tools to consider. I recommend drawing a system map of your whole platform — from FlutterFlow and your supporting cloud services through to your target platforms and devices. This is also the right moment to think carefully about project naming, and to keep your product marketing name well away from your platform naming. Once that groundwork is done, you are ready to start building. Begin with FlutterFlow's Settings and Theme configuration, then explore integrations such as Google AdMob and Google Maps. When you have a working app, connect it to GitHub so you have control over the Flutter source code FlutterFlow generates.

Why build this in FlutterFlow?

I have an app from about ten years ago — my first successful cross-platform app for iOS and Android, with cloud-stored data. The original framework is long gone, but as a kind of anniversary I wanted to see whether it could be rebuilt entirely in FlutterFlow and relaunched with an ad-supported revenue model rather than the original B2B sales approach.

The original app used Google Maps, a public data API, and stored user settings in the cloud. It was not a trivial project. Even on early Android and iOS releases it had engaging, polished functionality. Rebuilding it feels like a genuine test of what FlutterFlow can do in 2026.

To prepare, I spent time building a smaller exploratory app — something I could use to try out FlutterFlow's features at low stakes before committing to the production implementation. There is a lot to absorb in FlutterFlow, and working through things on a small scale first consistently pays off.

FlutterFlow plans and environment setup

Which plan do you need?

The free tier allows you to explore FlutterFlow and build projects, but restricts code export and some integrations. The Standard tier unlocks most of what you need for a solo developer shipping a real app. The Teams tier adds collaborative features, more granular permissions, and priority support — worth it if you are working with other developers or designers. GitHub integration, which previously required the top-tier Pro plan, is now available at lower paid tiers, which is a welcome change for anyone running a serious DevOps workflow.

Once subscribed, creating a new project is straightforward — far simpler than assembling a traditional development toolchain from scratch. That said, you will still want a local Flutter development environment. FlutterFlow handles design, logic, and a great deal of debugging in the browser (or in the desktop app), but it cannot replace locally connected real devices for final testing. FlutterFlow works best in Chrome and in its own desktop app, which is now available for both macOS and Windows. If you are targeting iOS, you still need a Mac with Xcode — that is an Apple requirement, not a FlutterFlow limitation.

Getting started with a FlutterFlow project

Launch FlutterFlow and create a new project by clicking Create Project. Choose your codename, pick a blank canvas or a template, and you are in the designer. The onboarding flow has been polished considerably — new users are walked through the core concepts with contextual tooltips and a structured checklist rather than just a welcome screen.

Click through the welcome flow to get started. You can choose an existing template — and the template library has grown substantially — or begin with a blank app.

FlutterFlow maintains an extensive library of video tutorials and written documentation. The official YouTube channel and the community forum are both active and well worth bookmarking.

You can adjust the preview device resolution to match your target hardware, choosing from a wide range of real-world device profiles.

Downloading your source code and running it locally

Downloading your FlutterFlow project as Flutter source code and running it locally is a solid way to work. Install the Flutter SDK and set up a local IDE — VSCodium or Android Studio are both good choices. If you want to build for iOS you must use a Mac with Xcode installed. The iOS Simulator only runs on macOS. FlutterFlow-generated code works cleanly with all standard Flutter development tools.

Keep product marketing names out of your project naming

Pro tip: I codenamed this project YellowGreen. I always use a colour as a codename. The reason is simple: product names change, App Store names change, client briefs change. If you bake a marketing name into your package name, your Firebase project, your AdMob account, your GitHub repository, and your Google Cloud project, you are setting yourself up for a painful and incomplete rename operation somewhere down the line. I have encountered this problem more times than I care to count. Using a codename across every component of the platform keeps everything consistent, lets you discuss the project with third parties without exposing confidential details, and means your infrastructure names will never become embarrassingly stale. You can add the marketing name when you are ready to launch — and only where it actually belongs.

Create a system map of your platform components

The time spent drawing a system diagram before you start has a direct and lasting impact on the whole project. FlutterFlow's simplicity does not remove the need for careful system design. Here is what the component map looks like at the start of this project — it will likely evolve before the app ships.

  ┌──────────────────────┐ ┌───────────────────────┐
  │FlutterFlow Project   │ │GitHub Repository      │
  │                      │ │                       │
  │YellowGreen           │ │YellowGreen            │
  └──────────────────────┘ └───────────────────────┘
  ┌──────────────────────┐ ┌───────────────────────┐
  │ Firebase Project     │ │AdMob Account          │
  │                      │ │                       │
  │ YellowGreen          │ │your email for admob   │
  ├──────────────────────┤ ├───────────────────────┤
  │ Firebase apps        │ │AdMob apps             │
  │                      │ │                       │
  │ iOS - YellowGreen    │ │iOS - YellowGreen      │
  │ Android - YellowGreen│ │Android - YellowGreen  │
  │ Web - YellowGreen    │ │Ad unit - Banner (both)│
  └──────────────────────┘ └───────────────────────┘
  ┌────────────────────────────────────────────────┐
  │ Google Cloud Platform - Project YellowGreen    │
  │                                                │
  │ Google Maps Platform                           │
  │                                                │
  │ Enabled APIs                                   │
  │                                                │
  │ Maps SDK for Web                               │
  │ Maps SDK for iOS                               │
  │ Maps SDK for Android                           │
  └────────────────────────────────────────────────┘

Document this from day one. There are a lot of moving parts across multiple providers, and renaming things later is painful and rarely complete. Flutter and Dart underpin all of it, but they do not need entries here — they are the environment, not a service you configure.

Build a custom colour scheme or branded theme

The Material Theme Builder at m3.material.io/theme-builder remains the cleanest way to generate a coherent colour scheme for a Flutter app. FlutterFlow does not import Material Theme Builder output directly, but it is straightforward to copy the hex values from the builder and paste them into your FlutterFlow theme. With Material 3 now the default in Flutter, it is worth familiarising yourself with the token-based colour system — primary, secondary, tertiary, surface, and their variants — before you start placing colours in your theme.

FlutterFlow Settings

Resist the urge to jump straight into building pages. The Settings panel — accessed via the cog icon — is where you lay the foundations that everything else depends on. Work through each section methodically before touching the canvas.

• Project and Package Names — Set these correctly from the start. Use reverse domain notation with your codename for the package name. Mine is uk.co.multizone.yellowgreen. This will never need to change regardless of what happens to the product's marketing name.
• Flutter Theme — Upload your launcher and splash screen assets, set your colour palette, choose your typography, and configure your loading indicator. Getting this right early means you only ever change colours in one place.
• GitHub — Connect your repository here. Once configured, a prominent Push to Repository button appears in this panel. This is one of the features that makes FlutterFlow genuinely suitable for professional development workflows.
• Google Maps — Paste your API keys for iOS, Android, and Web here. Restrict your keys appropriately, and make a note to review those restrictions before going to production.
• Google AdMob — Add your AdMob App IDs for iOS and Android here. AdMob is not supported on Web targets.
• Firebase — Connect your Firebase project here. FlutterFlow's Firebase setup wizard has improved significantly and is now considerably easier than following Google's own documentation. The detail is covered in the Authentication and Firestore article in this series.
• Supabase — If you prefer an open-source backend, FlutterFlow's Supabase integration has matured into a credible alternative to Firebase for many use cases. Worth evaluating if you have reservations about vendor lock-in.

App Settings — Theme

FlutterFlow's theme support is comprehensive. It handles light and dark mode, custom fonts via Google Fonts, and lets you define a full set of named colours that you can reference throughout your app. If you consistently use named theme colours rather than hardcoded hex values, you can retheme an entire app in minutes. The Explore Themes panel gives you a live preview before committing to a choice.

Light and dark mode

Set up both light and dark colour schemes from the start, even if you are not planning to actively promote dark mode support. Users expect it, and the App Store and Google Play both surface it as a quality signal. If your theme is configured correctly, dark mode support comes for free.

Fonts

Configure your font styles before building any components. FlutterFlow gives you access to the full Google Fonts library, and you can upload custom font files if your brand requires them. Define your type scale —