FlutterFlow & Firebase Crash Course - Build Your First App

Explore building blocks for app creation—columns, rows, text, image widgets, and stacks—and learn to set up actions to add functionality, so you can start building your first app.

Learn to use columns and rows to build flexible, responsive layouts, control alignment, enable scrolling, and craft a profile card with container, row, column, image, text, and arrow.

Master the text widget in FlutterFlow by adjusting padding, alignment, font family and size, color, line height, and letter spacing; enable auto size and gradients to prevent overflow.

Master the button widget in FlutterFlow by adjusting padding, alignment, width, height, fill color, elevation, borders, and hover states, while styling text and optional icons.

Explore the container widget to build user interface structure with padding, color, borders, gradients, shadows, and background images, and learn how alignment, sizing, and shape (rectangle or circle) affect children.

Explore the image widget in flutter flow, adjusting opacity, padding, alignment, size, border radius, and flex-based expansion for images in a column with asset and dark mode options.

Explore the stack widget to overlay a banner background image with a circle profile image, control alignment with height, width, padding, and opacity, and prepare for the next Firestore lesson.

Learn to add data to Firestore, FlutterFlow's NoSQL backend, by creating collections and documents with fields, and connect Firebase to build dog and cat records.

Learn to display data from Firestore on screen by building backend queries for dog and cat documents, mapping name, breed, age, and color to UI with filters.

Learn to create actions that navigate between pages, update Firestore documents by incrementing a count, and chain actions with delays.

Explore list view and grid view widgets in FlutterFlow, wiring a Firestore backend to fetch a dogs collection. Display each dog's photo, name, breed, and age with flexible layout options.

Pass data as a parameter to navigate from a gridview in flutter flow to a dog info page, using a document reference to load name, breed, age, and image.

Enable the nav bar in FlutterFlow, add pages like favorites and profile, and customize icons and colors to establish the bottom navigation.

Explore custom functions in flutter flow with dart to convert a dog's age into 'young' or 'old', using a define age function and a list view of dog documents.

Master state management in FlutterFlow by using widget state and state variables—app state, page state, and component state—and binding UI updates to user input with immediate reflection.

Toggle a boolean app state variable to control conditional visibility of an image in a Flutter Flow app, with the value derived from various sources and conditions.

Conclude section two by reviewing FlutterFlow fundamentals and prepare to build your first app in the final section, where we tie concepts together to create a complete application.

in section three we build a netflix-like movie app, tinder for movies, with a favorites list, swipes, and a watch trailer button linking to YouTube.

Set up your Flutter Flow and Firebase project, enable authentication, create a test-mode Firestore database, and create a users collection with autogenerate config files.

Create the movies collection in the FlutterFlow Firebase project, defining title, image, description, trailer URL, genre, length, year, and a liked by users reference list.

Add a movie document to the Firestore movies collection using the provided fields, then organize by genre on the home page and anticipate authentication pages in Flutter Flow.

Set up the navigation bar across home, swipe, and profile pages, customize colors and icons, and move the signup button to the profile page to build Film Flix.

Build a personalized home page that greets the signed-in user with their display name and showcases a horizontal, scrollable all-movies row bound to a backend movies collection, displaying movie images.

Add scrollable drama and comedy sections to the home page. Wrap text into a reusable column block and filter movies by genre in test mode.

Create a FlutterFlow movie details page that opens from a list via document reference, fetching Firestore data to display image, title, length, year, description, and trailer link with back navigation.

Learn to add and remove movies from a user's my list on the movie details page using Firestore actions and conditional visibility for the authenticated user.

Display a user's my list by replacing the backend query with dynamic children and a document from the authenticated user's my list, using conditional visibility and scrollable layouts.

Create tinder-for-movies swipe page in Film Flix app with a swipeable stack, enabling left swipes to skip and right swipes to add to the list, plus a movie details button.

Set up right and left swipe actions on the swipeable stack to add movies to a user's list and update the movie's liked by users in Firestore.

Explore Firebase Firestore rules in Flutter Flow to control who can create, read, write, or delete data in users and movies collections, and learn deployment and access levels.

Conclude the app by adding a login button on a profile settings page and wiring Firebase authentication for sign-in and sign-out, validating movie list interactions.

Celebrate completing the course by continuing to build apps with flutter flow. Explore a more advanced chat app course with flutter flow and firebase to add real-time chat.