FlutterFlow has a free tier that lets you build and test apps in the browser with up to two projects. Publishing to App Store or Google Play and downloading source code requires a paid plan starting at $30/month. The Standard plan at $70/month adds custom code support and priority support, which most production projects need.

Can FlutterFlow apps be published to the App Store?

Yes. FlutterFlow generates real Flutter code that compiles to a native iOS binary. You upload this to App Store Connect and submit for Apple's standard review process. You need an Apple Developer account ($99/year) to publish. FlutterFlow apps on the App Store are indistinguishable from hand-coded apps — they are native binaries, not web views.

FlutterFlow vs React Native?

FlutterFlow (Flutter) consistently outperforms React Native on UI smoothness and startup time because Flutter renders to its own canvas rather than using the platform's native UI components via a JavaScript bridge. React Native has a larger ecosystem and is better for teams with strong JavaScript backgrounds. For visual app builders, only FlutterFlow exists — there is no equivalent no-code builder for React Native.

Do I need to know Flutter to use FlutterFlow?

No. FlutterFlow is designed to be used without writing Flutter or Dart code. Basic apps with standard layouts, data binding, and auth can be built entirely through the visual interface. Custom code (written in Dart) is supported for edge cases not covered by the built-in widgets and actions, but it is optional — not required for the majority of app functionality.

FlutterFlow Tutorial for Beginners: Build a Mobile App in 2025

FlutterFlow is the most capable no-code mobile app builder available in 2025. It generates real Flutter/Dart code — not a web view, not a prototype — that compiles to native iOS and Android apps indistinguishable from hand-coded Flutter. In this tutorial, you'll build a complete mobile app from scratch: project setup, UI design, Supabase database connection, user authentication, navigation, and deployment to the App Store and Google Play. No prior mobile development experience required.

What Is FlutterFlow?

FlutterFlow is a visual app builder built on top of Google's Flutter framework. Flutter is an open-source UI toolkit that lets you compile a single codebase to iOS, Android, web, and desktop. FlutterFlow adds a visual drag-and-drop interface on top of Flutter, so you design your screens visually and configure logic through a point-and-click workflow — while the platform generates the underlying Dart code automatically.

The key differentiator from other no-code mobile tools is the output quality. FlutterFlow produces real, exportable Flutter code. You can download your full Dart project at any time and continue development in VS Code or Android Studio. This means you're never locked in — and it means the apps genuinely perform like native apps: 60fps animations, native gestures, full access to device hardware.

FlutterFlow connects to a wide range of backends. The recommended backend for most projects is Supabase — a PostgreSQL database with built-in auth, real-time subscriptions, and file storage. Firebase is also natively supported. For more complex business logic, Xano or a custom REST API can be called directly from FlutterFlow's API builder. See our FlutterFlow platform overview for more context on the ecosystem.

Setting Up Your FlutterFlow Project

Start by creating an account at FlutterFlow.io. The free tier lets you build and preview apps in the browser; a paid plan (starting at $30/month) is required to download source code and publish to app stores. Create a new project and choose "Blank App" to start from scratch, or use one of FlutterFlow's starter templates to accelerate your design.

In the project settings panel, configure your app's basic details: app name, package name (this becomes your app's unique identifier on App Store and Google Play — use reverse domain format like com.yourcompany.appname), app icon, and primary color. The package name cannot be changed after publishing, so choose it carefully. Set your target platforms to iOS and Android.

Next, configure your app's theme. FlutterFlow has a built-in design system: define your primary color, secondary color, background color, font family, and text styles. These are applied globally across all your screens. Taking 15 minutes here saves significant time later — consistent theming is much easier to set up upfront than to retrofit. FlutterFlow supports Google Fonts natively; if you have brand fonts, you can upload custom font files.

Building Your UI

FlutterFlow's UI builder uses Flutter's widget model. Every element on screen — a button, a text field, a card, a list — is a widget. Widgets are arranged in a tree: a Column widget contains multiple child widgets stacked vertically; a Row arranges them horizontally; a Stack overlays them. Understanding this containment model makes building complex layouts much more predictable.

To build a screen, select it in the page list, then drag widgets from the left panel onto your canvas. The most important widgets to learn first: Text (display content), Image (local or network images), TextField (user input), Button (trigger actions), ListView (scrollable list of items), and Card (container with shadow and padding). FlutterFlow's component system lets you build reusable UI pieces — a user profile card you design once and use across multiple screens.

For responsive layouts, use FlutterFlow's responsive breakpoints to define how your UI adapts to different screen sizes. FlutterFlow's preview mode shows your app at iPhone and Android screen dimensions simultaneously. Build for the smaller screen first — it's easier to add space than to remove it. If you need a production-quality app built by experts, our team has delivered 50+ FlutterFlow apps and can build to brief or review your existing project.

Connecting to Supabase

Supabase is the best backend choice for FlutterFlow projects. It provides a PostgreSQL database, authentication, real-time data subscriptions, and file storage — all accessible via a clean REST API that FlutterFlow supports natively.

To connect, create a free Supabase project at supabase.com. In your Supabase dashboard, navigate to Settings > API and copy your Project URL and anon public key. In FlutterFlow, go to Settings > Integrations > Supabase and paste these values. FlutterFlow will automatically detect your database tables and make them available for data binding.

Create your data tables in the Supabase Table Editor. For a task management app, for example, you'd create a tasks table with columns: id (uuid, primary key), title (text), description (text), status (text), user_id (uuid, foreign key to auth.users), created_at (timestamp). Enable Row Level Security on the table and add a policy allowing users to read and write their own rows: USING (auth.uid() = user_id). This ensures users can only access their own data — essential for any app with user accounts. See the Supabase tool page for more on database setup best practices.

Navigation and Routing

FlutterFlow uses Flutter's Navigator for page routing. You define navigation actions on buttons and gestures: "Navigate to [Page Name]," passing parameters as needed. For a typical app you'll use three navigation patterns: push (go to a new page, with a back button), replace (swap the current page, for login → home transitions), and pop (go back to the previous page).

For multi-screen apps, set up a bottom navigation bar or drawer navigation early — these define the primary navigation structure users will rely on. FlutterFlow has a built-in NavBar component; configure it in the Nav Bar settings to specify which pages are reachable from each tab.

Deep links let users open specific pages in your app from external URLs — useful for notifications, email links, and marketing campaigns. Configure deep links in FlutterFlow under Settings > App Details > Deep Linking. Define your URL scheme (myapp://tasks/123) and map it to the target page with parameters. Testing deep links requires a physical device or simulator — the FlutterFlow web preview cannot test this flow.

State Management in FlutterFlow

FlutterFlow provides three levels of state: component state (scoped to a single widget), page state (scoped to one screen, reset when you navigate away), and app state (global, persists across the app session). Choosing the right level keeps your app maintainable as it grows.

Use component state for UI-only concerns: is this accordion open, which tab is active, is this text field in focus. Use page state for data that the current screen needs: the list of tasks loaded on the Tasks page, the user's profile data displayed on the Profile page. Use app state for session-level data that multiple pages need simultaneously: the current user's ID and display name, the selected workspace, the notification count in the nav bar.

Backend queries in FlutterFlow are defined as "Backend Calls" — you configure the Supabase table, filters, ordering, and pagination, and the result is stored in a page state variable. Trigger backend calls on page load to populate your UI, and on user actions to create, update, or delete records. FlutterFlow's real-time Supabase subscription widget automatically refreshes data when the database changes, which is essential for collaborative or live-updating screens.

Adding Authentication

Authentication with Supabase in FlutterFlow handles the full sign-up, sign-in, and session management lifecycle. In FlutterFlow, navigate to Settings > Integrations > Supabase Authentication and enable it. FlutterFlow will automatically manage Supabase auth sessions — persisting tokens, handling refresh, and exposing the current user to your app as a global variable.

For the sign-up flow, create a Registration page with TextField widgets for email and password. On the Submit button, add a Supabase action: "Create Account" with the email and password fields mapped to the action inputs. On success, navigate to your app's main screen. On error, display the error message to the user.

For sign-in, the pattern is identical with the "Log In" Supabase action. Add a "Forgot Password" flow using Supabase's password reset email — this is a single Supabase action that sends a reset email to the provided address. For Google Sign-In and Apple Sign-In (required for App Store submission if any social login is offered), FlutterFlow supports both natively via the Supabase Auth OAuth configuration. Configure the OAuth providers in your Supabase project settings first, then enable them in FlutterFlow's auth settings. Our hire a FlutterFlow developer page has more on what a professional implementation looks like.

Testing and Deploying

FlutterFlow's in-browser preview lets you test basic UI and navigation flows without a device. For full testing — auth, Supabase data, push notifications, camera access — you need to run on a physical device or simulator. Use FlutterFlow's "Run" feature to build a test binary and install it via QR code on a device, or download the source code and build with Xcode (iOS) or Android Studio (Android).

For iOS App Store submission, you need an Apple Developer account ($99/year). In Xcode, configure your app's signing certificate, bundle identifier, and App Store Connect listing. TestFlight is Apple's beta testing platform — upload a build to TestFlight and invite up to 10,000 external testers before submitting for review. The App Store review process typically takes 1–3 business days for new apps.

For Google Play, create a Google Play Console account ($25 one-time fee). Set up your app listing, screenshots, and privacy policy URL. Use "Internal Testing" to distribute to up to 100 testers via email invitation before graduating to a wider rollout. Google Play review for new apps currently takes 3–7 days. FlutterFlow can generate your Android APK or App Bundle directly — download it from FlutterFlow's build settings and upload to the Play Console. Once live, updates to both stores typically review in under 24 hours.