FlutterFlow & Supabase – The 2025 Mobile App Course

Explore building layouts with rows and columns in FlutterFlow. Learn to arrange images and text using padding, spacing, alignment, and scrollable options, and combine columns inside rows for responsive grids.

Learn how containers size and style widgets and create backgrounds, adjusting padding, color, borders, border radius, shadows, and max or min dimensions with center alignment.

Learn how to set a background in a FlutterFlow app by wrapping a row in a container, adding a background image, and applying a white-to-transparent gradient across multiple layers.

Learn to use the text widget in FlutterFlow, customize its padding, alignment, font size, and styling, and apply theme settings with fonts, colors, and max lines.

Learn how list views improve performance for dynamic data by replacing a column of containers with a list view, enabling native scrolling and loading only visible items.

Create and customize a button widget within a column, center-align it, and tailor text, style, width, height, color, elevation, padding, and hover effects; add and configure an icon.

Master the image widget in FlutterFlow, center it with a column, and adjust width, height, and border radius. Load from network or assets, apply box fit, and enable full-screen expansion.

Leverage the stacking widget to overlap a container and a circle image in a stack with proper order and padding. Adjust width, height, and opacity to refine alignment.

Navigate between pages by adding on tap actions to buttons, switch from home to page two and back, and explore transition types like instant, fade, and slide up.

Create a form with a text field, a dropdown, and a checkbox, arrange them in a row, set 100% width, and enable submit validation with error alerts.

Explore how to configure app bar and nav bar in FlutterFlow, adjusting height, elevation, color, and icons, centering text, and managing multiple pages with show nav bar.

Learn how widget states fetch and display or store data from a widget, using a text widget and a dropdown with a default when nothing is selected.

Learn to build a combined text display that shows 'you selected' plus the dropdown state using a combined text widget, including a default value and testing with names.

Learn to use conditional properties in FlutterFlow to show content based on widget state. Show 'you selected' when an option is chosen, else 'nothing has been selected'.

Learn how to manage page state in FlutterFlow by using a boolean is red variable, initializing to false for purple, and toggling the background color with two buttons.

Explore app states to share a boolean across pages, set defaults, update app state with actions, and drive color changes from red to purple on home and form pages.

Learn how to use page parameters to pass information between steps in a flow, from a form drop-down to a confirmation page, using string parameters and widget state.

Create and manage reusable components to streamline the user interface across pages, using parameters to customize text and color, and update all instances from one location.

Build a custom navigation bar in flutter flow by stacking the home column, adding a three-item bar (home, plus, profile), and turning it into a reusable color parameter component.

Add a rating bar widget to a home page and customize initial rating, interactivity, star count, size, orientation, and icon style. Display the chosen rating in text.

Learn to implement bottom sheets as components to confirm name updates, pass the user name as a parameter, update the app state, and dismiss the sheet after confirmation.

Create a logout dialog as a custom snack bar, using a 250 by 150 container, a stack, and a button icon, triggered by three dots and aligned to the icon.

Clone the project by pasting the provided link into the URL and selecting clone to access the prebuilt pages. Remove the safe area and reuse the template in FlutterFlow.

Set up a Supabase account by signing up with email and password, confirming sign-in, naming the organization flutter flow tutorial, selecting a nearby region, and creating a new project.

Create tables in Supabase via the table editor, including a users table with uuid, name, email, and profile picture, and a posts table with cascade delete.

Connect a Supabase backend to a Flutter Flow app by enabling email authentication and configuring the API URL and API key, then pull the post and user tables.

Enable authentication, create an account flow in FlutterFlow linked to Supabase, insert user data into the schema and public tables, then navigate to the home page after sign up.

Set up the sign in page with email and password, enable sign up and login navigation, navigate to the home page on login, and enable logout from the user menu.

Learn to save a new post to Supabase from FlutterFlow by inserting title and description into the post table, linked to the authenticated user, then redirect home.

Create a post by uploading a picture to a Supabase storage bucket and folder, then save the image URL in the post record alongside title and description.

Query list from Supabase shows user-specific posts on the home page by filtering the post table by the authenticated user ID, with default images and fields like title and description.

Enable users to tap a post, open an edit page with its post row, update the title and description in Supabase, and return to the home page.

Edit image data by uploading a new post picture locally, displaying it, saving to Supabase, deleting the old picture, and updating the post with the new URL.

Delete a post by removing its picture from Supabase, deleting the post row in the post table using the post id, then navigate back to the home page.

Explore editing and displaying a user profile in FlutterFlow with Supabase by uploading a 300 by 300 profile picture or updating the name, and reflecting changes on the home page.

Implement a simple search to filter users by name, excluding the authenticated user, and display results in a dynamic list with network profile pictures; show all users when empty.

Create a friends table in Supabase with user_id and friends_id, link it to users, and add a friend from the search screen via a bottom sheet confirmation.

Create a Supabase view by joining the friends and users tables to surface each friend's name and profile picture in real time.

Display a Supabase view inside a friend's page by refreshing the schema and querying the friends view with the authenticated user ID to show each friend's name and profile picture.

Link a friend’s profile to the authenticated user by passing a friends row and display the friend’s picture, name, and posts. Unfollow via supabase delete row from the friends table.

Enable the in-app cache at the app level to store posts data for seamless navigation, and clear the query cache on create, edit, and delete to show updates.

Enable and manage app-level caching for profile data, create a profile cache, clear it on updates, and verify faster loads when navigating home.

Insert Google Maps into the FlutterFlow project, enable linked post locations, and save place ID, address, and latitude and longitude in Supabase while displaying the map under posts.

Set up the Google Maps API key by enabling necessary services, configuring the OAuth consent screen, creating credentials, and pasting the key into the FlutterFlow app's Google Maps settings.

Set up the add address UX by turning the address field into a button that opens a bottom sheet for Google Maps address search and selection in a FlutterFlow app.

Learn to create two api calls in FlutterFlow to fetch address options from user input and then obtain latitude and longitude from place details.

Visit Google Cloud, start a free account, choose your country, then fill the payment profile and add a payment method to activate pay-as-you-go.

Enable users to search and select a saved address via a bottom sheet, linking address and place ID through app state, live API address suggestions, and UI updates.

Add place address, place id, latitude, and longitude columns to the Supabase posts table, then update posts with the selected address and id and fetch latitude and longitude via API.

Add a bottom map view on the home page with pins for traveled locations using Google Maps; manage a lat long list, center, zoom, and container padding.

Create a custom function to convert latitude and longitude doubles into a nullable lat long, using flutter flow code, and test with supabase values, saving as convert lat long.

Learn to pin user posts on a map by querying posts with location from Supabase, looping through results, converting to lat/long, and rendering markers in FlutterFlow.