
Understand the background of Flutter Bloc as a key state management option among Flutter solutions. Target learners with basic Flutter knowledge who want to deepen Bloc skills.
Explore bloc fundamentals through hands-on tutorials, covering cubit and Bloc patterns, event handling, inter-Bloc communication, and hydrated state, then build a todo app, a weather app, and Firebase authentication.
Explore essential tools for Flutter bloc development, including VS Code and extensions like Dart, Flutter, dart-import, Pubspec Assist, and Dart Data Class Generator, plus cubit and bloc boilerplate templates.
Understand how Flutter Bloc handles app state with cubit and bloc, using events and states, streams, and UI integration via BlocProvider, BlocBuilder, and BlocListener.
Learn how to implement a counter app with cubit and bloc in Flutter using Equatable, featuring a single CounterState and copyWith for clean, predictable state transitions.
Learn to inject a cubit or bloc with BlocProvider via dependency injection, access it via the of static method, and trigger events that emit new states to update the UI.
Explore how flutter_bloc handles state changes using BlocProvider.of with listen: true, how BlocBuilder rebuilds on state updates, and why removing listen avoids unnecessary rebuilds.
Inspect how BlocListener and BlocConsumer handle one-time actions, such as showing a dialog at counter 3 or navigating to OtherPage at -1, while controlling rebuilds with buildWhen and listenWhen.
Explore Flutter Bloc extension methods on BuildContext, including context.watch, context.read, and context.select, to optimize rebuilds with provider-style extensions and CounterCubit usage.
Build a Flutter bloc counter app with counter state and events, wire via BlocProvider and BlocListener, and navigate to OtherPage on specific counter values.
Learn to pass payloads with bloc events to affect UI, exemplified by a theme switcher using ChangeThemeEvent with a randInt that toggles light or dark themes via ThemeBloc.
Explore using context.watch over BlocBuilder to read ThemeBloc and switch themes. Troubleshoot BuildContext errors by wrapping MaterialApp with the Builder widget and compare BlocBuilder with the Builder and extension methods.
Refactor the app to use a theme cubit, explaining state handling, a void changeTheme function with randInt, copyWith, and emitting light or dark themes.
Explore cubit to cubit communication using stream subscriptions to pass color state to a counter cubit, adjusting increments for red, green, blue, and black.
Discover how BlocListener enables cubit-to-cubit and bloc-to-bloc communication for one-time actions after state changes, and how to refactor a cubit2cubit app to use BlocListener with externally supplied incrementSize.
Explore bloc to bloc communication by refactoring cubit2cubit to bloc2bloc, using color and counter blocs with ChangeColorEvent and ChangeCounterEvent, and updating UI via copyWith.
Refactor the bloc2bloc app to use BlocListener, pass external incrementSize via ChangeCounterEvent, and listen to ColorBloc state to adjust the CounterBloc, demonstrating cubit and bloc combinations.
Learn how to access a CounterCubit with BlocProvider, fix BlocProvider.of(context) errors by extracting a child widget or using Builder, and understand bloc access across different navigation routes.
Master anonymous route access in Flutter Bloc by building a counter app with BlocProvider, counter cubit, and navigation, resolving context scoping and using BlocProvider.value for cross-route access.
Inject CounterCubit into both MyHomePage and ShowMeCounter with BlocProvider.value and a routes map, using pushNamed. Close the cubit in dispose and verify injection via the widget tree.
Explore generated route access in flutter bloc using onGenerateRoute and RouteSettings to navigate to ShowMeCounter. Compare global and local bloc access with bloc providers in the widget tree.
Learn to observe state changes in cubits and blocks with the flutter bloc block observer, tracing the cause of events, transitions, changes, and errors.
Learn how flutter bloc observes cubits and blocs with onEvent, onChange, onTransition, and onClose, and apply BlocObserver with runZoned to trace state changes across zones.
Learn how event transformer converts streams in bloc, with sequential, concurrent, droppable, restartable modes; explore debounce and how to apply custom transformers in Flutter Bloc.
Explore how the hydrate block extends flutter bloc to persist and restore state with hive local storage, demonstrated by a counter and theme app.
Learn to persist and restore bloc or cubit state locally with hydrated_bloc, using Hive storage, HydratedStorage.build, and fromJson/toJson serialization in a counter app.
Examine how RepositoryProvider hides data provider complexity and enables easy data access across the widget tree using context.read and the of method.
Compare cubit and bloc in the Flutter Bloc package, highlighting cubit's simplicity, bloc's event-driven tracing of state changes, and when to use each, including debouncing and event transformation.
Explore TODO app state management with bloc and cubit through four iterative implementations, using StreamSubscription and BlocListener to handle independent and computed states, while applying copyWith and equatable patterns.
Discover the final todo app structure in flutter bloc essentials, with a header showing item counts, text fields for creation and search, and tabs driving filteredTodos and activeTodoCount.
Set up the todo_cubit app with flutter create and implement cubits via stream subscription. Scaffold models, pages, cubits, and utils folders using uuid, equatable, and flutter_bloc.
Create a todo model: id, desc, completed using uuid. Make id nullable, default false, extend equatable, override toString, define Filter with all, active, completed, organizing cubits into state folders.
Create a TodoFilterCubit to manage the filter state, initialize with TodoFilterState.initial() returning filter.all, and enable changeFilter to emit new states via copyWith.
Create a TodoSearchCubit to manage the searchTerm state so the UI updates as users type. Implement TodoSearchState as a class with equatable, toString, and copyWith, initialized via TodoSearchState.initial.
Learn to manage a todo list with flutter bloc by building TodoListCubit, defining TodoListState with an initial 3-item list, and implementing addTodo, editTodo, toggleTodo, and removeTodo to update state.
Create an active todo count cubit that tracks uncompleted items by listening to TodoListCubit, counting where completed is false, and emitting updates with ActiveTodoCountState.initial and copyWith.
Create the FilteredTodosCubit and FilteredTodosState to filter a todo list by filter and searchTerm, initialize with an empty list, and listen to TodoFilterCubit, TodoSearchCubit, and TodoListCubit for updates.
Inject cubits into the widget tree with BlocProvider and MultiProvider, wiring TodoFilterCubit, TodoSearchCubit, and TodoListCubit to support ActiveTodoCountCubit and FilteredTodosCubit, then build and test the UI.
Learn to build a TodoHeader in a Flutter Bloc app, creating a header and active todo count reactive to ActiveTodoCountCubit via BlocBuilder or context.watch, inside a SafeArea and SingleChildScrollView.
Organize the todos page by creating a CreateTodo widget with a text field and controller, wired to TodoListCubit to add todos and update the active count.
Create the search and filter todo widget using a text field and three filter buttons that update the list via TodoSearchCubit and TodoFilterCubit on every keystroke.
Create the ShowTodos widget as a stateless widget to present the filtered todo list from FilteredTodosCubit using ListView.separated with dividers, and add a Dismissible swipe-to-delete background via showBackground.
Build a flutter todo UI with a TodoItem stateful widget in ShowTodos, using a ListTile with a leading checkbox, edit and delete with confirmation, and CRUD actions via TodoListCubit.
Implement a debounce mechanism in a Flutter Bloc app to delay search calls until typing stops, using a Debounce class and integrating it with the SearchAndFilterTodo widget and TodoSearchCubit.
refactor the todo_cubit app to use bloc listener with cubits, removing stream subscriptions, implement active todo count, and employ multi bloc listeners to filter and search todos.
Refactor the todo app into a todo_bloc by combining bloc and StreamSubscription, and create bloc-based todo_filter and todo_search with ChangeFilterEvent and SetSearchTermEvent.
Build a Flutter bloc TodoListBloc by defining AddTodoEvent, EditTodoEvent, ToggleTodoEvent, and RemoveTodoEvent, wiring them to TodoListState and creating bloc logic, including stream subscription for updates.
Learn to build an ActiveTodoCountBloc in Flutter Bloc, wiring a CalculateActiveTodoCountEvent to respond to todo list changes and checkbox toggles, using a stream subscription and copyWith-based state updates.
Learn to build a FilteredTodosBloc in Flutter using stream subscriptions, converting cubits to blocs, and handling CalculateFilteredTodosEvent to filter todos by list, filter, and search term.
Learn to migrate a Flutter todo app from cubit to bloc, wiring TodoListBloc, TodoSearchBloc, and TodoFilterBloc and using events like AddTodoEvent, SetSearchTermEvent, and ChangeFilterEvent to drive UI updates.
Explore how Bloc enables traceability and advanced event transformation, applying an event transformer with debounceTime to the search input and converting payloads, with per-handler transformers and practical testing.
Refactor the todo bloc to use BlocListener and MultiBlocListener, remove stream subscriptions, consolidate active todo counting and filtered todos, and migrate setFilteredTodos into the UI for cleaner bloc coordination.
Explore data persistence for the todo app with local SQL via SQFlite or remote Firebase NoSQL. Handle async operations with CircularProgressIndicator, show error dialogs, and choose pagination.
Switch to OpenWeatherMap for the weather API after the MetaWeather outage, update the video, and note MetaWeather may return but will be moved to the back of the curriculum.
Build a weather app that uses openweathermap geocoding to fetch city weather via lat/lon, displays data, handles errors with dialogs, and changes theme by temperature with Celsius or Fahrenheit.
For the APPID key value in the .env file of the open_weather_cubit starter file, give the key value issued by openweathermap.
Create and wire weather models for openweathermap, including DirectGeocoding and Weather with fromJson constructors and equatable. Implement CustomError to handle app errors.
Create a Flutter weather api service with weather_api_services.dart, set up api constants, load env vars via flutter_dotenv, and implement getDirectGeocoding using http with a shared httpClient and custom WeatherException handling.
Create an async getWeather function returning a Weather object, using DirectGeocoding to supply lat and lon, building a Uri with https and the data/2.5/weather path, and APPID loaded by dotenv.
Create a WeatherRepository in flutter that fetches weather by city with WeatherApiServices using a two-step API call. Handle WeatherException and other errors with CustomError, using DirectGeocoding and copyWith.
Create a weather cubit with WeatherState and WeatherStatus (initial, loading, loaded, error), implement fetchWeather via WeatherRepository to handle API results and errors, and wire it into app with repository injection.
Layer a search flow by tapping a search icon to open a SearchPage form, validate city input, pass the city back, and fetch weather via WeatherCubit using flutter_bloc.
Create a HomePage with a _showWeather function that uses BlocConsumer to handle initial, loading, and loaded weather states and display an error dialog.
Implement a cross-platform error dialog in Flutter that shows CupertinoAlertDialog on iOS and AlertDialog on Android, using weatherState.errorMessage with an errorDialog function and a non dismissible barrier.
Learn to render weather on the home page with a ListView, showing city, time, country, and temperatures, including network icons and a showTemperature formatter.
Toggle temperature units with a temp settings cubit and reflect celsius or fahrenheit in the settings and home displays, injecting the cubit into the widget tree and enabling dynamic theming.
Implement a ThemeCubit that toggles light or dark theme based on WeatherCubit state and kWarmOrNot (20), wiring AppTheme and ThemeState, and apply it in MaterialApp with BlocBuilder.
Refactors inter-cubit communication from stream subscription to BlocListener, building an open_weather_cubit_listener app that uses BlocListener with WeatherCubit to set the theme based on the current temperature.
Refactor your weather app with bloc and stream subscription, turning cubits into blocs, creating weather_bloc, weather_event, weather_state, and a blocs.dart barrel to manage weather, theme, and temperature settings.
Refactor the weather app to use BlocListener with ThemeBloc and remove StreamSubscription, implementing a setTheme function that toggles light or dark theme based on currentTemp.
Explore advanced weather app features with pull-to-refresh using RefreshIndicator, AlwaysScrollableScrollPhysics, and fetching weather by current location latitude longitude via metaweather API.
Explore Firebase authentication with Bloc in Flutter, implementing email/password sign up, sign in, and sign out, using Firebase Core, Firebase Auth, Cloud Firestore, and Flutter Bloc.
set up a Firebase project for flutter apps with flutterfire_cli, including firebase_core, firebase_auth, and cloud_firestore configuration. troubleshoot common issues like minSdkVersion and firestore build times.
Establish a modular flutter bloc project structure with folders for constants, models, pages, blocs, repositories, and utils, and implement User and CustomError models with a Firestore users collection for authentication.
Create a splash page as a stateless widget with a centered circular progress indicator. Set initial route to home or signin after authentication and establish routes for signup, signin, home.
Implement the auth repository in flutter using firebase_auth and cloud_firestore to sign in, sign up, and sign out, create user documents, and handle firebase auth exceptions with a custom error.
Build an auth bloc that reads the firebaseAuth user stream, surfaces AuthStatus (unknown, authenticated, unauthenticated), and navigates SplashPage routes while wiring the AuthRepository and AuthBloc in main.
Learn to implement a sign-in flow with SigninCubit in Flutter, using AuthRepository to emit initial, submitting, success, and error states, and navigate to HomePage on success.
Create a SigninPage with a form that collects email and password, validates input, saves values, and triggers Firebase sign-in via a SigninCubit.
Learn how SigninPage handles user input and signin requests with BlocConsumer, updates UI for loading and errors, and relies on AuthState changes to navigate via SplashPage to HomePage.
Explore building signup with a SignupCubit and SignupPage, adding name, email, password, and confirm password, validating input, wiring to AuthRepository, and Firebase authentication.
Use the read extension method to wire an AppBar sign out icon on the HomePage that dispatches SignoutRequestedEvent to AuthBloc and navigate to ProfilePage.
Learn to build a profile feature with firestore-backed profile repository and cubit, including getProfile handling, custom error mapping, and state management for loading, loaded, and error statuses.
Learn how the ProfilePage fetches user data from Firestore on load via ProfileCubit, reads uid from AuthBloc, and renders loading, error, or profile details in a card.
Explore how Cubit and Bloc power a Firebase authentication app, addressing the complexity of user management and the role of Google, Facebook, and Twitter as social logins.
Explore the equatable package and the dart data class generator extension to simplify class equality, hashCode, toJson, and copyWith in a Dart and Flutter Bloc workflow.
Discover that Flutter has no official state management solution and explore multiple approaches, including Provider, Bloc, Get, Riverpod, and Redux, with guidance on choosing and upgrading as teams evolve.
Explore Flutter bloc as a robust state management solution for large projects, with concise code since version 7.2, building on provider fundamentals, not intended for absolute beginners.
Master Flutter bloc state management by building to do, weather, and Firebase authentication apps, learning block and qubit interactions, on event API, hydrated blocks, and inter-block communication.
Explore vscode tools for flutter bloc development, including dart and flutter extensions and pubspec assist. Use qubit and block generators, data class helpers, and error lens to boost productivity.
Explore Flutter Bloc essentials, including how qubit and block manage state via events and streams, enabling asynchronous UI updates and event-driven data flow.
Build a Flutter counter app with qubit and bloc patterns, using Equatable and counter state classes (initial, load in progress, load failure, load success) and copy with function to emit.
Learn to inject qubits and blocks into the widget tree with block provider, access them via of, and manage events and state changes to update the UI.
Explore listening to bloc state changes in Flutter using listen: true, the bloc builder, and build context extensions to reflect counter updates in the UI.
Explore how bloc listener and bloc consumer manage one-time actions like showing dialogs and navigating on state changes, while keeping bloc builder pure for a responsive ui.
Explore how to use BuildContext extension methods such as context watch, context read, and context select to control widget rebuilds and access objects in Flutter Bloc.
Build the first bloc-based counter app by creating a counter bloc with state and events, wiring it with bloc provider, and enabling increment and decrement actions in the UI.
Pass additional information to bloc events to drive app behavior, using a change theme event with a random integer to toggle light and dark themes in a Flutter Bloc app.
Compare context.watch with block builder for theming in Flutter Bloc, perform hot restarts, and learn to wrap the app with a builder widget to access a block provider.
Refactor to the qubit version for theme management by implementing a void change theme function that takes randint and emits light or dark themes via copyWith, accessed with context read.
Explore how cubits communicate with stream subscriptions to coordinate color and counter states in Flutter Bloc, using multi-block provider, context read/watch, and dynamic increments.
Learn cubit to cubit communication using BlocListener in Flutter by refactoring a qubit to qubit app to use a block listener and pass increment size externally.
Explore bloc to bloc communication using stream subscription by converting a qubit to qubit app into a block to block app with color and counter blocks and multi-block providers.
Refactor a bloc to bloc app to use BlocListener, pass increment size externally via change counter events, and listen to color block state to drive counter updates.
Learn how to access blocs from the widget tree in Flutter using block provider, builder, and correct context handling, with navigation patterns including anonymous route, named route, and generated routes.
Explore anonymous root access in a Flutter bloc app by building a show me counter with a bloc provider and navigating with navigator push and material page route.
Learn bloc access with named routes in Flutter by injecting a counter qubit via bloc provider, mapping root and counter routes, and disposing qubits properly.
Explore bloc access with generated root routes in Flutter, configuring onGenerateRoute and material pages for a counter page, and assess when global access with block providers helps.
Explore how Flutter bloc observes qubits and blocks, detailing version changes, deprecations, and the reintroduction of block observer and transformer for debugging state changes.
Explore how event transformer converts streams and manages event processing in flutter bloc, including concurrent, sequential, droppable, restartable, and debounce strategies through a counter app.
Explore persisting and restoring app state with hydrated block, using hive for fast local storage. Implement a counter and theme toggle with json serialization and storage management.
Explore repository provider in Flutter Bloc, showing how repositories hide data provider details, consolidate API CRUD calls, and share data across the widget tree with context read.
Compare cubit and bloc for Flutter state management, weighing simplicity vs traceability. Use event transformation and debounce as needed, starting with cubit and refactoring to bloc later.
Learn flutter bloc state management by building a to-do app four times, using cubit and bloc with stream subscriptions and listeners, and applying atomic, copy-with, and equatable states.
Explore the final to do app structure: a header with dynamic counts, independent states for filter and search terms, and a computed filtered list driven by tabs and search input.
Build a to do qubit app in flutter using uuid, equatable, and flutter bloc, with debounced search and a stateless to dos page.
Define a todo model with id, disc, and completed fields, using uuid for id, completed default false, extend equatable, implement toString; add filter enum with all, active, completed; create qubits.
Create a to do filter qubit in Flutter bloc, define the to do filter state as a class with equatable and copy with, and emit states on ui taps.
Create a to do search qubit to filter the list with user terms, manage search terms as a state, and update via a set search terms function using copyWith.
Create and manage a to do list state using a to do list qubit, implementing add, edit, toggle, and remove operations, with an initial state of three tasks.
Develop an active todo count cubit that tracks uncompleted items by listening to the to-do list stream, initializing to zero and emitting state as items are added, toggled, or deleted.
Create a filtered todos cubit to manage a to-do list filtered by active status and search terms, wiring filter, search, and list cubits with Equatable and copyWith.
wrap material app with a multi-block provider, wire to-do filter, search, and list qubits, then access them via static provider method or context read extension method to build ui.
Build a to do header in Flutter with safe area, padding, and a row showing the to do label and the active count, updated via Bloc builder or context watch.
Organize the to do's page into a folder with a to do header and create to do widget, using a text editing controller, validation, and adding items with flutter bloc.
Build a search and filter todo widget with a decorated text field and three filter buttons that react to user input by updating search terms and filter state via bloc.
Create a stateless show to do's widget that displays filtered to do's items using ListView.separated, with swipe-to-delete via a Dismissible and a dynamic background, wired through Flutter Bloc state watching.
Create a stateful todo item widget in Flutter with a leading checkbox, using a to do list qubit for crud operations, swipe to delete with a confirm dialog and editing.
Learn to reduce search load by implementing a Dart debounce utility and debounced search in a Flutter to-do app, using a 500 ms delay and Bloc Listener refactor.
Refactor the to-do app from stream subscriptions to bloc listener, using a multi-block listener to update active to-do count and filtered results.
Refactor a todo app by combining bloc with stream subscription, building a todo filter bloc and a todo search bloc, with change filter and set search terms events.
Build a to do list bloc with stream subscription, defining add, edit, toggle, and remove events and states, and assemble the bloc using the dart data class generator.
Learn to build an active to do count bloc using stream subscriptions, defining calculate active to do count event, and updating state when the to do list changes.
Create a filtered todos bloc using stream subscriptions to combine the to-do list, filter value, and search terms into calculated filtered events.
Replace qubits with blocks across the interface, using add events to manage to do items, search terms, and filters, and explore block advantages.
Learn how to apply an event transformer in Flutter Bloc to achieve traceability and advanced event transformations, including using debounce time with RxDart to control search and filter flows.
Refactor the to do bloc with BlocListener instead of streams, clean up blocks, and apply BlocListener to the header and a MultiBlocListener to the list for active and filtered todos.
Learn how to implement data persistence for a Flutter to-do app using local SQL or remote NoSQL with Firebase, handle async operations with progress indicators, and apply pagination strategies.
[All source code has been updated based on flutter 3.x and flutter_bloc 8.1.4, lint rules have been applied, and class modifiers have been applied to state and events.]
To provide better service and improve communication skills in English, AI-dubbed lectures are added at the end of the course. You can choose bsed on your preference. Thank you so much. I hope my lectures are helpful for you to expand your knowledge.
In the Flutter Bloc Essential course, you can learn in depth about Bloc, the popular Flutter state management solutions.
In particular, it covers only the most recent version, version 8.0 or higher.
If you want to deepen your understanding of the Flutter Bloc and put all the concepts into practice, then this course is for you.
The lecture was carefully composed to ensure a balance between theory and practice.
And under the belief that repetition is the most important learning method, whenever there is a new concept, we will test the concept by making a small app, and through real-world apps such as TODO, Weather, and Firebase Authentication app, the concepts will come together comprehensively.
In particular, we repeatedly practice the combination of Cubit and Bloc when creating TODO, Weather, and Firebase Authentication apps.
TODO App (4 implementations): 1. Combination of Cubit and StreamSubscription, 2. Combination of Cubit and BlocListener, 3. Combination of Bloc and StreamSubscription, 4. Combination of Bloc and BlocListener
Weather App (4 implementations): 1. Combination of Cubit and StreamSubscription, 2. Combination of Cubit and BlocListener, 3. Combination of Bloc and StreamSubscription, 4. Combination of Bloc and BlocListener
Firebase Authentication App: Cubit + Bloc + StreamSubscription
This is a quick look at everything covered in the course.
Cubit/Bloc concept
BlocProvider, BlocListener, BlocConsumer, RepositoryProvider, MultiBlocProvider, MultiBlocListener, MultiRepositoryProvider
BuildContext extension methods: read, watch, select
Passing extra information to Cubit/Bloc: function argument and event payload
Cubit/Bloc-to-Cubit/Bloc communication: StreamSubscription, BlocListener
Bloc Access and value named constructor: anonymous route access, named route access, generated route access, global access
Observing Cubit/Bloc
The Event Transformation feature of Bloc
Hydrated Bloc
TODO App: 4 implementations through various combinations of Cubit, Bloc, StreamSubscription, and BlocListener
Weather App: 4 implementations through various combinations of Cubit, Bloc, StreamSubscription, and BlocListener
Firebase Authentication App: Combination of Cubit, Bloc, and StreamSubscription