Build a Google Drive Clone with Flutter, Firebase and Getx

Configure packages for a Google Drive clone in Flutter, including Google fonts, Eva icons, GetX, Google Sign-In, Firebase Auth, Firestore, and storage initialization.

Configure Firebase for an Android app by creating a Firebase project in the console, downloading the google-services.json, updating project and app Gradle files, and preparing for Google sign-in authentication.

Configure android settings by setting min sdk version to 24 and target sdk version to 30, enabling multi decks and external storage permissions in the manifest, then proceed to coding.

Create a login screen UI in Flutter, using GetX for state management, assets and styling with Google Fonts, and set up Firebase authentication for the back end.

Finish the login UI by adding spacing, text styling, and a gradient background with a responsive layout. Prepare a Google sign-in button and Firebase-backed authentication using Getx for state management.

Enable Google sign-in in Firebase authentication, generate SHA-1 and SHA-256 fingerprints from your keystore, and add them to your app settings to authenticate Flutter users.

Configure Google sign-in for Firebase and build an authentication controller with GetX to manage state, inject it into the login screen, and implement a login function to authenticate users.

Learn to implement Google sign-in with Firebase authentication in a Flutter app, create sign-in instances, obtain tokens, save user data to Firebase, and initialize Firebase at app startup.

Learn how to securely save Google sign-in user data to Firestore by creating a users collection, setting rules, and storing profile, email, and creation timestamp tied to the UID.

Navigate users by authentication state with a reactive GetX controller and Firebase; after Google sign-in and saving user data, authenticated users reach the home screen while others see login screen.

Learn to customize a glassy tab bar in a Flutter-based Google Drive clone, building a storage and files navigation header with shadows, an app bar, and a responsive UI.

Build a storage screen in Flutter by creating storage container and upload options widgets. Position them under the header and tab bar to compose the Google Drive clone's storage UI.

Build a responsive Flutter storage container user interface with a glassy look, circular progress, and used vs. free storage indicators (50 gigabytes of 300 gigabytes).

Builds the bottom storage options row for the upper storage screen, using a reusable colored container widget to display images, videos, documents, and audio with responsive user interface.

Use GetX to manage the tab bar state in a Flutter Google Drive clone, building a navigation controller with obs and obx and switching storage and files screens.

Build the file screen UI for the Google Drive clone in Flutter by replacing a container with a column containing a recent files section and a folder section, using GetX.

Create a recent files widget for a Flutter, Firebase, Getx Google Drive clone, featuring a header and a horizontally scrolling list of image cards with captions.

Build a folders section widget in flutter using a grid view with a sliver grid delegate, showing folder images, names, and item counts in a scrollable glassy UI.

Place a bottom-centered plus button on the file screen using a stack and single child scroll view. Open a modal bottom sheet to add a folder or upload a file.

Create an add folder dialog in Flutter using an alert dialog with a text form field, autofocus, and cancel and add actions that update the UI and database.

Add folders to firebase by wiring a button tap to save a folder name into the current user's folders collection, using a text editing controller and collection/document structure.

Create a folder model and a folders screen controller to fetch folders from Firestore, map document snapshots to folder objects (id, name, date created), and display them in the UI.

Learn to fetch real-time folders from Firebase using a folder model, stream bindings, and GetX in a Flutter app, including Firestore queries, ordered by time, and UI integration.

Learn to show real-time folder item counts by querying the current user's files collection with streams and query snapshots, counting documents where the folder name matches.

Learn to build a Firebase service for uploading multiple files via a file picker in Flutter, with optional folder names, preparing for file type, extension, and name filtering and compression.

Learn to filter file type and name in a Flutter Google Drive clone by iterating over multiple files, extracting the file type, extension, and base file name with null-safe logic.

Implement an asynchronous compressFile function that filters file types to images or videos, then uses a temporary path with unique id and quality 75 to reduce Firebase storage usage.

Upload files to Firebase storage and save metadata in Firestore by calculating the user's files length, naming each file sequentially, and recording download URL, type, extension, folder, size, and timestamp.

Create a file model in flutter with id, url, name, date uploaded, type, extension, folder, and size. Parse firestore document snapshots and wire a files controller.

Bind a real-time stream to a reactive files list to fetch recent files from Firebase, ordered by date uploaded, and map documents to file models for display.

Show files from Firebase in the recent files list using getX and a files screen controller, displaying image thumbnails and icons for non-image files.

Display file type icons in a flutter and firebase app by using image thumbnails for images and extension-based png icons for non-image files such as pdf, doc, mp3, and mp4.

Create a display files screen in Flutter using Getx to show files in a folder, navigate from folders to the display screen, and add files with a plus icon.

Add an icon and floating action button on the display file screen to attach any file to a folder, using Firebase to upload and retrieve files by folder name.

Build a Google Drive style folder view in Flutter, using grid view builder for a two-column layout with thumbnails and titles, and a bottom sheet offering remove or download.

Build a bottom sheet in a Google Drive clone with Flutter, Firebase, and GetX to download or remove files, featuring a rounded shape, text titles, dividers, and compact list styles.

Create a Getx files controller to load folder files from the user's Firebase collection, using a reactive file list, folder name filters, and a binding to initialize on screen navigation.

Bind the files controller to the display screen, initialize it on entry, and render a reactive obx-backed list. Show folder contents with dynamic thumbnails or icons.

Learn to show an icon by file type in a Flutter app, handling image vs non-image files with pdf, word, mp3, and video icons in a Firebase-powered file list.

Show how to filter and display files by type (images, videos, documents) in a Flutter app using Firebase and GetX, via a display file screen with a type parameter.