Flutter+Firebase Build a Grocery App&WEB Admin Panel [2024]

Learn practical tips to navigate this Flutter+Firebase course, including how to adjust video speed and resolution, access lecture resources, read descriptions, use the Q&A, and track announcements for code practice.

Lock device orientation to portrait mode in flutter by using the device orientations command and required imports, ensuring the app runs only in portrait and blocks landscape.

Set up Flutter app theming and dark mode using shared preference and provider for state management. Learn to save, fetch, and apply last chosen theme across screens and the app.

Implement a bottom bar navigation in Flutter. Add a bottom bar with items, manage the current index using state, and customize icons, labels, and colors for light and dark themes.

Build the user screen in Flutter by composing dynamic list tiles with icons, titles, and subtitles, wrapped in a scrollable view with theming and rich text interactions.

Create an update address dialog in a Flutter app by using showDialog and AlertDialog, wiring a text editing controller, and handling disposal to update the user's address.

Implement a logout dialog in a flutter app, building a UI with image and text, configuring showDialog with title, content, and text buttons, and closing via navigator.pop.

Implement the category design in the Flutter grocery app by building a decorated categories screen with asset images, responsive sizing, and an interactive tap using an anchor widget.

Finish building the categories screen by rendering a two-column grid of dynamic category cards, using lists for colors, image paths, and titles, with padding and a categories app bar.

Develop a rotated on sale text widget in Flutter by composing a row with uppercase red text and a discount icon, rotated via a quarter-turn using a flexible container.

Implement a fancy shimmer loading animation for images in Flutter using the fancy shimmer package, and adjust height, fit, and a text button within a row to refine UI.

Learn to make a dynamic price widget in a Flutter+Firebase grocery app by implementing dependency injection, sale vs normal price logic, and responsive UI adjustments.

Handle no products on sale UI state in the flutter+firebase grocery app by initializing a boolean and displaying a text message with an image asset when no products are available.

Implement the cart screen header and app bar in Flutter, adjust icon sizes and margins, and add an order now button with material and inkwell for a responsive ui.

Implement a product details screen in a Flutter+Firebase grocery app by wiring widget navigation, configuring quantity input, and adding to cart with price and delivery details.

Learn to implement a quantity text controller in Flutter, wiring plus and minus buttons to update the quantity and reflect changes on the product screen.

Create a reusable warning dialog in Flutter by using a static global method with title, subtitle, function, and context, and apply it to sign-out, cart, and wishlist prompts.

Implement the orders screen with a dedicated orders widget, a stateful list view using a separated builder and divider, and ten items with tap navigation to the product detail screen.

Implement a reusable empty screen in Flutter for orders, cart, wishlist, and viewed recently; build dynamic widgets, manage isEmpty state, and navigate to the feed screen.

Implement the cart badge widget in your Flutter+Firebase grocery app by integrating a badge package and placing it in the bottom bar with position and color customization and simple animation.

This lecture guides building a login screen in flutter with firebase, including email and password fields, validation, password visibility toggle, forgot password, and sign-in with google.

Implement a functional sign up screen in a Flutter+Firebase grocery app, building a register form with name, email, password, and address fields, including validation, focus control, and navigation.

Implement the forget password screen in a flutter+firebase app, building the dialog and form fields, configuring navigation and actions, and outlining future firebase integration.

Start implementing the admin panel for the grocery app, enabling adding, viewing, editing, and deleting products, with a responsive dashboard, theme switching, and a side drawer navigation.

Implement a Flutter products widget for the grocery app, add a popup menu with edit and delete actions, and learn to run the web app and troubleshoot image loading.

Implement the all products screen in a flutter app, wiring side-menu navigation with push replacement and named routes, and integrate a header, grid layout, and scaffold keys.

Implement the order widget in the dashboard screen by building a reusable UI card that displays image, quantity, price, user name, and date within a stylized list with dividers.

Diagnose a common ScrollController error in a Flutter app and fix it by adding the controller to the scrollable widget, then restart the app to confirm.

Implement the all orders screen by duplicating the products screen, adding a dedicated scaffold key and scroll controller, and refining the layout to display orders in the admin panel.

Implement the upper dashboard widgets using a dynamic elevated button with icon and label, set color and padding, wire on-press, and place two buttons in a row with spacing.

Start building the add product screen in Flutter with a form-driven layout. Include title and price fields, validation, an image box, a category dropdown, and widgets for image and buttons.

Make the header widget dynamic by passing a title and a show text field flag through its constructor, and display the text across dashboard, all products, and all orders screens.

Build a reusable drop-down category picker in the grocery app admin panel, with categories like vegetables, fruits, grains, nuts, and spices, wired via setState and styled for a polished UI.

Implement radio buttons to choose the measure unit, initialize the current and group values, and apply an active color (green) to indicate selection in the grocery app interface.

Implement a web image picker widget in Flutter by styling a decorated container, adding dot borders, and centering the UI, then enable admin users to upload an image.

Learn how to implement an image picker in a Flutter app compatible with Android, iOS, and web, including mobile and web-specific handling, gallery selection, and displaying the chosen image.

This Flutter Firebase grocery app tutorial shows the admin clearing the picked image, applying a 12 border radius, and resetting the image state for the next step.

Implement a private clear method that resets image and price and title controllers, clears text fields, and calls setState to reflect the cleared form when invoked.

Create a product model class with id, title, image, category name, price, sale price, and on-sale and unit-type flags, using a named constructor for required fields.

Create and display a static product list using a product model with images, categories, and prices, render on the feed screen, and introduce dependency injection and state management concepts.

Implement the products provider using change notifier to manage a product list, expose it with a getter, and access it from the feed and home screens via provider.

Configure the price switcher to show prices in pieces or kg by updating the product model, saving changes, and adjusting layout values for clearer price display.

Implement a provider method to fetch on sale products, connect it to the on sale widget, and ensure dynamic handling for empty and non-empty product lists.

Show products by category in a Flutter grocery app, building a find by category function, passing category data to a category screen, and displaying a dynamic empty state.

Implement the cart model by building a ChangeNotifier cart class with id, product reference, and quantity, and create a provider to manage cart state and fetch product details by IDs.

Implement a cart provider by creating a cart items map, exposing current items, and adding a method to update the cart using product id and quantity.

Initialize the card provider in the feed item and wire the add to cart button inside the on sale widget to pass the product id and quantity, enabling cart updates.

Show the correct cart items by wiring the cart screen to a product provider, pulling current product data, and displaying accurate price and quantity updates.

Implement cart management in a Flutter+Firebase grocery app by updating item quantities, deleting items, and clearing the cart, with UI refresh via a cart provider and notify listeners.

Enable adding to the cart from the product details by defining the current model, getting current products, and updating quantity to confirm the addition.

Implement the wishlist provider by creating a wishlist model, wiring add and remove logic, and integrating it with the main app to manage user wish lists.

Finish the wishlist state management by wiring the wishlist screen to a wishlist provider, display items with image, title, and price, handle empty state, and add a clear wishlist action.

Implement the future products state management using a future products model and provider, to track viewed items and history, and integrate with cart and wishlist features.

Show the cart item count on the badge using a provider with a consumer widget for the bottom bar. Update the badge efficiently when items are added through selective listening.

Explain what Firebase is as a fully managed backend server by Google, highlighting its NoSQL databases, frontend–backend integration with Flutter, and its pricing model.

Initialize Firebase in the Flutter app using the Firebase core package and initializeApp, then use a FutureBuilder to show a circular progress indicator or an error during startup.

Enable email and password authentication in Firebase and implement Flutter sign-up flow that initializes FirebaseAuth, validates input, handles errors with FirebaseException, and shows a circular progress indicator and error dialogs.

Create a loading manager widget in Flutter that overlays a dimmed screen and a circular progress indicator when loading, using isLoading and child with a stack.

Replace the circular progress indicator with a different loading widget using a popup package called spank it, featuring a fading cube in the loading manager during sign up.

Enable sign out on the user screen and test the authentication flow from sign up to login, look out navigation, and guest checkout while managing wishlist and cart with Firebase.

Demonstrates implementing login with email and password using Firebase auth, wiring the register and login screens, handling errors, and enabling guest checkout while exploring cart and wishlist flows.

Save user profiles in Firebase Firestore by creating a users collection and storing a document with the user ID, name, email, and address during sign-up.

Enable users to update their address by implementing an alert dialog that saves the new shipping address to Firebase Firestore, updates the UI with setState, and handles navigation and errors.

Connect the web admin panel to Firebase to enable product uploads, initialize the Firebase app with the provided configuration, and install Firebase packages via npm to enable Firestore and Storage.

Enable the admin to upload a product to a firebase-based grocery app by configuring the loading indicator, generating an ID, uploading images to storage, and showing a toast on success.

Learn how to upload images to Firebase from Flutter web using an alternative package after a discontinued one, with an updated article, GitHub code, and a 'upload image fix' tutorial.

Upload an image to Firebase storage from a Flutter web app and enforce image selection. Create a products images folder, upload the file, and obtain its download URL.

Learn how to upload images in a Flutter app using Firebase Storage, including web and mobile image handling, replacing a discontinued package, and retrieving the image URL.

Display admin panel products by fetching from Firebase Firestore using a stream builder, read product data (id, title, price, image, on sale, category), and render in a product widget.

Implement the edit product screen in the Flutter + Firebase grocery app. Admin users update product details, on-sale status, and sale percent, with Firebase syncing.

Display the correct product data in the edit screen by initializing values and syncing text controllers for id, title, price, sale price, category, image, and on sale status.

The admin deletes a product by removing its Firestore document from the products collection, handles post-delete navigation, and displays a 'product has been deleted successfully' toast.

Fetch and display products from Firebase Firestore in an Android app using provider-based state management, parsing documents into product models and showing a loading screen.

Show different backgrounds while products load by cycling through a preloaded images list from assets, using a random index or shuffle to vary the background images.

Enable users to search for a product by title using a search field and provider query, update category and feed screens with results, and show no products found when empty.

Implement add to cart to save the user's cart to Firebase Firestore via the provider. Update user cart array with product ID and quantity, and show a toast on success.

Fetch the user cart from Firebase by implementing a fetch cart method in the card provider, reading the user's cart array, and populating cart items for display.

Initialize the cart provider during app load and fetch the user cart alongside products, so the cart reflects three items after restart.

Learn to show correct cart prices by recalculating totals as quantities change, using current or sale prices and providers to update the checkout total.

Enable users to delete a single cart item, updating the current array and the Firebase user cart via a provider. See changes reflect on screen as the Firebase update completes.

Learn how to implement clearing a cart in a Flutter+Firebase grocery app, fix a deletion bug, update the UI with fetch calls, and safely clear both local and online carts.

Implement a Firestore-backed add to wishlist method in the wishlist provider, mirroring add to cart logic, saving by product id and context, with toggle and removal.

Finish the wishlist provider by implementing fetch, add, and remove actions with Firebase, adapting the card provider for the user wishlist, and renaming methods to fetch wish lists.

Initialize the wishlist provider and fetch the wishlist from Firebase, then add or remove items, update online and local wishlists, clear the local wishlist, and show a spinner during loading.

Showcase a Flutter feature that displays a circular progress indicator while adding a product to the wishlist, toggling a single boolean loading state for the heart button in one file.

Fix a bug when fetching the wishlist in a Flutter Firebase grocery app by properly initializing the user in the card provider and ensuring consistent data retrieval.