Flutter Shop App | Dart & State Management | Riverpod

Explore how to consume a Laravel api from a Flutter app, using an external server, with bearer token auth, and how to test endpoints with Postman while following along.

Create a new flutter project in Android Studio or VS Code and configure the SDK path. Name the project, set up assets and resources, and run on iOS simulator.

Learn how setState manages simple Flutter user interface state, why it becomes hard to scale across pages, and how Riverpod provides a scalable state management alternative.

Install Riverpod and replace set state with a shared provider that holds an app counter, then access it with ref.watch inside a consumer widget under provider scope.

understand replacing provider with state provider to enable outside modification and ui reflection. use ref.watch to display the current value and ref.read with the notifier to update it.

Learn to preserve and access a Riverpod state across pages by using a StateProvider, consuming it with ref.watch in a ConsumerWidget, and navigating between pages.

Learn to create a shared state with Riverpod's state provider, read and watch values with ref, update via notifier, and navigate pages using material page routes and floating action buttons.

Build an onboarding screen with left-right scrolling welcome pages using a stack widget and positioned widgets, while scaffolding the page and integrating Riverpod for state management.

Master how stack handles positioned and non-positioned widgets, including partially positioned cases, with color-based debugging. Build a horizontal page view of images and configure assets in pubspec.yaml.

Explore building an onboarding screen with a page view that occupies the full screen, manage images, and create reusable text styles in a column layout.

Create a reusable onboarding widget in Flutter by using optional named parameters with defaults or required, parameterizing image path, title, and subtitle, and applying margins and padding.

Explore building reusable flutter widgets with a focus on color theming using a static appcolors class, optional named parameters, and leveraging column layout to compose flexible UI components.

Develop a next button widget in Flutter, wrap it in a container with width, height, and a red color, and apply an app box shadow decoration for polished styling.

Implement a reusable box shadow in Flutter by defining a BoxShadow list with color, opacity, offset, blur, and spread radii, enabling consistent styling across the app.

Center the next button using a center widget, wrap the clickable area in a gesture detector, and use a page controller to animate to selected index with duration and curve.

Master using a page controller to navigate pages with animate to page and jump to, passing index, duration, and animation type, and validate range, const, and final.

Explore how const and final affect immutability in Dart by building objects with constructors, differentiating mutable versus immutable fields, and understanding when to use const constructors.

Learn how immutability in Flutter hinges on const and final with constructors, and how Riverpod state management uses these ideas to create stable, immutable states.

Learn to dynamically change the button label in a flutter onboarding flow by showing 'next' for early indexes and 'get started' when the index reaches three.

Work on the pageview, safe area, and background by wrapping the scaffold in a container with a white background and top spacing, and prepare Riverpod-driven clickable dots.

Install and configure a dots indicator in a Flutter page view, using a stack, dots count, alignment, and a rounded active shape to reflect page navigation.

Implement a dots indicator with Riverpod state management using a state provider and a consumer widget. Watch and read the index to keep the dots updated without unnecessary stateful widgets.

Install Riverpod code generation plugins and build_runner, create an index provider class with Riverpod annotations, extend the provider class, and generate welcome_notifier code using build_runner.

Explore using the newly generated provider for dots with Riverpod code generation, including auto dispose notify providers, and compare with traditional state management approaches.

Create and navigate to a sign-in page in a Flutter app, wiring navigation with Navigator push and pushNamed, and structure with SafeArea and Scaffold.

Explore how navigator push and pushNamed manage screen stacks in Flutter, register routes with MaterialApp, and use initial routes to navigate between welcome and sign in pages.

Learn to build a custom sign-in app bar using a preferred size widget and a bottom widget to create height, a thin line, and a log in title.

Learn to build a Flutter sign-in screen using column and row layouts, create a reusable third-party login widget with social icons, and apply spacing and gestures.

Design and implement sign-in text fields with reusable widgets and an image widget, applying padding, alignment, and border decorations to create a polished login ui.

Build a sign-in screen with reusable text fields and a global app image widget, handling image paths, margins, and borders, while configuring hints, keyboard types, and password obscuring.

Build a sign-in screen with reusable widgets, a default image fallback, and an underlined forgot password link styled with padding, color, and typography for a polished login interface.

Develop and finalize the sign in screen by building a reusable app button widget for login and register in the bottom section, ensuring centered alignment and color and border handling.

Explore applying a nullable box border to the sign-in button and its color, making the border reusable. Wrap the form in a single child scroll view to handle keyboard display.

Learn to implement a global app theme in Flutter using a static theme data class, configure app bar properties like elevation and background color, and understand hot reload limitations.

Build a Flutter register page UI, enable tap navigation to a sign-up screen with navigator.push, and tune color themes and basic UI settings.

Refactor the sign up UI by duplicating the sign in page, extracting the app bar to a global widget, and wiring dynamic callbacks for the register action.

Explore how to use function calls in flutter with anonymous and callback functions, onPressed handling, and function assignment or arrow syntax to pass navigation handlers across routes and maintain state.

Learn how to model registration data in a Dart class with a constructor and parameters, validate inputs, and prepare data for local storage, backend submission, and Riverpod integration.

Learn how constructors initialize object fields with positional and named parameters, apply default values, and use final for immutability, including the copy with method.

Explore how the copyWith method creates a new instance of the register state class with optional named parameters, enabling immutability and reuse of existing values via null-aware fallbacks.

Learn to create a Riverpod register notifier and register state, wire it into a consumer widget, watch the provider, and handle state changes when registering with a button.

Pass text field values to a shared store using Riverpod notifier providers. Configure onChanged callbacks, copyWith updates, and a sign up controller that uses ref for centralized state.

Learn to access shared state in a Flutter shop app with Riverpod, using a consumer stateful widget and ref object, initializing a sign-up controller in initState and updating with copyWith.

Learn to display top pop-up messages in Flutter by installing the Flutter Toast plugin, configuring a toast info helper, and calling it to show validation messages.

Learn to validate registration data with positional and named optional parameters, implement robust form validation, and integrate Google sign-in via Firebase Auth in a Flutter shop app.

Learn to implement a global loading indicator using Riverpod in a flutter app, wiring an app loader provider to toggle a circular progress indicator during sign-up and firebase integration.

Learn how to connect a flutter shop app to firebase using the cli and manual steps, create a firebase project, configure android and ios, and enable email/password authentication.

Learn to manually configure Firebase Android for a Flutter project by creating an app, assigning a package name, downloading the google-services.json file, and updating build.gradle and dependencies.

Catch Firebase auth exceptions during signup and login by using a try-catch around network calls, checking e.code (weak password, email already in use, user not found), and showing toast feedback.

Explore building a sign-in flow with a Riverpod state notifier in Dart, including sign in state, a sign in notifier, and the comparison between older versus code-generation approaches.

Explore object-oriented programming in Dart, focusing on superclass and subclass, constructors, implicit and explicit super calls, and using state notifier for shared app state.

learn how a state notifier holds an immutable sign-in state, exposes it with a state notifier provider, and updates the UI via ref.watch, while wiring a sign-in controller for logic.

Wire the sign-in user interface in a Flutter shop app with Riverpod, pass email and password to the notifier, and implement Firebase authentication with error handling and email verification.

Explore building a login request entity in Dart, converting it to json for Firestore, and embracing immutability to reliably manage sign-in state in a Riverpod-powered Flutter shop app.

Learn how to preserve sign-in input in Flutter using text editing controllers, wiring email and password controllers to the sign-in UI, and verify data with hot reload.

Debug Android and iOS login flows by diagnosing internal errors caused by mismatched Firebase configuration, confirming app id and project id, and validating login and signup.

Install and use the shared_preferences plugin to store user data locally, initialize a storage service with an init method, obtain the preferences instance, and provide set string operations.

Demonstrate initializing a global storage service and static constants to use shared preferences for persisting user data, onboarding state, and navigation in a flutter shop app.

Understand Flutter routing with named routes using pushNamed and removeUntil, enable onGenerateRoute for conditional navigation, and separate routes into dedicated files for maintainability.

Define a routes class with a static onGenerateRoute function that returns MaterialPageRoute using routeSettings to detect the clicked route and navigate accordingly.

Use onGenerateRoute to navigate between welcome and sign in screens. Create route entity with path and page, and persist first open state with storage.

Learn to correctly implement onGenerateRoute in a Flutter shop app, initialize storage with Flutter binding, and manage dynamic routes from welcome to sign in and home using Riverpod.

Remember login by reading the user profile from storage, converting the stored string to a boolean, and routing via onGenerateRoute to onboarding, sign-in, or home screens.

Learn to implement a bottom navigation bar in a Flutter app by building a reusable widget with two items, home and search, icons, colors, active states, and labels.

Learn how to add more routes to onGenerateRoute by ensuring initialization, handling pushNamed names, and guarding route results to prevent bad state and no element found.

Learn how bottom navigation bar items handle on tap updates, current index, and the difference between stateless and stateful widgets, including fixed type label visibility and colors.

Create a Riverpod notifier to manage the bottom navigation bar index and convert the widget to a consumer, using ref.read to change the index and ref.watch to display it.

Explore a four-tab interface in Flutter, rename icons for clarity, enable dynamic screen switching with an index provider, and make the bottom container private to this file.

Refactor images by creating a dedicated image resources class with a private constructor and static paths, centralizing the base URL and default images for reusable, maintainable image resources.

Refactor all screen files by organizing into provider, view, widgets, and controller within an MVC structure. Update imports with path replacements and prepare repository folders for the next step.

Refactor the app by introducing a repo layer for sign in and sign up, using Firebase Auth and user credentials; follow MVC with async futures to improve data source separation.

Learn safe ref handling with Riverpod in flutter by avoiding passing widget ref to controllers, using did change dependencies or future.delayed, and routing with a global navigator key.