Build A Chat Application With Firebase, Flutter and Provider

Build a chat app with Firebase authentication and Flutter interface, featuring login and registration pages, profile and search pages, and the ability to manage conversations and media messages.

Set up a Flutter project, install Firebase dependencies, and verify the app links to Firebase while exploring authentication, database, storage, hosting, functions, and the machine learning kit.

Connect your iOS Flutter app to Firebase, add dependencies for analytics, authentication, storage, and Cloud Firestore, configure GoogleService-Info.plist, and verify integration by running the app.

Link your android app to firebase by adding required dependencies, configuring google services, and enabling firebase analytics, authentication, storage, and database integration, with min sdk updated to 22.

Build the login and sign up UI in a Flutter app, set dark mode with a custom primary and background color, and route the login page as the home screen.

Build a login page UI in Flutter featuring a welcome heading, two text fields, and a login button, with responsive layout and a global form key to manage input.

Complete the login page UI with email and password fields, a login button, and a registration link, using a gesture detector, and prepare to connect with Firebase authentication.

Enable email and password authentication, create a test user, and set up a cloud database with a users collection to model each user's email, name, last seen, and image.

Build authentication provider using provider framework with firebase auth to sign in with email and password, manage authentication status via an enum, and keep a single auth provider with change notifier.

Learn how to implement login logic with email and password using provider, notify listeners on changes, and validate inputs before calling the login function.

Wrap the login UI with a ChangeNotifierProvider using the auth provider, use a builder to access it, and use its instance to log in and update the UI.

Authenticate users with email and password via the auth provider on Firebase, show a loading state with a progress indicator, and update status and listeners for success or error.

Learn to build a reusable snack bar service in Flutter that shows success and error popups via scaffold, using a singleton instance and build context management during login flows.

Build a Flutter registration page user interface, including a scaffolded, centered form with name, email, and password fields, an image selector, and a global form key for validation.

Continue building the registration page user interface by adding name, email, and password fields with validation, and implement a sign-up button and back-to-login navigation with a navigation service.

Create a Flutter navigation service using a navigator key to push, replace, and go back between login and registration pages. Bind it to MaterialApp and initialize with login route.

Create a media service with image picker to access the device gallery, wire it to the image selector on the registration page, and manage camera, microphone, and photo library permissions.

Capture user input for name, email, and password, model a Firebase user document in the users collection keyed by authentication id, and store email, name, image, and last seen timestamp.

Create a database service to save user data in Firestore, using a users collection with documents keyed by user id and fields for name, email, image, and last seen utc.

Build a cloud storage service to upload user profile images to Firebase storage, defining a storage class with a base reference and an upload function targeting the profile_images folder.

Implement a register user function in the auth provider to create a Firebase user with email and password, handle success and errors with a snackbar, and update last seen time.

Develops the registration flow by validating form data, ensuring an uploaded image, and creating a Firebase user; then uploads the image and saves user data to Firestore.

Finalize the authentication module in the Flutter and Firebase-powered app by adding a home page and navigation that redirects authenticated users to the home screen for chat and user search.

Structure the chat application's data in Firebase and build cloud functions to manipulate the saved data. Explore the database of a completed app and replicate its data structure in Firestore.

Explore how to structure Firebase data for a chat app, including user documents, conversations, and messages, and how automated logic links conversations to users and propagates new messages.

Learn how Firebase and cloud functions automatically create conversations between two users and sync the latest message by updating each user's conversation document.

Understand how each new message updates the last message and timestamp in both users' conversations via a cloud function, updating fields like message, sender id, type, and timestamp.

Discover how every user document stores a conversations collection to surface chat previews on the home screen, showing partner image, last message, name, and timestamp.

Populate a Firestore chat with dummy data by creating a conversations collection, adding member IDs and messages, then copy data to each user’s conversations collection via a cloud function.

develop and deploy the first firebase cloud function for a chat app, using node, firebase tools, and typescript to auto-update user conversations when a new conversation is created.

learn to implement Firebase cloud function on conversation updated to sync last message and timestamp across users' conversations, updating unseen counts in a multi-user chat.

Finalize section: populate the Firebase database with a new conversation between James and Tom, add members and owner, and create an initial message.

Learn to build the remaining chat app pages by retrieving data from firebase and displaying it in the user profile, recent chats, and user search pages.

Enable automatic login on app launch to keep users signed in without credentials. Implement auto login and check current user is authenticated to navigate home when a user exists.

Build a tab page controller on homepage to navigate between recent chats, user search, and the profile page using a tab bar with icons, tab view, and a tab controller.

Create a responsive profile page UI in Flutter, centering a column inside a sized box and using media query for height and width, with image, name, email, and logout button.

Link the author provider to display current user data via a stream on the profile page, including a loading indicator and logout flow.

Create a recent conversations page in a flutter app to display the current user's chats using a list view and list tiles with leading avatars.

Pull data from Firebase and populate the recent conversations page by wiring provider, streaming conversation snippets, and rendering a dynamic list with user images and last messages.

Build a flutter search page UI by creating a stateful page with a text field and a users list, using a list view and tiles with avatars and last-seen data.

wire the search page to Firebase using Provider, fetch users as a stream from the database service, and render a dynamic user list with loading indicators.

Enhance the search page by displaying last seen status (active or inactive) with a green indicator using the time ago package, and filter results with a Firebase query.

Finalize changes for profile search and recent conversations, implement last seen time updates, fix snackbar context, and improve empty state handling to prepare for the chat page.

Develop the conversations page to chat with different users, sending and receiving messages, and view when the last messages were sent, including image messages.

Create a stateful conversation page in flutter and wire navigation from recent conversations to the chat screen, passing the receiver’s id, name, and image, and display the receiver name.

Develop the conversation page user interface by building a stack-based layout with a list view, a text input, and a send image button, featuring gradient message bubbles and responsive sizing.

Create a Firebase data service function to fetch a conversation from Firestore, map document snapshots to a conversation model with messages, and populate the user interface list view.

Display messages in a conversation by wiring a stream builder to the database service, render messages with timestamps and timeago, a loading indicator, and sender differentiation.

Link the auth provider to the conversation page and use a change notifier provider to distinguish messages from us and others, driving a dynamic chat interface.

Enhance the conversation page UI by showing avatars beside messages and applying padding. Align bubbles by sender, distinguishing own messages, using a horizontal layout with image and message widgets.

Create the chat input area in Flutter, rendering a bottom-aligned message field with a text input, a send button, and a media/camera button for rich messages.

Create a form key and message text state to save and validate user input from the chat field, wire onChanged to update and print the text for debugging.

Create a database function to post a message to a conversation by appending content, sender id, timestamp, and text type to the messages array, then validate and reset.

Send image messages in the conversation by uploading media to Firebase cloud storage and displaying them in an image message bubble, alongside text messages and dynamic height handling.

Style image messages in Flutter using decoration and network images, review how Firebase stores messages, and implement auto-scroll to bottom with a scroll controller in the conversation page.

Update cloud functions to attach image message types in conversations and render attachments as the last message, not text. Deploy Firebase functions and adjust the app UI to show attachments.

Search for a user, create or fetch a conversation in Firebase, and navigate to the conversation page loading messages with the recipient and current user IDs, name, and image.

Finish finalizing section by showing an empty state in the conversation page when there are no messages, and ensure new conversations are created automatically with timestamp and last message attribute.