FlutterFlow is a visual app builder that lets you create stunning mobile and web apps without writing code from scratch. In this guide, we'll take you from zero to your first working app — step by step.
What is FlutterFlow?
FlutterFlow is a low-code platform built on top of Flutter — Google's cross-platform UI toolkit. With FlutterFlow, you drag and drop widgets onto a canvas, configure them visually, and export production-ready Flutter code.
The result: apps that run natively on iOS, Android, and the web — from a single codebase.
Step 1 — Create a Free Account
Head to flutterflow.io and sign up with your Google account. The free tier is generous enough to build and test a full app.
Once you're in, you'll land on the Projects dashboard. Click Create New Project.
Step 2 — Choose Your Starter Template
FlutterFlow offers templates for common app types: e-commerce, social media, fitness, and more. For this guide, choose Blank App so we learn from the ground up.
- Give your project a name (e.g. "My First App")
- Select your target platform (iOS & Android is a safe default)
- Choose a primary colour — this becomes your app's accent colour
- Click Create Project
Step 3 — The Builder Interface
You'll see four main areas:
- Left panel — Widget tree and page list
- Canvas — Visual preview of your app
- Right panel — Properties, styling, and actions for the selected widget
- Top bar — Run mode, page navigation, and settings
Spend 10 minutes just clicking around. Select widgets on the canvas and watch the right panel update — this is where all the magic happens.
Step 4 — Add Your First Page
In the left panel, click the + button next to Pages. Name it Home.
By default, you get a Column widget as the root. This is a vertical layout container. Drag a Text widget from the widget library into it.
In the right panel, change the text to Hello, FlutterFlow! and bump the font size to 24. Hit the preview button (▶) in the top bar and you'll see your app live on a simulated device.
Step 5 — Add a Button with an Action
Drag a Button widget below your Text widget. In the right panel:
- Set the label to
Press Me - Change the background colour to your primary colour
- Click the Actions tab
- Add Action → Show Snack Bar → message: "Hello from FlutterFlow!"
Preview the app and tap the button. You'll see the snack bar appear at the bottom of the screen.
Actions are how you make your app interactive. FlutterFlow has dozens of built-in actions: navigation, API calls, Firebase writes, animations, and more.
Step 6 — Preview on Your Device
The built-in previewer is great for quick checks, but nothing beats testing on a real device. Install the FlutterFlow Test App from the App Store or Google Play, then clickTest Mode in FlutterFlow. Your app streams live to your phone over Wi-Fi.
Step 7 — Publish or Export
When you're ready to share your app:
- Run on web — Instantly deploy to a flutterflow.app subdomain
- Download code — Export clean Flutter/Dart source code (paid plan)
- Deploy to stores — Publish directly to App Store / Google Play
What's Next?
Now that you have the basics down, explore these topics:
- Connecting Firebase for user auth and a real database
- Custom functions with Dart code snippets
- Building reusable Components (like a custom card)
- State management with App State and Local State variables
Check out the other guides on this site — and if you found this helpful, consider supporting the channel on Patreon.