How to Use FlutterFlow

Getting started with FlutterFlow

In this guide, you will learn how to create your first mobile or web application using FlutterFlow, a low-code platform that simplifies app development. By the end, you will be able to design a basic app interface without any coding experience.

Step 1: Sign up and set up

1. Go to FlutterFlow's website.
2. Click on the “Get Started” button in the top right corner.
3. Sign up using your email address and create a password. Alternatively, you can sign up using Google or GitHub.
4. Once signed in, you will be taken to the FlutterFlow dashboard.

Step 2: Your first app

1. On the dashboard, click on “Create New Project”.
2. Choose a project name and select either "Mobile App" or "Web App".
3. Click “Create Project” to proceed.
4. In the project editor, you will see a blank canvas. Click on the “+” button on the left sidebar to open the widget panel.
5. Drag and drop components (like Text, Buttons, and Images) onto the canvas to build your UI.
6. To edit a component, select it and use the properties panel on the right to customise its settings.
7. Click on the “Preview” button at the top right to see how your app looks in real-time.

Step 3: Get better results

1. Use the “Prompt-to-Page” feature by clicking on the “+” button and selecting “Prompt to Page”.
2. Enter a simple description of the UI you want to create (e.g., "Create a login page with email and password fields").
3. Click “Generate” and FlutterFlow will create the UI based on your prompt.
4. Customise the generated components as needed using the properties panel.

Pro tip

Use the “Templates” section found in the left sidebar to access pre-built app layouts. This can save you time when starting new projects, as you can modify existing designs instead of building from scratch.

Common mistake to avoid

Avoid skipping the tutorial prompts that appear when you first use the platform. These prompts provide essential guidance on how to navigate the interface and use various features effectively. Ignoring them can lead to confusion later on.