Flutter 2.2 & Firebase, build a complete app from scratch

Lock your Flutter app to portrait orientation using the recommended code, preventing landscape overflow and handling device orientations for consistent user interface.

Download and clone the starter project to use the same SDK, browse the code, and access attached resources and YouTube tutorials for guidance.

Create a new Flutter project in Visual Studio Code and set up the initial theme and scaffold. Explore stateful versus stateless widgets, colors, and basic UI structure with an emulator.

Implement an animated login screen background using a stack with an animation controller and curved animation, manage lifecycle with init and dispose, and loop the animation with cached network image.

Finish the login screen by implementing email and password fields with validation, controllers, and decorations, add responsive spacing, a password visibility toggle, forget password, and a sign up prompt.

Implement the signup screen by adapting the login screen in Flutter, adding full name, email, password, position, and company fields, with controllers and validation, using push navigation with scroll view.

Learn to navigate between text fields in Flutter using focus nodes, requesting focus between full name, email, password, and position fields.

Build the forget password screen in a Flutter app by creating a new screen file, wiring a text field with a controller, and applying input styling.

Build the main tasks screen with a performance-focused list builder, featuring task tiles with leading icons, titles, subtitles, and a trailing action. Plan firebase integration for login and filtered task display.

Learn how to customize the drawer icon in Flutter by changing its icon data and color using direct icon, icon button, and icon theme data, with context-driven drawer opening.

Develop a delete task dialog in Flutter by wiring a showDialog method, returning an AlertDialog with actions, a text button, and a delete icon for task items.

Implement the filter dialogue design on the main screen in a Flutter 2.2 app, wiring a task categories list with a responsive dialogue, icons, and stateful interactions.

Implement the drawer header on the task screen with an image and text, and add a constants class for colors using static members for reuse across widgets.

Learn to build the drawer body in Flutter by creating a reusable drawer item, wiring dynamic items with icons and text, and adding a logout section with a divider.

Implement the sign-out dialog in a Flutter app using showDialog with the context, featuring a title, image, content asking to sign out, and Cancel and OK actions with red styling.

Learn to build the add task screen in Flutter, featuring a form with text fields, validation, and a date picker, plus navigation and a scrollable card layout.

Add a drawer to the scaffold and customize its background color, elevation, and icon theme, then implement a time picker dialog and navigate to the tasks screen using replacement.

Implement the task category dialog in the add task screen by wiring a static constant, wiring the text field to display the selected category, and updating the screen accordingly.

Implement the choose date dialog to allow future date selection via a date picker, set initial and last dates, and update the deadline controller with the picked date.

Validate the picked date to prevent null errors when users do not select a date, and implement safety checks to handle empty input without crashing.

Implement the all workers screen by adapting the task screen, creating a new Dart file, renaming widgets, updating images and dialogues, and enabling email composition via an email icon.

Create the user profile screen layout in Flutter 2.2 with Firebase integration, featuring a profile card, avatar, contact info, social buttons, and a logout option.

Change the sign up screen design and add image picker from camera or gallery, a phone number field, and a task category dropdown to enhance user registration flow.

Implement a Flutter image picker dialog that lets users choose between camera and gallery, with a title 'please choose an option' and clickable options using InkWell for photo selection.

Implement image picker functions for the gallery and the camera using a package, configure the source, height, and quality, and handle the picked file in both methods.

Implement the image cropper in a Flutter 2.2 app using the image croppa package, configure Android and iOS, and enable aspect ratio and zoom for camera or gallery sources.

Start implementing the task details screen in a Flutter 2.2 app, building a scrollable layout with a header, uploader card, deadline, and description.

Create an animated switcher to reveal and hide the comment input and widgets, using a text editing controller, customized borders and colors, and a boolean is commenting to toggle states.

Implement the comments widget by building a separated list with dividers, using shrinkWrap and non-scrollable physics, and rendering each item with a name and a comment body.

Learn to add a dynamic border color to the commenter profile image by initializing and shuffling a colors list, then using an index with animated switcher in Flutter for Firebase.

Add a WhatsApp chat launcher in Flutter using an unofficial icon package, launching a chat with a number and an optional message, with canLaunch checks and error handling.

Implement an in-app mailto action using a package in a Flutter 2.2 app, launching Gmail to send dynamic emails per user.

Develop a Flutter 2.2 dialer feature that opens a contact number via a button, calls the number with a future function, and handles launch errors for dynamic numbers.

Explore Firebase, a fully managed backend by Google, and how it pairs with Flutter to speed app development. Understand cloud storage, databases, pricing, and how reads and writes are managed.

connect your flutter app to firebase by creating a firebase project, adding an android app, downloading the google-services.json, and configuring gradle dependencies to enable authentication, database, storage, and analytics.

Get started with Firebase authentication in a flutter app by installing the auth package, initializing Firebase, and creating a sign-up with trimmed, lowercased email and password from controllers.

Master Firebase initialization in a Flutter app by wiring official packages and using a FutureBuilder with a progress indicator to manage loading states.

Learn how to implement email and password signup in a flutter 2.2 app with firebase, including form fields, loading indicators, and enabling email/password auth in firebase.

Learn practical error handling in a Flutter app by wrapping code in try-catch blocks, printing the error for now, and presenting user-friendly alerts or dialogs during sign-up flows.

Learn to implement user login in a Flutter 2.2 Firebase app by adapting register logic, initializing auth, signing in with email and password, and handling errors with simplified global methods.

Learn how to implement error handling from a single Dart class in Flutter. Use a reusable global method to show dialogs with context for register and login flows.

Use Flutter 2.2 and Firebase authentication to show different screens based on user sign-in status, via a StreamBuilder that toggles between a login screen and the main screen.

Implement the sign out method and code improvements in a Flutter 2.2 Firebase app by wiring navigator pop calls in the drawing widget and enabling lockout during registration.

Set up a Firestore database, create a users collection with documents and fields, and publish rules to govern reads and writes.

Initialize Firebase and Firestore, create a user document in the users collection, and save extra data like name, email, phone, position, company, and a timestamp.

Upload a user image to Firebase storage and obtain its URL. Save the image link in Firestore under a user images folder with a unique name.

Fetches and displays user data on the profile screen by reading a Firestore document snapshot. Shows loading state, mapping name, email, phone, and image, and converts timestamp to a date.

Show the correct user data in the profile screen by using dependency injection to pass the current user and initialize firebase, with simple state management and navigation reflecting updates.

Fetch all workers from Firestore using a stream builder. Show a circular progress indicator while loading, and display worker data when available with error handling.

Display the correct data for each worker by fetching and mapping Firebase data via dependency injection, initializing id, name, email, phone, position, company, and image, and rendering clickable details.

Determine if the logged-in user matches the profile being viewed by comparing the current user ID with the profile user ID in Firebase Auth.

Learn how to upload a task to Firestore by adapting the user upload flow, generate a dynamic task id, and store title, description, deadline timestamp, category, and comments.

Generate dynamic, unique task IDs in a Flutter app by integrating a pub.dev package, initializing a final task ID, and using timestamps and deadlines when uploading tasks.

Learn to add a loading spinner and a toast in a Flutter app using a toast package, with error handling and task form validation for category and deadline.

Enforce mandatory category and deadline date fields in flutter 2.2 and firebase by validating the relevant controllers. Show an error when a field is unselected and permit upload after validation.

Fill in the task title, description, deadline date, and category, upload, and then reset the form to its default state to prevent duplicate submissions. The next tutorial covers fetching tasks.

Learn to fetch tasks from Firestore in Flutter using a stream builder, display title, description and deadline, and manage done status with add and delete options.

Enforce that only the task uploader can delete a task by comparing uploader ID to the current user, with dialog confirmations and live status updates.

Fetch and display task details from the data source, including author, timestamps, and deadlines, by building a task details screen that reads data, converts timestamps, and handles state.

Enable the uploader to change a task's state (done or not done) by updating firebase, with access checks and visual cues like icons, opacity, and error dialogue.

Implement the post a comment method to add a new comment to a task’s comments array in firestore. Validate comment length and show a success toast after posting.

Learn to fetch task comments from Firestore using a future builder, reading document snapshots, handling loading and no data states, and displaying comments on the screen.

Display the comments on the screen by transforming the comments widget to a state for widget and initializing the comment id, commenter name, and comment body, then post and rebuild.

Enable tapping the commenter's avatar or name to navigate to their user profile in a Flutter 2.2 and Firebase app.