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

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.

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.

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.

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 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.

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 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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.