FlutterFlow Beginners Bootcamp: Build your app from scratch

Explore FlutterFlow, a no-code and low-code app builder that enables rapid cross-platform development for iOS, Android, and web through drag-and-drop interfaces, with templates, component reuse, and optional code integration.

Learn how Firebase, a backend as a service, powers authentication and database management in FlutterFlow, and compare Firebase with Supabase for the course setup.

Create a new FlutterFlow project from scratch and complete the homework by connecting it to Firebase, enabling authentication with email/password, configuring database and permissions, generating config files, and deploying rules.

Explore widgets and the interface in FlutterFlow by using the widget palette to understand the widget tree, scaffold, column, text button, image, and app bar.

Learn to use the scaffold widget as the page container, configure background color and safe area, manage keyboard behavior, back button handling, and navbar options across multiple pages.

Explore the column widget in flutterflow, learning how to arrange widgets vertically within a scaffold, add texts and images, and manage alignment, scrolling, spacing, and padding.

Learn how the row widget orders widgets horizontally, enabling text and image items, with padding, item spacing, and alignment options, plus optional scrolling.

Learn how buttons let users interact with the app, trigger actions, navigate pages, and reflect text field input via widget state and properties like hover style and elevation.

Explore the wide range of FlutterFlow widgets, from image widgets (network or local) to media players and Google Maps, and practice with these widgets throughout the course.

Convert widgets into reusable components to reuse across multiple pages in your FlutterFlow app, then update the component to propagate design changes everywhere.

Design a profile page in FlutterFlow by arranging an image, multiple containers, text, and a writing bar. Experiment with colors to customize the layout.

Learn to build a FlutterFlow UI by composing columns and rows, centering an image, adding padding and containers, and incorporating text, icons, and a rating bar with styling and elevation.

Learn how actions in FlutterFlow respond to user interactions, including on tap, double tap, long press, page load, and phone shake, using the action flow editor.

Explore the action flow editor to apply navigation actions, backend actions such as Firestore, app state management, and widget UI interactions in the FlutterFlow workflow.

Implement navigation with a navigator to jump to page two and return, and manage drawers with open and close actions in a scaffold, using buttons and ui interactions.

Create new documents in the products collection of firestore using flutterflow's action flow editor, mapping widget state fields product name and color to document fields.

Read a specific product from a backend in FlutterFlow by querying the products collection with a filter, and display the product name and color when a button is pressed.

Learn to implement update functionality in FlutterFlow using the update document action, authenticated rules, a text field and icon button, and a Firestore query to modify a product name.

This FlutterFlow beginners bootcamp lesson demonstrates deleting a document in the database using actions, a delete icon, and a confirmation step.

Explore state management by rearranging the project: add a new page, copy navigation buttons, and connect the page to the database flow as you prep for deeper state management study.

Learn to manage app state by creating a local integer counter, updating it from a text field with a button, and displaying the result, without Firebase.

Learn to update the page state within a scaffold, use a text field and a counter two double, and compare page state with app state via navigation.

Learn state management by comparing app state and page state in FlutterFlow. App state persists across pages, while page state remains per page, with practical examples.

Learn state management by setting and resetting a text field in a FlutterFlow app. Use set form field and reset form fields actions with app state or variables.

Explore widget ui interactions in FlutterFlow by implementing a bottom sheet, a date picker, and a color picker, wiring navigation and state to show results.

Learn to use widget ui interactions to open and close a drawer in FlutterFlow, wiring actions to a button and a scaffold to control page views, tabs, and images.

Learn how to implement alerts and snack bars in FlutterFlow, including alert dialogs with informational messages and close actions, and snackbars with close buttons and options.

Learn to use FlutterFlow utilities to set dark mode settings, enable spark colors, and toggle between dark and light modes from scratch.

Add share options in a FlutterFlow app by implementing send email and call number actions with configurable mail address, subject, and body, then test on a device with the APK.

Explore how to apply on page load animations to widgets in FlutterFlow, including rotation, slide, duration, delay, and reverse options, with live previews and configuration tips.

Learn to apply widget animations triggered by actions in FlutterFlow, including starting, stopping, looping, resetting, and reversing animations on a circle image via on action trigger.

Learn to use the Lottie animation widget in FlutterFlow and configure a loading animation. Copy the JSON link and control playback with a start-stop action.

Learn how to implement Rive animations in FlutterFlow by selecting a Rive animation, adjusting properties such as artboard and looping, and triggering animations with a button and actions.

Discover action types in FlutterFlow, including platform integrations and when to use custom actions or cloud functions; note that cloud functions are not covered in this course.

Apply conditional actions in the action flow editor using a boolean app state to trigger true or false alerts, with two approaches: single condition or direct app state usage.

Learn to design a login page from scratch in FlutterFlow, using a logo image, email and password fields, and a sign-in action, plus a register link for new users.

Design a register page by duplicating the login page, updating the title to register, adding a confirm password field, and adjusting labels, colors, and alignment.

Enable Firebase authentication in settings and configure FlutterFlow actions to register, sign in, and store user email in a Firebase user collection.

Add a logout button wired to Firebase authentication to end the session and return to the login page, then sign in as Joe to reach the home page.

Configure the send email verification link on the register page, customize the Firebase template language, run and test the sign-up flow, and ensure verification before accessing the home page.

Learn how to implement form validation in FlutterFlow by building a register page, validating email, password, and confirm password, displaying required-field messages, and customizing validation messages and interactions.

Learn to implement the back end query to display database items on the screen, navigate between the home and action pages, and reorder and duplicate pages to organize the project.

Learn to use the query collection to display all product names from the products collection, configure list of documents, and preview backend query results on the screen.

Learn to use a single document query in a container to display a specific product by filtering the owner to the authenticated user, handling defaults and indexing the first element.

Implement document from reference to view details of a database element and pass a parameter to a user details page, then display the user's email, display name, and phone number.

Define and test an api call in FlutterFlow to fetch city data via reverse geocoding with an api key. Set latitude and longitude as variables and extract city with jsonpath.

Create an api call flow by adding latitude and longitude fields, a get city button, and binding inputs to the api call to display the city result.

Learn to perform read queries with sqlite in flutter flow, configure an offline database, select person id and last name, and display results in a list view.

Explore sqlite insert and update queries with practical notes-app examples. See how to insert a person and use variables in flutter flow's sqlite backend.

Learn to update a database record in FlutterFlow using a SQLite update query, setting new column values by id, passing parameters, and confirming with a snackbar.

Master deleting a row in sqlite with a delete person query, using person ID as the integer id variable, and refresh the page to see the element removed in FlutterFlow.

Learn to implement text field actions in FlutterFlow, showing a snackbar with input on submit, updating app state, and triggering on change and on focus change for dynamic behavior.

Build a search engine in flutterflow using a text field with on-submit actions, choose simple search or algolia, and display results from a firestore collection with a list view.

Build a simple search engine in FlutterFlow by wiring a text field to a products query, toggle visibility with an app state, and enable autocomplete with onChange.

Implement choice chips and on selected actions to filter products by color using app state, update page state, and display a snackbar.

Explore the basics of Dart variables in Flutter Flow, covering strings, numbers, lists, and maps, with var and explicit types, plus basic operations like print, addition, multiplication, and division.

Learn to create functions in Dart with two approaches: symbol-based and bracket-based with return; see integers like one and five yield results, and apply the second method in Flutter Flow.

Create a custom function in Flutter Flow with two integer inputs A and B and integer output. Test with 15 and two to verify the result 19.

Apply a custom function on the home page by connecting two text fields to a plus two function, update the app state with the result, and display it.

Use artificial intelligence with Copilot to create a function in flutter, defining two non-nullable integer parameters to add numbers, and preview generated code.

Learn to use chatgpt to generate dart functions for flutter flow, define inputs and outputs, handle nullability, test results, and apply date formatting and arithmetic functions.

Build a simple FlutterFlow interface with a text field, a button, and a result display, then create a ChatGPT-assisted function to format an email and show the output.

Define per-collection security rules in Firebase, covering create, read, write, and delete permissions for users and products, enable authentication, and deploy updated rules.

Apply authentication rules to a FlutterFlow project, create user and product entries, and enforce authenticated-user access with deployable database rules; update products via a user reference and a list view.