Mobile Apps · MBC-25

FlutterFlow App Development

FlutterFlow App Development is a low-code course in building mobile and web apps with FlutterFlow, from screen design, state and action logic to Firebase or Supabase, REST APIs, custom code and Stripe payments. It suits people who want to build apps with little code, programmers and business owners, and you leave able to build an app that is ready to deploy.

Updated
From 6,750 THB / person 7,500 −10% excl. VAT 7% · group rates available
PDFDownload the course outline
  • Duration18 hours · 3 days
  • FormatOnsite / live online
  • Next roundOn request
  • CertificateIncluded

Course overview

FlutterFlow is a low-code app builder where you design screens and logic visually and it generates real Flutter code, so one project produces an app for Android, iOS and the web. You can still add your own code or hand the code to developers when the work grows more complex, which is why business teams and developers alike use FlutterFlow to build prototypes and production apps faster than writing everything from scratch.

This new edition builds an app from scratch following current FlutterFlow practice: UI design, themes and components, state management, the Action Flow Editor, user accounts and data on Firebase, Supabase as an alternative, REST APIs, custom code, Stripe payments, testing, teamwork with branching, and deploying to the web and the stores. (3 days, 6 hours per day, 18 hours in total, Beginner to Intermediate level.)

What you’ll gain

  • Design screens with the UI Builder, themes and reusable components
  • Manage App State, Page State and Component State and pass parameters between pages
  • Build logic with the Action Flow Editor, including conditions and action outputs
  • Build user accounts and CRUD with Firebase or Supabase and call REST APIs
  • Add custom code and take payments with Stripe in test mode
  • Test, work as a team and deploy apps to the web and the stores

Who this course is for

  • People who want to build mobile or web apps while writing as little code as possible
  • Programmers who want to build prototypes or internal apps faster
  • Business owners, start-ups and product teams who want to test ideas with a real app
  • Students and anyone with basic computer skills

Prerequisites

  • Confident use of a computer and the internet
  • No programming experience is needed, although some basics make custom code easier
  • A FlutterFlow account and a Google account for creating a Firebase project
  • An Android phone or iPhone for testing (optional)

Curriculum

Course Details

This course is a 2026 edition that replaces the previous FlutterFlow course, rewritten for the current FlutterFlow feature set. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures alternating with labs and workshops throughout. Beginner to Intermediate level. Learners build one booking app from start to finish: screen design, themes and components, state management, logic with the Action Flow Editor, user accounts and data with Firebase, a look at Supabase, REST APIs, custom code, Stripe payments, testing and deployment. They take home a lab guide and sample projects.

Day 1 Screen Design, Navigation and State

Section 1: Lab: Getting Started with FlutterFlow

  • What FlutterFlow is and how it differs from writing Flutter by hand and from other no-code tools
  • Create a project, choose a template and set basic app settings
  • The workspace: canvas, navigation menu, properties panel and keyboard shortcuts
  • Preview, project history and comments for reviewing work together
  • Lab: build the first screen of a venue booking app and open it in Preview

Section 2: Lab: UI Builder, Widget Tree and Layout

  • Core widgets: Container, Row, Column, Stack, Text, Image and Button
  • Structure pages with the widget tree and page selector
  • Layouts for phones, tablets and the web with responsive visibility
  • ListView and GridView for lists of data
  • Lab: a venue list screen and a detail screen

Section 3: Lab: Themes, Design System and Components

  • Set app colours, fonts and typography in the theme settings
  • Support light mode and dark mode
  • Build reusable components with parameters
  • Basic widget and page transition animations
  • Lab: a venue card component and buttons used across the app

Section 4: Lab: Navigation and Passing Parameters

  • Navigate To, Navigate Back and setting the app's initial page
  • Bottom navigation bar and drawer
  • Pass parameters to the next page and display them
  • Bottom sheets and dialogs for short tasks on the same page
  • Lab: connect the list, detail and profile pages

Section 5: Lab: State Management in FlutterFlow

  • App State, Page State and Component State, and when to use each
  • Persisted App State for values kept on the device
  • Custom data types for data with several fields
  • Update state and rebuild the screen appropriately
  • Lab: a favourites list that is remembered after the app closes
Day 2 Logic, Firebase and REST APIs

Section 6: Lab: Logic with the Action Flow Editor

  • Triggers and actions: On Tap, On Page Load and On Change
  • If/else conditions and chained actions
  • Action output variables for passing results to the next action
  • Action blocks for logic reused across pages
  • Lab: a booking form with validation and feedback

Section 7: Lab: Firebase Setup and User Accounts

  • Create a Firebase project and connect it to FlutterFlow
  • Sign up, sign in and sign out with email and Google accounts
  • An onboarding screen and routing users by login state
  • Store and edit the signed-in user's profile (Auth User)
  • Lab: a complete account flow from sign-up to profile editing

Section 8: Lab: CRUD with Cloud Firestore

  • Design collections, documents and fields in FlutterFlow
  • Backend queries for lists and single documents, with filters and ordering
  • Create, update and delete documents from actions
  • Write Firestore rules so users reach only their own data
  • Lab: add, edit and cancel bookings

Section 9: Lab: Uploading Images and Files

  • Upload/Save Media from the camera or photo library
  • Upload to Firebase Storage and store the URL in Firestore
  • Show images with placeholders and handle large files
  • Lab: change the profile photo and attach venue photos

Section 10: Lab: Calling REST APIs and Handling JSON

  • Create API calls with headers, query parameters and a body
  • Test APIs in FlutterFlow and read values with JSON paths
  • Pass a login token to API calls through App State
  • API groups for organising endpoints of the same system
  • Lab: show weather or price data from an API in the app
Day 3 Supabase, Custom Code, Payments and Deployment

Section 11: Lab: Supabase as an Alternative Backend

  • Compare Firebase and Supabase and choose for the job
  • Connect Supabase to FlutterFlow and import the table schema
  • User accounts with Supabase Authentication
  • Query, insert, update and delete on PostgreSQL tables
  • Lab: move the venue list to data from Supabase

Section 12: Lab: Custom Code and AI Agents

  • Custom functions for calculations and data conversion
  • Custom actions and adding packages from pub.dev
  • Custom widgets when the built-in widgets are not enough
  • An overview of using an AI agent through the FlutterFlow MCP to edit a project, and checking the result before use
  • Lab: a price calculation function and a chart custom widget

Section 13: Lab: Payments with Stripe

  • Set up Stripe in test mode and enter the keys in FlutterFlow
  • Deploy the cloud function that creates payments
  • The payment action, converting amounts to the smallest currency unit first
  • Save payment results to Firestore
  • Lab: pay a booking fee with a Stripe test card

Section 14: Testing, Teamwork and Deployment

  • Test Mode, Run Mode and Local Run for each stage of testing
  • Branching and merging when several people work together
  • Connect GitHub to keep the generated Flutter code
  • Deploy the web app and prepare the app for Google Play and the App Store
  • Set the app name, icon, splash screen and permissions

Section 15: Workshop: An End-to-End Booking App Capstone

  • Design screens and the data structure for your chosen brief
  • Bring together accounts, data, image uploads and payments
  • Test on a real phone and fix the issues you find
  • Present your work, review it together and plan next steps

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

For organisations — in-house / private

  • Tailor the content to your team’s tools and projects
  • Your dates, at your office or live online
  • Quotation with tax ID for procurement
Corporate training quote

Instructors

Frequently asked questions

What is FlutterFlow, and how is it different from writing Flutter yourself?

FlutterFlow is a low-code app builder where you design screens, build logic and connect databases visually, and it generates Flutter code for you. You get an app that runs on Android, iOS and the web just as if you had written Flutter yourself, but much faster for typical work. When the built-in tools cannot do something, you add custom code in Dart, and you can connect GitHub so developers can carry the code further. Writing Flutter by hand gives complete freedom, but you write all of the code yourself.

How do you build sign-up and login in FlutterFlow?

Create a Firebase project and connect it to FlutterFlow in the settings, then enable Authentication and choose sign-in methods such as email and password or Google accounts. Build sign-up and sign-in pages and attach the sign-up and login actions to their buttons. Set separate initial pages for signed-in and signed-out users, and keep extra profile data in a users collection. With Supabase you follow the same approach through Supabase Authentication.

How do App State, Page State and Component State differ in FlutterFlow?

App State holds values used across the whole app, such as a cart or a token, and can be persisted on the device after the app closes. Page State holds values used only on one page, such as a search term or the option a user is choosing. Component State lives inside each component, and other components cannot reach it directly, so data is passed through parameters from the parent page. Choosing the right level keeps the app easy to maintain and avoids needless rebuilds.

Who is the FlutterFlow App Development course for, and what should I know beforehand?

It suits people who want to build mobile or web apps with little code, programmers who want to prototype faster, business owners and product teams who want to test ideas, and students or anyone interested. No programming experience is needed. You only need to be confident with a computer and the internet, and to have a FlutterFlow account and a Google account for Firebase.

What will I be able to do after the FlutterFlow App Development course?

You will be able to design screens with the UI Builder, themes and components, manage state, build logic with the Action Flow Editor, create user accounts and CRUD with Firebase or Supabase, upload images, call REST APIs, add custom code, take payments with Stripe, work as a team with branching, deploy to the web and prepare apps for the stores. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Can the FlutterFlow App Development course be run in-house for our team?

Yes. This course can be run in-house for your team, with workshop briefs adapted to your work, such as an internal app for field reports or a prototype for a new service. You can request a quotation from this page or contact us on LINE @itgenius or by phone on 02-570-8449.