Flutter Shop App | State Management BLoC | Backend

Explore how main.dart drives the UI, configure dependencies in pubspec.yaml, and implement shared state management with flutter bloc by separating business logic from the UI.

Install and configure the flutter_bloc package, define app state and init state with a counter, and create app events for increment and decrement to manage state through emit.

Create an app bloc to manage state with increment and decrement events, initialize counter to zero, register events with on, and emit new AppState to persist and expose the counter.

Learn how to use block provider for dependency injection, wrap widgets with Block Builder, and access app states from the UI to update a counter.

Discover how BlocBuilder visualizes bloc state by wiring app blocks and counter state, handling initial values and increment events to reliably update the UI.

Learn to build a flutter bloc flow with block builder, app blocks and states, and events, optimize the home page to stateless, and wire onboarding and sign-up ui.

Develop a Flutter onboarding page using the BLoC pattern (blocks, events, states) with a stack and page view for horizontal slides and responsive sizing.

Build the welcome screen in flutter by applying scaffold margins, container insets, and a column layout, then style the text in black at 24.sp with normal weight.

Discover styling a next button in Flutter using padding, edge insets, and a width, with box decoration, border radius, and shadow, plus a reusable column for three buttons on mobile.

Configure the welcome screen with a dots indicator, positioned at the bottom of a stack, and outline state management by defining a state class and bloc events.

Create a welcome bloc with state and event to manage the page index for a page view and its dots indicator, then inject via block builder and reactively update UI.

Adjust the active size to 18 to improve the page indicator and explore alternative ways to change the page value, then update the image.

Learn how to import resources and assets into a Flutter project, configure pubspec.yaml, install dependencies, and display images in a welcome slider.

Wrap the button with a gesture detector, implement onTap to navigate between pages using a page controller, and apply animated transitions with duration and curve options.

Learn to implement multi block providers in flutter apps by wrapping with multi block providers, injecting two blocks, managing navigation, and addressing build context errors.

Explore using multi bloc providers with hero tags to differentiate multiple floating action buttons in flutter, ensuring state persistence and seamless integration of providers list and blocs.

Learn how lazy bloc loading works with MultiBlocProvider, seeing how the first provider is created immediately while others may wait, and how setting lazy to false affects creation order.

Learn how to implement routing in Flutter using pushNamedAndRemoveUntil to clear previous routes after onboarding, define app routes in MaterialApp, and ensure no back button remains on the onboarding flow.

Build a sign in page in Flutter by creating a stateful sign in class, organizing sign in widgets, and configuring the sign in route and app bar with a scaffold.

This lecture demonstrates a sign-in screen with social icon buttons in a Flutter BLoC app, using row layout, gesture detectors, assets, and a reusable social login widget.

Reuse widgets to craft a sign-in screen with icon buttons, pass icon names via interpolation, and organize layout with main axis alignment and edge insets for a reusable UI.

Build a sign in screen with reusable text components in Flutter, including margin and styling through containers and columns, and apply cross access alignment to start from the left.

Design a responsive sign-in screen in flutter by arranging two columns, centering widgets, applying padding, and building a reusable text field with email and password types.

Builds the sign-in screen in Flutter by adjusting padding, applying a box decoration with border and radius, and integrating an image asset while sizing with 16.w to fix overflow.

Configure a Flutter sign-in text field with input decoration, multi-line support, and transparent borders, and apply a gray hint style, white background, and a reusable Avenger font at 12 sp.

Build a reusable sign-in text field with customizable icon, hint text, and password obscuring, applying spacing, autocorrect, text type, and icon changes for the sign-in screen.

Create a forgot password link on the sign in screen by wrapping text in a gesture detector, styling an underlined blue label with padding, preparing for two buttons.

Build a reusable login and register button widget in flutter with configurable width, height, color, border radius, and tap handling; apply text styling and prepare for color file refactor.

Refactor the Flutter shop app by creating a global colors file and AppColors with primary, secondary, and background colors, then apply conditional button theming with a ternary operator.

Refactor code part 2 focuses on applying app colors to text and button decorations, aligning active and primary element colors with login styles, fixing naming typos, and validating UI consistency.

Refactor code part 3 focuses on adjusting padding and safe area constraints to reduce spacing, align three action buttons, and prep the sign-in block for the Flutter Shop App.

Define the sign in state for the bloc, holding email and password with a constructor and copy with method, then manage initialization and optional parameters from the user interface.

Create a sign in bloc event structure by defining an abstract sign in event class and concrete email and password events with their constructors.

Create a sign in bloc with sign in event and state classes, set an initial state, and add on methods for email and password events using an abstract event class.

Learn how to structure sign-in bloc event handlers in Flutter using on method, emit, and copy with to manage email and password events, with separated handlers for clean state updates.

Use the emitter as a callable class to emit new states in flutter bloc via the emit function and copyWith, and follow how the call method uses a state type.

Discover how a sign in bloc ties an event class, a state class, and a handler to process events and update the user interface.

Create a sign in controller that uses context.read to access the sign in bloc and drive email or social login. Handle errors with try-catch and expose bloc state to ui.

Access the sign in state to read email and password, validate inputs, and authenticate with Firebase Auth by signing in with email and password, including installing the Firebase Auth plugin.

Sign in users with Firebase auth by handling credentials and checking for null users. Enforce email verification using the singleton Firebase auth instance.

Register a Firebase project in the Firebase console, configure iOS and Android apps with correct bundle and package names, enable email/password authentication, and connect the sign-in flow to the UI.

Test firebase connectivity by importing firebase core in main.dart, set android minimum sdk to 19, enable multi-dex, and run pod install for iOS dependencies.

Inject the sign in bloc into main.dart, wire text fields to dispatch email and password events on change, and enable reactive state that saves inputs for backend submission.

Learn to wire a login button to call the sign in method, pass functions to widgets, and handle errors with FirebaseAuthException, including invalid email, while adding logs and preserving context.

Test and debug the sign-in controller with Firebase backend and state management with BLoC in a Flutter shop app, validating email, password, and user existence across scenarios.

Explore the sign-in controller in the Flutter Shop App, testing email login and password handling on Android with Firebase, verifying users, handling reCAPTCHA, and ensuring user verification for login.

Install and integrate Flutter toast to display in-app messages from the sign-in controller; build a reusable toast widget with customizable message, colors, duration, and top gravity, handling common auth errors.

Learn how to organize a flutter shop app by separating bloc providers from main.dart, implement sign-in flow with firebase, and keep the app behavior intact while debugging and refining UI.

Create a registration page and route, wire the sign-in page to navigate with navigator.pushNamed to the 'register' route, and register it in main.dart while organizing a new register directory.

Refactor the register screen by migrating the ui to a common widgets file, replacing the sign-in blocks with the registration block, and resolving errors for a cohesive registration ui.

Update the register screen ui: switch to username first, set prompts like enter your username, and align sign up and log in labels while fixing color and size issues.

Tune the register screen in the Flutter shop app by adjusting the ui app bar theme, colors, and layout, including padding and alignment, and preview building register blocks with BLoC.

Set up the register block structure by creating the block folder and the files register_states.dart, register_events.dart, register_blocks.dart, and register_controller.dart, and define username, email, password, and re password states.

Learn to implement immutable classes in Flutter by marking fields final and constructors const, ensuring thread-safety and guarding against external mutation, a pattern used in bloc.

Master copyWith for immutable sign-in states in flutter BLoC, creating new objects by changing one field at a time with optional named parameters, boosting safe state management.

Apply copyWith to immutable register state objects, using optional named parameters to craft updated states from existing ones and manage username, email, and password fields.

Create and manage register events for the BLoC, defining an abstract register event and concrete user name, email, password, and repass events with final fields and const constructors.

This lecture demonstrates building a register bloc for the Flutter shop app, wiring user name events to state emissions, and using optional named parameters with defaults to resolve constructor issues.

Learn how to build a Flutter registration flow with bloc, wiring events and states, and using copyWith for name, email, and password on the register page.

Connect the register UI to the register bloc by injecting the bloc and wrapping with a block builder; wire username, email, and password events.

Learn how the copyWith method preserves immutability in Dart models by copying existing fields and selectively overriding with optional named parameters, demonstrated with dart pad.