Creating a new FlutterFlow project takes under 5 minutes. Sign up at app.flutterflow.io, click New Project, choose a blank template, name your app, and select your target platforms. The editor opens with a canvas, widget tree panel on the left, and properties panel on the right. Run Mode previews your app in the browser instantly.
Your first FlutterFlow project — what to expect
FlutterFlow is a visual app builder that generates real Flutter/Dart code. Unlike website builders, what you create in FlutterFlow compiles into a native iOS, Android, or web app. Every widget you drag onto the canvas becomes Dart code. When you're ready to publish, FlutterFlow compiles and hosts a web version instantly, or you can download the full Flutter project to submit to the App Store or Google Play. This tutorial covers the essential first steps: creating a project, understanding the editor layout, adding widgets, and seeing your work in Run Mode. Beginners often choose a complex template thinking it will save time — but a blank project is better for learning because you can see how each piece is added.
Prerequisites
- A web browser (Chrome or Edge recommended for best FlutterFlow performance)
- An email address to create a FlutterFlow account
- No prior Flutter or coding experience required for this tutorial
Step-by-step guide
Sign up and create your FlutterFlow account
Sign up and create your FlutterFlow account
Go to app.flutterflow.io in your browser. Click Get Started for Free. Sign up with Google (recommended — fastest) or enter your email and password. After signing in, you land on the My Projects dashboard. This is your home screen showing all your projects. The Free plan lets you create 2 projects with FlutterFlow branding. You don't need a credit card to start. If you already have an account, just sign in and you'll see the same dashboard.
Expected result: You are signed in and see the My Projects dashboard with a 'Create New' button or similar prompt.
Create a new blank project
Create a new blank project
Click the blue 'Create New' button (or the '+' icon) on the My Projects dashboard. A dialog appears asking you to name your project and choose a template. Name your project something descriptive (e.g., 'My First App'). Under Templates, select 'Blank' — this gives you a clean starting point with just one empty page. Avoid the pre-built templates for your first project — they come with 20+ pages and hundreds of widgets that can overwhelm beginners. Click Create Project. FlutterFlow creates the project and opens the editor automatically.
Expected result: A new project opens in the FlutterFlow editor with one empty page named 'HomePage'.
Learn the editor layout — three main panels
Learn the editor layout — three main panels
The FlutterFlow editor has three main sections. Left panel: the Widget Tree. It shows every widget on the current page in a hierarchy. Clicking a widget in the tree selects it on the canvas. Center: the Canvas. This is a visual preview of your app screen. You can click widgets on the canvas to select them. Right panel: the Properties Panel. When a widget is selected, its properties appear here — colors, text, sizing, padding, and actions. Above the canvas you see the toolbar: the Run button (triangle play icon), Undo/Redo arrows, and the device size selector. Spend 2-3 minutes clicking around to get familiar with these three panels before adding any widgets.
Expected result: You can identify the Widget Tree, Canvas, and Properties Panel. Clicking 'Page' in the widget tree selects the page background on the canvas.
Add your first widget — a Text widget
Add your first widget — a Text widget
Click the '+' button at the top of the Widget Tree panel, or click anywhere on the canvas to open the widget picker. In the search box, type 'Text'. Click Text in the results to add it to the page. The Text widget appears on the canvas and in the widget tree. With it selected, look at the right Properties Panel: you'll see a field labeled 'Text Value'. Click it and type 'Hello, FlutterFlow!'. The canvas updates immediately. Below the text field you'll see Font Size, Color, Font Weight, and Alignment options. Change the font size to 24 and the color to your preferred color using the color picker.
Expected result: The text 'Hello, FlutterFlow!' appears on the canvas in 24pt font with your chosen color.
Add a Button and set its style
Add a Button and set its style
Click the '+' button again and search for 'Button'. Add an Elevated Button to the page. With the button selected, find the Text property in the right panel and change it from 'Button' to 'Get Started'. Find the Background Color property and change it to your brand color. Change the Button Width to 'Full Width' or set a specific pixel value (e.g., 200). To see all button options, scroll down the Properties Panel — you'll find padding, border radius, text style, and icon options. The canvas updates as you change each property.
Expected result: A styled button labeled 'Get Started' is visible below the text on the canvas.
Preview your app in Run Mode
Preview your app in Run Mode
Click the triangular Run button in the top toolbar (or press R). A web preview of your app opens in a new browser tab. This is Run Mode — a live compiled version of your app running in the browser. You should see your text and button exactly as they appear on the canvas. Any changes you make in the editor are not instantly reflected in Run Mode — you must re-run (close the tab and click Run again) to see updates. Run Mode also shows a QR code button: click it to open a scannable QR code, scan it with your phone, and view the app in FlutterFlow's mobile preview app.
Expected result: Your app preview opens in a new browser tab showing the text and button you added. The app looks like a phone screen.
Complete working example
1// This is the Flutter/Dart code FlutterFlow generates for a simple page2// with a Text and Button widget. You don't need to write this —3// FlutterFlow generates it for you. It's shown here so you understand4// what's happening under the hood.5//6// Access the generated code via: Menu → Developer Tools → View Code78import 'package:flutter/material.dart';910class HomePageWidget extends StatefulWidget {11 const HomePageWidget({super.key});1213 @override14 State<HomePageWidget> createState() => _HomePageWidgetState();15}1617class _HomePageWidgetState extends State<HomePageWidget> {18 @override19 Widget build(BuildContext context) {20 return Scaffold(21 backgroundColor: Colors.white,22 body: SafeArea(23 child: Padding(24 padding: const EdgeInsets.all(24.0),25 child: Column(26 mainAxisAlignment: MainAxisAlignment.center,27 crossAxisAlignment: CrossAxisAlignment.center,28 children: [29 // The Text widget you added30 const Text(31 'Hello, FlutterFlow!',32 style: TextStyle(33 fontSize: 24,34 fontWeight: FontWeight.bold,35 color: Colors.black,36 ),37 ),38 const SizedBox(height: 24),39 // The Button widget you added40 SizedBox(41 width: double.infinity,42 child: ElevatedButton(43 onPressed: () {44 // Action added here in FlutterFlow's Action Flow45 },46 style: ElevatedButton.styleFrom(47 backgroundColor: Colors.blue,48 padding: const EdgeInsets.symmetric(49 vertical: 16,50 horizontal: 24,51 ),52 shape: RoundedRectangleBorder(53 borderRadius: BorderRadius.circular(8),54 ),55 ),56 child: const Text(57 'Get Started',58 style: TextStyle(fontSize: 16, color: Colors.white),59 ),60 ),61 ),62 ],63 ),64 ),65 ),66 );67 }68}Common mistakes when creating a New FlutterFlow Project from Scratch
Why it's a problem: Choosing a complex template instead of a blank project for your first build
How to avoid: Start with the Blank template. Add one page, one widget, one action at a time. Build complexity gradually once you understand how each layer works.
Why it's a problem: Placing widgets directly on the page canvas without a Column or Container parent
How to avoid: Always start with a Column widget as the first widget on any page. Add all other widgets inside the Column. Use padding and spacing properties on the Column to control layout.
Why it's a problem: Expecting Run Mode to auto-refresh like a website hot-reload
How to avoid: Make several changes at once, then click Run to preview them all together. Don't click Run after every single property change — batch your edits for efficiency.
Best practices
- Start with a blank template and add complexity one feature at a time
- Name your pages and widgets clearly from the start — 'HomePage', 'ProductCard', not 'Page1' or 'Container2'
- Use the widget tree panel to select and inspect widgets rather than clicking on dense canvas areas
- Save your work frequently — FlutterFlow auto-saves but the save indicator in the top bar confirms when changes are committed
- Learn keyboard shortcuts early: R to run, Cmd+Z to undo, and Cmd+click to multi-select widgets
- Connect Firebase from the start even if you don't need it yet — retrofitting auth and database later is harder
- Use the FlutterFlow Community Slack and YouTube channel for answers — the community is active and beginner-friendly
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm brand new to FlutterFlow and just created my first blank project. I want to build a simple to-do list app. The app should have one page with a text field to add tasks, a button to submit, and a list below showing all added tasks. Can you describe step by step how to set this up in FlutterFlow using App State to store the task list, without any backend database yet?
I just created a new FlutterFlow project with a blank template. I want to add a top app bar with my app name, a centered welcome message, and a large button that navigates to a second page called 'SignUpPage'. Walk me through exactly which widgets to add and in what order in the FlutterFlow widget tree.
Frequently asked questions
Do I need to know how to code to use FlutterFlow?
No. FlutterFlow is designed for non-coders. You build apps visually by dragging widgets and setting properties. Coding knowledge becomes useful for advanced custom features (Custom Actions, Custom Widgets), but the core app-building workflow is entirely visual.
Can I use FlutterFlow for free?
Yes. The Free plan lets you create up to 2 projects, preview in Run Mode, and publish a web app with FlutterFlow branding. You cannot use a custom domain, remove branding, or export Flutter code on the free plan. Paid plans start at $30/month.
What platforms can I build for with FlutterFlow?
FlutterFlow generates Flutter code, which compiles for iOS, Android, Web, and Desktop (macOS, Windows, Linux). You select your target platforms when creating a project. Web works on the Free plan. iOS and Android publishing require downloading the Flutter code (Pro plan) and submitting through Xcode/Google Play Console.
Is FlutterFlow auto-saving my work?
Yes. FlutterFlow auto-saves continuously. The save indicator in the top bar shows a spinning icon while saving and a checkmark when saved. You can also see version history: click the clock icon in the top toolbar to browse and restore previous versions.
How is FlutterFlow different from Webflow or WordPress?
FlutterFlow builds native mobile and web apps using Flutter — they're compiled, installable apps, not just websites. Webflow and WordPress create websites only. FlutterFlow apps can access device features (camera, GPS, push notifications) that websites cannot.
Can I collaborate with my team on the same FlutterFlow project?
Yes, with the Teams plan ($70/user/month). Team members can work on the same project simultaneously. The Teams plan includes branching and merge features to manage parallel development. On Free and Pro plans, only one person can be the project owner.
What happens to my project if I downgrade or cancel my FlutterFlow subscription?
Your projects are preserved but become read-only if you exceed the Free plan limits (2 projects). You lose access to paid features (custom domain, code export) but can still view your projects and upgrade again later to regain full access.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation