
Learn to build an app without coding using FlutterFlow and Firebase through hands-on sessions in a friendly environment, turning your idea into an app without coding complexity.
Explore FlutterFlow, a visual development platform that simplifies app creation with a drag-and-drop interface, combining the open-source Flutter toolkit for design and prototyping.
Explore how Firebase, a comprehensive Google platform, accelerates app development with a real-time database, authentication, Cloud Firestore, Cloud Functions, and hosting, seamlessly integrating with multiple frameworks.
Sign up for FlutterFlow, create your first project, and explore the FlutterFlow dashboard and Firebase with key features, components, and settings for building apps without coding.
Set up a Firebase project, enable email and password authentication, and configure storage; create an authentication folder with a registered page and a users collection with a username.
Set up a login page in Flutterflow using a pre-built layout, apply a default theme, and link sign-in actions to the login and register pages.
create a portrait page, name it portrait page, and connect the login to forget password navigation; preview the app showing sign up, login, and forget flows.
Configure Firebase authentication in a Flutterflow app by creating user accounts with email, saving usernames to a collection, wiring login and password reset flows, and verify new users in Firebase.
Add sign-up logic to send email confirmation and check if the email is verified, navigating to home or login and showing a verification snackbar.
Create a homepage for your Flutterflow app by customizing the app bar to white with black text, adding icons as a menu icon, and designing the main section.
Build the home page by creating a card list of the latest movie reviews with movie names, using IMDb to search and add details, and show the review categories.
Create and customize a navbar for your app, enable the feature, add a reviews page, adjust icon, color, and elevation, and preview different styles such as Google and floating navbars.
Create and customize a navigation drawer in your Flutterflow app by wiring an icon to open the drawer, then preview and refine its appearance.
Set up a Firebase database for your app by creating a database named reviews and configuring fields such as title and banner, leading to a fully configured Firebase backend.
Connect your app to the database and display data on the homepage by configuring a query, selecting the reviews collection, and mapping fields like title, rating, and category.
Create a new review detail page, connect it to the front-end action to pass the selected review data, and display database-driven fields on the detail page.
Create a review detail page and connect the front-end card to pass the same data via a page parameter, then test the navigation to the detail page.
Add a frontend review form and post the data to the backend, creating a content section and saving the text area and rating bar data to the Reviews collection.
Learn to implement a like button in a Flutterflow and Firebase app by updating the database, toggling the icon, and displaying a like count on home and review detail pages.
Create an add to favorite button using the same like button logic, adding a saved by field as a user document reference and verifying the data is saved.
Create a like button on the home reviews detail page by adding a user-linked list field, updating the icon on like and remove, and displaying the like count.
Create a dedicated favorites page by reusing the approach from the my links and mileage pages, configuring a saved-by condition with a user reference to an authenticated user.
Create a profile page by using a single user document from the users collection, displaying a combined name and join date, and loading profile image URL from a resource document.
Create and design an account deletion page, then add a backend database Firestore action for authenticated users using the user reference.
Create a new change password page, design a simple layout, and add a reset password action using the backend state database. Update the email field label to enter your email.
Create a new change email page in flutterflow, design a simple interface, and wire it to firebase authentication by selecting update email and connecting the text field.
Learn to add a logout button to the app drawer, design the button, and configure its action to log out users in a Flutterflow and Firebase project.
Export your app by downloading the full source code and apk, test all pages, then run the apk on an MSI player to verify the app works.
Unlock the power of app development without the need for extensive coding knowledge! Welcome to the Flutterflow & Firebase Mastery course, your comprehensive guide to creating stunning mobile applications effortlessly. Whether you're a complete beginner or an experienced developer looking to expand your skill set, this course is tailored to meet your needs.
What You'll Learn:
Introduction to Flutterflow & Firebase: Dive into the fundamentals of Flutterflow, a no-code app development platform, and Firebase, a powerful backend service by Google. Understand how these technologies work seamlessly together to bring your app ideas to life.
Building Your First App: From setting up your development environment to creating a simple app, you'll get hands-on experience in building without writing extensive code. Explore Flutterflow's intuitive interface to design and customize your app effortlessly.
Advanced App Design Techniques: Learn advanced design principles and techniques to make your apps visually appealing and user-friendly. Discover the art of creating smooth animations and transitions to enhance the overall user experience.
Integrating Firebase Features: Leverage the capabilities of Firebase to add functionalities like authentication, real-time databases, and cloud storage to your app. Understand how to seamlessly integrate Firebase services to enhance the functionality of your creations.
No-Code Automation: Explore the power of no-code automation with Flutterflow. Learn how to streamline workflows, automate tasks, and create dynamic app features without delving into complex coding structures.