Flutter 1.2 with Firebase&Stripe Build shop app from scratch

Lock the Flutter app to portrait mode to prevent overflow in landscape, using device orientations and import services, ensuring the app runs only in portrait.

Demonstrates building a Flutter shop app screen structure from scratch, creating screens for feeds, search, cards, and user, and implementing a notched bottom navigation bar with a floating action button.

Demonstrates building a Flutter bottom navigation bar with home, feed, search, and user screens, using an indexed page map and a center docked floating action button with a notch.

Fix bottom bar null safety by initializing variables before use and applying the state modifier, as explained in the safety lecture.

Learn to replace deprecated bottom bar titles with global label styles, adjust spacing, font size, and apply global style settings to bottom navigation items in a Flutter app.

Learn to add custom icons in Flutter with the flutter icons package, save changes, and use a centralized icons class to swap material and community icons across the app.

Build the user info and settings screen with a collapsing toolbar, a dynamic list of items with icons and subtitles, and reusable widgets wrapped in InkWell and Material.

Learn two methods to add a switch tile for theme toggling in a Flutter 1.2 app, including a native switch and a package-based solution, with code setup and live demonstration.

Learn to build a sliver app bar in Flutter from scratch using a custom scroll view, with expanded height, background color, and a sliver list driven by a delegate.

This lecture demonstrates building a Flutter shop UI with a sliver app bar, scroll-controlled floating action button, and animated opacity, using a scroll controller, flexible space bar, and sliver adapters.

Implement a dark and light theme in the Flutter app by creating a dark theme provider, wiring a switch, and using a consumer to update colors.

Build the app bar and checkout section in the cart screen with a bottom sheet, a list builder for items, and styled text to show the total price.

Enhance the cart screen design by updating gradient and background colors using color constants. Organize code by moving widgets to a widgets folder for better optimization.

Implement a responsive GridView in the feeds screen by adjusting the child aspect ratio, adding padding and cross axis spacing, and wrapping containers to prevent overflow.

Implement a staggered grid view in the feeds screen instead of a normal grid view, using a package and adjusting padding and spacing to fix overflow in Flutter.

Apply a background color to the floating action button on the user info screen to avoid accent color clashes, replicate it on full-screen widgets, and test the dark theme.

Update the user info screen by fixing duplicate icons through adjusting the list widget indexing and icons mapping, ensuring each icon changes correctly after edits.

Install a new Flutter package and update pubspec to add a badge on product images in the feeds screen. Wrap the widget, set bottom-left radius, pink color, and enable animation.

Learn how to align a badge in Flutter by using the positioned widget, setting bottom, right, left, or top values, and optionally padding to control placement.

Build the home screen with the new backdrop package, import and apply a backdrop layout, customize a gradient background and background image, header height, rounded corners, and a circular avatar.

Add a carousel widget to the home screen by integrating a package, configuring a 190 tall full-width container, and loading multiple assets into a rotating image gallery.

Add a swiper widget to the home screen using the flutter swiper package, wiring in image assets and styling to create a polished shop carousel.

Build a popular products widget on the home screen with a stateful popular_products widget in Flutter, featuring an image, title, price, description, and a wishlist icon that opens product details.

Build backdrop back-layer in flutter with inked containers, borders, and transforms; create tappable inkwell items and a reusable content widget to navigate to wish list, cards, and upload pages.

Build a product details screen UI in Flutter 1.2 with a scrollable layout. Show image, title, price, and description, with bottom add-to-cart, buy-now, and favorites actions.

Create the product model class with final attributes for id, title, description, price, image, category name, product name, quantity, and flags for favorite and popular. Provide a constructor for initialization.

Populate the feeds screen with dynamic product data by building a products list (id, title, description, price, quantity, image) and passing it through constructors instead of static data.

Learn why state management is essential for a Flutter shop app, enabling a single, global data source for products, categories, and popular products to reduce repetition across widgets.

Create a products provider class using the provider package and ChangeNotifier, wire up multi provider, and implement a get products method for offline data and future server data.

Manage state in flutter to display products by category on the home screen, sending category names or indices to the category screen and dynamically filtering items.

Finalize the categories state management by refactoring into a separate categories feed screen, access it via provider, and implement category-based product fetching with case-insensitive matching.

Display products by brand on the home screen with a brands widget, using index-based navigation and a provider to load brand-specific products.

Learn to display only popular products on the home screen by building a popular products retrieval method, using a product provider with dependency injection, and wiring navigation to product details.

Finish wiring the product details screen by using the product provider and product id to fetch and display attributes like title, price, brand, and category, while fixing overflow.

Learn to handle the home screen brand filter by implementing an all-brands option that shows all products, fixes when the list is empty, and updates the selected index accordingly.

Navigate from the home screen to a dedicated popular products screen in a Flutter shop app, pass arguments, and display only popular items with a provider.

Create a cart model class with id, title, quantity, price, and image attributes, importing material package, mark price as final, and implement an unnamed constructor.

Create a cart provider class using change notifier, implement a map of cart items, and add a total getter that sums price times quantity and returns the total amount.

Create an add to cart method with product id, price, title, and image that updates quantity if the item exists, or adds a new item and notifies listeners.

Implement dependency injection for the cart by wiring the card provider across product and cart screens and accessing it to manage items, price, quantity, and subtotal.

learn to detect when a product is already in the cart and disable the add to cart button, preventing duplicate orders and adjusting quantity for a smooth checkout.

Enable adding items to the cart from the popular products widget using a provider for product attributes, and update the UI with a check icon after addition.

Implement plus and minus quantity buttons in the cart using the provider, pass product id and price, and update the cart subtotal and item state in real time.

Enable users to remove a single item or clear the cart in the flutter shop app, using the cart provider and a confirmation dialog with cancel and ok actions.

Show the cart total in a Flutter 1.2 app with Firebase and Stripe by wiring a provider to compute and format the total, updating the cart screen.

Create a dynamic alert dialog method by building a reusable global methods class in a service folder, wired from the cart screen using context for item and wish list dialogs.

Learn to implement wishlist state management in a Flutter app by building a favorites model and provider, wiring add and remove actions, and updating the UI.

Add animated badges for the wishlist and cart, reflecting item counts as favorites and cart items change, using provider and consumer widgets for state management.

Add an AppBar to the feeds screen, set its title, and use the consumer pattern for providers while implementing favorite interactions and a cohesive background color.

Create a feeds dialog by adding a new file, styling background and elevation, and using a responsive image container with dynamic text and wishlist-aware icons.

Replace dummy data with live product details in the feeds dialog using product and current providers. Implement favorite and wishlist actions and update navigation to reflect product attributes.

Implement a search screen in the Flutter shop app, wire a search header and text field to the product provider, implement clear action, and show results or a not-found message.

Build a landing page for a Flutter shop app, introducing the authentication flow and a dynamic moving wallpaper, with a network image backdrop and sign-up and continue actions.

Create the landing page with sign-in options, including Google sign-in and guest access, style the buttons and borders, add an animated background slideshow, and plan Firebase integration later.

Implement the login screen with a form for email and password, including validation and a password visibility toggle, plus a moving background using a wave animation package.

Implement the signup screen by adding a full name, email, and phone number field with validation, aligning the form to the design and setting the phone keyboard to numeric.

Implement the top profile preview widget on the sign up screen to let users pick an image via camera or gallery, displayed in a circular avatar with a border.

Integrate an image picker in your Flutter shop app by adding a dedicated package and creating camera and gallery methods, set the image path, and update the sign-up screen.

Navigate from the landing page to the main screen with a bottom bar, guest access, and sign-up/logout flows, while refining the UI background color.

Develop the upload a new product screen for a Flutter 1.2 shop app with Firebase and Stripe, featuring image capture, category dropdown, numeric price input, and product details form.

Learn to implement a left swipe gesture in Flutter to navigate from the main screen to the upload product screen, using a page view and scaffolding setup.

Enable user sign-up with email and password using Firebase authentication, initialize Firebase in the sign-up screen, and configure the required packages to create a new user and handle email validation.

Initialize Flutter binding and Firebase to enable email and password sign-up, show a loading indicator during authentication, and activate email/password in the Firebase console.

Demonstrate error handling in the sign-up flow with try catch for future-based operations, print and display user-friendly error messages through dialogues, and add a loading spinner to indicate progress.

Implement a login flow that signs in users with email and password, converts the email to lower case, shows a circular progress indicator during loading, and displays clear errors.

Use a stream builder to render different screens based on the user's login state, showing the main screen when signed in and the landing page otherwise.

Implement the sign out method in a Flutter 1.2 app with Firebase and Stripe, using a global sign out function and a confirmation dialogue before returning to the landing page.

Learn how to implement Google sign-in in a Flutter app using the google_sign_in package and Firebase auth, including initialization, credential handling, and enabling sign-in in the Firebase console.

Master Google sign-in error handling in a Flutter app with Firebase and Stripe using try-catch to show token errors and plan extra user data like email and join date.

Learn how Firebase Firestore organizes data into collections and documents, and see how to set up a users collection, add documents with fields, and generate unique IDs during user registration.

Learn to upload a user-selected image to Firebase storage, obtain its download URL, and save the image link in Firestore under a user-specific path, with authentication and error handling.

Fetch user information from Firestore by initializing user id, retrieving display name, email, and phone number, and reading document snapshots to populate the user profile in a Firebase Flutter app.

Display the user email and image with error handling, refresh widgets, and enable sign up or sign in with email or Google, preparing to save products in the file store.

Fetch the user's display name and photo URL from input, update the user profile during sign up, and manage profile fields in a Flutter 1.2 app with Firebase.

Activate anonymous sign-in in firebase authentication, initialize anonymous users, and handle loading and errors while creating and managing multiple anonymous accounts.

Demonstrate saving user information to Firestore during Google sign-in in a Flutter app, capturing user ID, display name, and phone number to ensure seamless sign-in data handling.

Upload products to Firestore by creating a products collection and storing title, price, category, description, quantity, image, and a uuid-generated product id, with Firebase storage for images.

Learn to fetch products from Firestore and display them across categories, brands, and popular items by integrating a products provider, using snapshots, and maintaining app-wide state.

Implement a forget password screen in Flutter to allow users to submit their email and receive a Firebase password reset email, with styled UI elements, navigation, and toast confirmations.

Fix the range index error by making the product item count dynamic in the detail screen, using a length check to render the list safely.

Integrate the Stripe payment gateway with Flutter and Firebase, collecting card details, obtaining a token via the REST API, and ensuring the amount is an integer for successful transactions.

Explore Stripe integration in a Flutter app by configuring keys and headers, creating a payment intent via API with stripe_payment and http, and displaying a loading dialog during processing.

Implement the orders design by restructuring files into an orders folder, building an empty orders screen, updating UI components, icons, and state management, and preparing Firebase-based integration.

Create an order model class in flutter, using provider for change notification, with id, userId, productId, title, price, image, quantity, and orderDate as timestamp, ready for uploading.

Upload a user order to firestore by creating an order document with id, user id, product details (title, price, quantity, image) and a timestamp, using the cart and checkout flow.

Fix a Flutter shopping app error that overwrites order IDs in a loop, enabling all cart items to checkout correctly and paving the way to fetch orders with a provider.

Create the orders provider to manage Firestore orders by reading order documents, mapping fields like user id, product id, price, quantity, and date, and prepare for fetching and updates.

Fetch and display user-specific orders in a Flutter shop app using FutureBuilder and a provider, showing order id, title, price, and quantity.

Fetch only correspondent orders for each user by filtering the Firebase orders collection with the logged-in user’s ID, initialize the user data, and validate results across emulators.

Show different screens based on Firestore orders by using an orders provider, fix the data flow with a future builder, and validate Firebase updates in the Flutter shop app.

Delete an order by removing its document from the order collection and update the user interface automatically via notifyListeners, with a progress indicator and error handling.

Validate the checkout response and place an order only if the transaction succeeds. Handle errors when the payment fails and ensure no orders are created until success.

Handle empty products in brands and categories by checking for emptiness and showing a styled 'no products' message with icons and centered layout.

Add a refresh indicator to the feeds screen in a Flutter app. Fetch products through a provider and refresh the screen when data loads.