Flutter & Firebase Chat App: Master Flutter and Firebase

Learn how to create a Firebase project, access the Firebase console, and set analytics before integrating the project with a Flutter app for iOS and Android.

Learn to integrate Firebase on iOS for a Flutter app by registering the iOS project, adding the Google services file to the runner folder, and enabling Firebase Analytics.

Register your Android app in Firebase using the package name from Gradle, download google-services.json, place it in the app folder, apply the google-services plugin, and set the SDK to 21.

Model a Firebase Firestore chat app by organizing two collections: users and chats, with user profiles (email, name, image, last active date) and chat documents (isGroup, members, isTyping, messages).

Begin with building a splash page and creating core services like navigation, database, and media interactions to prepare the app for startup and user interaction.

Create a Flutter splash page by structuring a dedicated splash page file, implementing a stateful splash widget, configuring a material app theme, and loading an asset image from assets/images/logo.png.

Explain how the splash page initializes the Firebase app, registers services, and transitions to the main app when initialization completes using runApp.

Initialize the splash page by setting up an asynchronous initialization sequence that binds widgets, initializes the Firebase Core, registers services, and calls on initialization complete to proceed to navigation.

Create a navigation service in Dart to manage app routing with a global navigator key, including push, pop, and navigate to page utilities, registered as a GetIt singleton.

Create a media service to access device images via the file picker, implement pick image from library, and register a singleton for global access with GetIt.

Create a cloud storage service with utility functions to save files to cloud storage using firebase storage and file picker; define a user collection and register a singleton.

Create a database service to interface with Cloud Firestore, defining user, chat, and messages collections and implementing a singleton for app-wide access.

Finish the splash page by delaying one second for initialization, then transition to the main app using a material app, a navigation service, and a navigator key.

Begin implementing the login page for your Flutter and Firebase chat app, showing the initial screen users see and outlining the next steps to create the login page.

Create a login page in Flutter by adding login_page.dart, importing material, and building a stateful widget, then set up routes and initialRoute to navigate from splash to login.

build a login page by creating a scaffold body with a padded container using media query for responsive height and width, then add a modular, styled page title.

Design a modular login form in Flutter by building a custom text form field widget for email and password, with a form key and regex validation.

Add a login button by building and integrating a custom rounded button widget in Flutter, with responsive sizing, decoration, and on pressed handling on the login page.

Add a register account link on the login page by creating a text button wrapped in a gesture detector with an on-tap handler to navigate to the registration page.

Implement login logic and Firebase authentication to navigate to the main chat page and user list.

Create an authentication provider using the provider package to support login and registration pages, manage authentication state with change notifier, and expose navigation and database services via get_it.

Create a chat user model in flutter by defining chat_user with uid, name, email, image URL, and last active, plus fromJson, toMap, and recent-activity utilities.

Enable firebase authentication, create a dummy user with email and password, and store it in the database with uid, name, email, image, and last_active; upload a profile image to storage.

Implement an asynchronous login function in the authentication provider that uses Firebase's signInWithEmailAndPassword with email and password, including error handling and console logging for failures.

Implement a stream listener for Firebase auth state changes in the authentication provider to detect login status, drive navigation, and cache user data for real-time updates and performance.

Implement database service functions to fetch a user document by uid from the users collection and to update the last active time to UTC now in the authentication flow.

Parse user data from the snapshot retrieved by the get user function. Convert it to a map and build a chat user with uid, name, email, image, and last active.

Create a home page and route from the login flow using a navigation service, replacing login with /home after authentication and accessing the current user via the authentication provider.

Build the registration page UI by assembling its components in a Flutter & Firebase chat app, prepare for future business logic, and enable in-app account creation without manual Firebase registration.

Create a registration page in Flutter by importing material package, file picker, provider, and services; build a register page with authentication logic and navigate between login and register routes.

Create a profile image field widget that displays the selected image and lets users pick from the device library, showing a rounded image that can source from URL or file.

Implement a rounded image widget and file picker to select a profile photo in the register page, wiring it with gesture detection and state updates to display the chosen image.

Add a registration form to capture name, email, and password using a form key, three custom text form fields, and onSaved handlers with basic validation and password obscuring.

Add a register button to the Destra page beneath the register form, using a custom blue rounded button with responsive height and width, and an asynchronous onPressed placeholder.

Implement the registration page business logic to capture user input and register users on Firebase, preparing for the next video where we stitch it all together.

Link authentication, database, and cloud storage in the registration flow, implement email/password registration with input validation, and plan to save the user to the database and upload their profile image.

Develop a Firebase cloud storage function to save user and chat images, constructing storage references, uploading files, and returning download URLs for a Flutter and Firebase chat app.

Implement a Firestore create user function that saves uid, email, name, and image URL to the users collection, stamping last active time with UTC now.

Register a new user with Firebase authentication, upload the profile image to storage, and save user data in the database, then navigate back to the login page.

Register new users to Firebase auth, storage, and Firestore, then implement a logout-and-login flow to ensure redirection to the homepage after registration.

Introduce the homepage UI with a bottom tab bar to switch between chats and users pages, wrapping the chats and users pages and handling their business logic.

Set up a home page with a bottom navigation bar to switch between chats and users, using a pages list and a current page index to render the chosen page.

Create a chats page in Flutter and wire it into the home page. Show the chats page when the chats button in the bottom navigation bar is pressed.

Implement the users page and replace the green container on the homepage, wiring it to the bottom navigation bar and preparing for upcoming user interface elements and chat logic.

Begin this module by outlining the chat page's UI elements and the corresponding business logic, then implement the UI in the chats page in the next video.

Create a top bar for the chat page that displays the title and a logout button, using the authentication provider and a dedicated top bar widget.

Create a flutter chat message model with senderId, content, type, and sendTime; include a text, image, unknown enum and fromJson and toJson utilities for Firestore.

Develop a chat model class in Flutter, integrating chat user and chat message models, with members, messages, recipients, an activity flag for typing, and group chat support.

Learn to build a reusable Flutter list tile with activity for a chat app, including a title, subtitle, image with a status indicator, and on-tap behavior using a custom widget.

Create rounded image with status indicator for chat list tiles in Flutter by extending the rounded image network and using an active flag to show a green or red dot.

Extend the custom list tile with an activity-aware subtitle that shows the last message or a typing indicator using spin kit, controlled by isActivity.

Refactor the chats page by turning its build logic into modular functions: a charts list and a chart tile, returning widgets and preparing the page to integrate the business logic.

Implement a chats page provider to decouple business logic from the UI, manage state and data flow, and integrate authentication and database services including the chat stream.

Create a Firebase Cloud Firestore chats collection, add dummy chat documents with is_activity, is_group, and members, and build a messages subcollection with sender_id, timestamp, and text.

Implement a Firestore-based function to get chats for a specific user, returning a real-time stream of snapshots from the chats collection where the members array contains the user’s uid.

Create a Firestore query in the database service to fetch the last message by navigating to chats/{chatId}/messages, ordering by timestamp descending, and limiting to one to display as chat subtitle.

Set up a real-time chats stream from Firestore for the current user and map documents into chat objects. Resolve futures with future.wait, populate members and last message, and notify listeners.

Populate the chats page from the chat stream data using a provider and ListView.builder, rendering chat tiles and handling loading states.

Take a chat as input, extract recipients and activity status, and build the chat tile with title, subtitle (text or media), and image, using stream updates and notifying listeners.

Learn to build a chat page in a Flutter and Firebase app, enabling text and media messages, a scrollable chat design, and a top-bar delete action.

Create a chat page in a Flutter and Firebase app by importing providers, models, and widgets, and building a scaffolded user interface with custom list tiles and input fields.

Learn to implement a responsive top bar for a Flutter chat page, including a top bar widget, primary and secondary actions, and responsive padding using device width and height.

Create a chat page provider in Flutter with Firebase integration, wiring database, cloud storage, media, and authentication services, and use a multi provider to supply chat data and message handling.

Implement stream messages for a chat, delete chat, add message to chat, and update chat data in a Flutter and Firebase chat app.

Set up a Firestore stream to listen to messages within a chat's messages collection, subscribe in the chat page provider, and update the UI in real time.

Create chat app features by implementing delete chat and unsend text or image messages, and save them in cloud storage, for a Flutter and Firebase chat app.

Fetches messages from the chat page provider and renders them in a list view, showing a loading indicator and a 'be the first to say hi' state with white text.

Create a reusable custom chat list view tile in flutter that renders message bubbles with conditional alignment, optional avatar image, and spacing within a list view.

Learn to build a reusable text message bubble widget for a Flutter and Firebase chat app, including gradient styling for messages sent by user versus others, and integrate time-ago formatting.

Create an image message bubble widget in Flutter for a Firebase chat app. Build with network image URLs, decoration image, border radius, and integrate into custom list view tiles.

Add a bottom send message form with a text field, send button, and image upload widget, wired to the chat provider to publish new messages.

Add a send message button and an image message button to the chat UI, using an icon button and a floating action button with responsive sizing.

Link the chat page provider to the chat UI to send text messages with Firebase and Firestore, validate input, save the message, and clear the input after sending.

Add image messaging to the chat by selecting images, uploading to Firebase storage, and sending a download URL as a chat image.

Wire up the back and delete chat buttons in the chat page, linking actions to the page provider and delete chat function while validating message sending and multi-language support.

Discover how to auto-scroll a Flutter and Firebase chat list to the latest message by implementing a messages list view controller and using a post frame callback.

Implement typing activity indicators in the chat page by listening to keyboard visibility changes with the Flutter keyboard package, and updating the chat document's is_activity flag via update chat data.