FlutterFlow is a visual app builder powered by Google’s Flutter framework. It lets you design native iOS and Android apps with drag-and-drop UI, connect to Firebase or REST APIs, and export clean Flutter code for custom development.
Create Your Account
Go to flutterflow.io and click Get Started. Sign in with your Google account or create a new one. FlutterFlow will prompt you to complete a brief onboarding survey about your app-building goals.
After login, you’ll land in the FlutterFlow dashboard. Click Create New Project and choose a blank project or a template like “E-commerce” or “Social Media Feed.” Templates include pre-built screens, navigation, and sample data to accelerate development.
Name your project and select a primary color scheme. FlutterFlow generates a default theme based on your choice, which you can customize later in the Theme Settings.
Set Up Your First Project
The FlutterFlow editor opens with a Widget Tree on the left, a Canvas in the center, and a Properties Panel on the right. The widget tree shows your app’s structure: pages, components, and nested widgets.
Click Backend in the top menu and choose Firebase or Supabase as your backend. If using Firebase, FlutterFlow guides you through connecting your Firebase project. Alternatively, use API Calls to connect to any REST or GraphQL endpoint.
Under Schema, define your data structure by adding collections like “Users” or “Posts” with fields for text, numbers, images, and timestamps. FlutterFlow auto-generates forms and data widgets based on your schema.
Build Your First Screen
Select the default HomePage in the widget tree. Drag a Column widget onto the canvas, then add a Text widget inside it. Update the text to “Welcome to FlutterFlow” and adjust the font size in the properties panel.
Below the text, add a Button widget. Label it “Get Started” and customize its color, border radius, and padding. Click Add Action in the properties panel and choose Navigate To to link to a new page.
Create a new page by clicking the + icon next to Pages in the widget tree. Name it “Dashboard” and add a ListView widget. Connect the ListView to your backend by binding it to a Firestore collection or API endpoint. Each list item displays dynamic data from your database.
Connect and Publish
Go to Settings & Integrations and enable features like push notifications, in-app purchases, or third-party APIs. FlutterFlow supports integrations with Stripe, Twilio, Algolia, and dozens of other services.
Under App Details, upload your app icon and splash screen. Set your app name, package identifier (for iOS), and bundle ID (for Android). These settings are required for app store deployment.
Click Test Mode to run your app in a browser or download the FlutterFlow mobile app to test on your device. When ready, click Deploy and choose Download Code to export Flutter source code, or use FlutterFlow’s integrated deployment to publish directly to the App Store or Google Play.
Next Steps
You’ve built and tested your first FlutterFlow app. Dive deeper into FlutterFlow’s custom actions to write Dart code for advanced logic, use state management for complex UI, and explore FlutterFlow’s component library to speed up development. Upgrade to a Pro plan for unlimited projects, custom domains, and GitHub integration.