
Discover why Redux remains a proven, widely used state management solution across React, Flutter, and other frameworks, and clarify the background and audience for this Flutter Redux tutorial.
Explore Flutter Redux essentials with practical apps—todo, SQLite-backed persistence, weather app, and Firebase authentication—covering store, reducers, middleware, and performance optimizations.
Explore VS Code tools and extensions for Flutter development, including Dart and Flutter extensions, Awesome Flutter Snippet, dart-import, Pubspec Assist, and Dart Data Class Generator, and start with Redux overview.
Explore Redux, a pattern and library that centralizes app state in a single store updated only by actions. Follow three principles: single source of truth, read-only state, and pure-function reducers.
Explore how redux powers a dart counter app in flutter by defining CounterState, IncrementAction, and DecrementAction, building a reducer, an immutable store, and dispatching actions to update the state.
Learn how flutter redux uses a central store via storeprovider for dependency injection, with access through storebuilder, storeconnector, or storeprovider.of; storebuilder suits simple apps, storeconnector with a ViewModel optimizes rebuilds.
Learn how StoreConnector converts a store into widget-specific ViewModel via a converter, enabling efficient rebuilds with distinct so a widget updates only when the ViewModel changes, using IncrementAction and DecrementAction.
Explore how flutter_redux handles state-driven UI by using StoreConnector arguments to show dialogs and navigate on counter changes, using addPostFrameCallback and overlay-aware patterns for smooth transitions.
Explore StoreConnector callbacks like onWillChange and onDidChange, including distinct behavior, and learn to use onInit, onInitialBuild, and onDispose for dialogs, animations, and navigation.
Discover how to split a growing Flutter Redux state into focused reducers with combineReducers, then compose a large state tree and build add, search, and show items features.
Define a redux structure with app_state and app_reducer, modeling app-wide state with ItemListState (string items) and SearchTermState (search term), each with initial, toString, and copyWith, assembled in AppState.
Learn to implement redux in flutter by creating add, delete, and search actions, wiring them to itemListState and searchTermState via a reducer, and wrapping the store with StoreProvider in main.dart.
Connect the UI to the store, rebuild widgets on state changes, create _ViewModel for NewItem and SearchItems, bind TextFields via StoreConnector, and dispatch AddItemAction and SearchItemsAction.
Connect a redux-backed ShowItems view in Flutter using a _ViewModel and StoreConnector. Filter items with a case-insensitive _getFilteredItems and enable deletion via DeleteItemAction in a ListView.separated.
Split app state into ItemListState and SearchTermState with itemsReducer and searchTermReducer, handling add, delete, and search actions, then compose them into AppState for modular structure and easier testing.
Split reducers into addItemReducer and deleteItemReducer, then combine with combineReducers and TypedReducer for safer type checks. Refactor searchTermReducer to searchItemsReducer for consistency.
Convert json data into a Dart class to simplify handling structured data, using jsonDecode and fromJson factory, toJson, and copyWith, with equatable for proper equality.
Learn to pair the Dart data class generator with Equatable in a Flutter app to generate equality, toString, copyWith, and map serialization, including const constructors and view model equality considerations.
Optimize flutter redux performance by rebuilding only when the ViewModel changes, using equality and hashCode with distinct: true, demonstrated with a primitive int state, IncrementOneAction, IncrementZeroAction, and a reducer.
Learn to optimize performance in a Flutter Redux app using primitive state by wiring ViewModel for MyHomePage, dispatching actions, and using StoreConnector with distinct and equality overrides to reduce rebuilds.
Model state as an AppState object, using copyWith and equatable for predictable rebuilds. Enable StoreConnector distinct and override equality and hashCode to improve performance.
Explore performance optimization in a Flutter Redux app by refactoring widgets with a separate text field and controls, using StoreConnector, actions, reducers, and AppState.
Explore how the home page centers content using center and a column, displays an IncrementSize widget with a TextField and styled texts, counter, and connects to a ViewModel via StoreConnector.
Build a _ViewModel for HomePage to manage incrementSize and counter, dispatch IncrementAction via incrementCounter, and bind UI (TextField) with StoreConnector and AppState.
Explains how the distinct: true option improves redux performance by tracking changed view models with equatable, while optimizing scrolling with ScrollController, onDidChange, and animated scroll to top or bottom.
Explore flutter redux essential course's performance optimization by implementing up-down state management with ShowUpButtonAction and ShowDownButtonAction, reducers, and app-wide integration, including the distinct store connector for better rebuild performance.
Learn how middleware enables Redux to handle asynchronous operations by intercepting actions, performing remote API calls, and dispatching success or failed actions to update the reducer-driven app state.
explore flutter redux middleware by building a redux_middleware app skeleton, wiring models, repositories, and pages, and generating a product model from json using a dart data class generator extension.
Create a singleton product repository that fetches product lists and single products from fakestoreapi.com using http and Uri. Implement getProducts and getProduct with async error handling to support redux middleware.
Model product state in flutter redux by defining ProductsState with a ProductsStatus enum (initial, loading, success, failure), a products list, an error string, and related actions.
Create a products reducer set with loading, success, and failure states using copyWith, and implement a products middleware to fetch from fakestoreapi.com; assemble this into AppState and wire with StoreProvider.
Define a single product state with actions, a reducer, and middleware to fetch a product via fakestoreapi, handling loading, success, and failure, and integrate it into app state and reducers.
Connect a _ViewModel to ProductsPage with StoreConnector, dispatch GetProductsAction on init, and display a grid of fakestoreapi products with images, titles, prices, and error handling.
Build a Flutter Redux product detail page by wiring a _ViewModel, fetching a product from fakestoreapi using the productId, and showing a dialog on error while loading.
Explore merging separate middleware into one with productInfoMiddleware, handling GetProductsAction and GetProductAction via async operations, and organizing middleware within a redux folder; prepare for redux_thunk in the next chapter.
Learn how redux_thunk enables async work by dispatching thunk actions—functions that receive the store, perform logic (including async tasks), and dispatch or swallow normal actions through middleware.
This lecture refactors redux middleware with redux_thunk, adding thunkMiddleware, and implements getProductsAndDispatch and getProductAndDispatch thunks to fetch data via ProductRepository, dispatching success or failure actions.
Persist redux state with redux_persist and redux_persist_flutter in local storage for Flutter and web apps, maintaining counter and quotes across hot restarts.
Learn to persist app state with redux_persist by converting state to json, storing it via FlutterStorage with JsonSerializer, and restoring AppState and CounterState with fromJson and toJson.
Persist state with redux_persist_flutter while fetching data from a remote API, converting the JSON to a Quote model, and refining its toJson/fromJson methods using a Dart data class generator.
Build and serialize a redux counter using CounterState with Equatable, initial state, toJson and fromJson, IncrementAction and DecrementAction, and a counterReducer plus AppState with app wide reducer.
Set up the persistor with redux_persist in the app, register thunk and logging middlewares, configure FlutterStorage as storage, load initial state, and expose the store via StoreProvider for the app.
Define a QuoteState with a QuoteStatus enum (initial, loading, success, failure), including quote data and error, add a constant constructor and a factory initial constructor, and implement toJson and fromJson.
Implement a redux-based quote fetch flow with GetQuoteAction, GetQuoteSucceededAction, and GetQuoteFailedAction, powered by a thunk that calls quotable.io and updates the UI through loading, success, or failure states.
Create a home page view model that reads counter and quote state from the store, dispatches actions, and renders quotes with status handling.
Explore Redux-based state management in Flutter by building a todo app in two versions: synchronous, then async with sqflite, and develop view models to expose derived UI state.
Explore todo app structure with a header, search fields, and tabs for all, unfinished, and completed, where redux derives activeTodoCount, totalTodoCount, and filteredTodos from list, search term, and filter.
Create a flutter redux todo app skeleton by installing redux, flutter_redux, uuid, and equatable; organize models, pages, redux folders; establish app_state and app_reducer and implement three states with debounce search.
Define a todo model with id, todoDesc, and completed, using uuid for unique ids, and add equatable, toString, and copyWith; create TodoFilter enum and begin redux state, actions, and reducers.
Create a TodoFilterState class with an initial factory, define ChangeTodoFilterAction with a TodoFilter value, implement changeTodoFilterReducer and todoFilterReducer using copyWith and combineReducers to manage filter and prepare for searching todos.
Create TodoSearchState to store the searchTerm, implement SearchTodoAction and todoSearchReducer to update it, and compose reducers into todoSearchReducer while laying groundwork for TodoList state.
Create an app wide state with AppState containing todoListState, todoSearchState, and todoFilterState, initialize with AppState.initial, delegate to todoListReducer, todoSearchReducer, and todoFilterReducer, and inject the store with StoreProvider.
Creates a TodoHeader widget connected to the store with StoreConnector, displaying totalTodoCount and activeTodoCount via a _ViewModel and its fromStore method, while optimizing rebuilds.
Create a NewTodo widget (stateful) wired to a view model via StoreConnector to add todos with AddTodoAction, validating input and clearing the field after submission.
Create the SearchTodo widget in the todos page and wire a TextField with decorations and a search icon that dispatches SearchTodoAction on every keystroke via a ViewModel and StoreConnector.
Build a FilterTodo widget with All, Active, and Completed buttons in a row, connect it to Redux via a ViewModel, and color the active button blue while dispatching ChangeTodoFilterAction.
Create the ShowTodos widget as a StatelessWidget that lists todos filtered by searchTerm and TodoFilter, with checkboxes, editable titles, and swipe-to-delete; powered by a _ViewModel built from store.
Implement a Dismissible todo list with a value key, red background and trash icon, and a confirm dismissal dialog that triggers a delete action via the ViewModel.
Create a TodoItem widget that displays each todo as a ListTile with a leading checkbox and a todoDesc title, connected to a _ToggleViewModel via StoreConnector to dispatch ToggleTodoAction.
The lecture shows editing a todo item via a tap that opens a ConfirmEditDialog with a TextField and a TextEditingController, dispatching a Redux-based EditTodoAction through a StoreConnector.
Implement debounce search in a Flutter Redux todo app by introducing a Debounce utility, delaying search until typing pauses, and refactoring to use sqflite for local data persistence.
Refactor the todo app to apply redux_thunk and sqflite, set up middleware and constants, define TodoTable with _id and created/updated times, and wire db setup in main.dart.
Refactor the todo model to use sqflite's int id, add createdAt and updatedAt, and implement fromJson and toJson for json storage, plus a custom error model.
Create a singleton TodosDB to manage the sqflite database connection and CRUD operations. Configure the getDatabasePath default path, join with todos.db, implement onCreate with TodoTable.createTodoTable, and expose a database getter.
Create crud operations for todos with sqflite, including getTodos and getTodo, using db.query, insert, and update, with error handling via CustomDBException and a repository for database access.
Implement a singleton todos repository that hides data conversion between the database and business logic, exposes getTodos and getTodo, handles DatabaseException and CustomDBException, and centralizes errors via CustomError.
explore how TodoFilter and TodoSearch drive display logic, manage asynchronous database reads with a TodoListStatus enum (initial, loading, success, failure), and integrate CustomError into TodoListState.
Learn to fetch a todo list from the database with redux_thunk in flutter redux. Implement getTodoListAndDispatch thunk and actions for loading, success, and failure states.
The lecture presents AddTodoAction as an async thunk that dispatches AddTodoSucceededAction on success and AddTodoFailedAction on failure. It uses TodosRepository to create a todo and updates TodoListState via copyWith.
Implement toggle todo with redux and thunk actions, including ToggleTodoAction, ToggleTodoSucceededAction, and ToggleTodoFailedAction. Dispatch through the TodoRepository, use TodoListState copyWith to produce a new state, and handle CustomError on failure.
Explore edit todo actions and reducers driven by thunk, including EditTodoAction, EditTodoSucceededAction, EditTodoFailedAction, and editTodoAndDispatch, to update todos and reflect loading, success, or failure states.
Implement deleteTodo and its thunk flow via deleteTodoAndDispatch, dispatching DeleteTodoAction, handling success with DeleteTodoSucceededAction and failure with DeleteTodoFailedAction, and update TodoListState via reducers.
Learn Flutter Redux essentials through new todo, show todos, and todo item widgets, using view model with thunk actions like addTodoAndDispatch, deleteTodoAndDispatch, toggleTodoAndDispatch, and editTodoAndDispatch, plus updated time display.
Wiring a ViewModel to TodosPage with redux, the approach handles async todo actions and shows loading indicators and error dialogs via StoreConnector and ModalProgressHUD.
Create a platform-aware error dialog in flutter by implementing error_dialog.dart with BuildContext and CustomError, using showCupertinoDialog on iOS and showDialog otherwise to display errorType and message.
Learn optimistic rendering in a Flutter Redux todo app by dispatching ToggleTodoSucceededAction before server responses, then test error handling with a CustomError and updatedAt-based sorting.
Create a weather app that fetches city weather from OpenWeatherMap, displays temperature with dynamic theming, and supports Celsius or Fahrenheit, including error handling and API key setup.
Render a weather app using OpenWeatherMap geocoding to obtain latitude and longitude, then fetch current weather data with metric units, display icons, and switch themes by temperature for open_weather_redux app.
Build a flutter redux app for weather using redux, flutter_redux, redux_thunk, and flutter_dotenv, configure environment variables (openweathermap key), and scaffold models, redux folders, and three pages (home, search, settings).
Design and implement Flutter Redux models to represent openweathermap data, including direct_geocoding and weather models with DirectGeocoding and Weather, plus CustomError for fromJson and toJson-based error handling.
Develop a Flutter weather service by building weather_api_services.dart, configuring constants, dotenv, and an http client to fetch geocoding and weather data from openweathermap with robust error handling.
Create an async getWeather that accepts DirectGeocoding, builds an https Uri with lat, lon, units, and appid, fetches via httpClient.get, parses Weather.fromJson, and exposes two http calls in a repository.
Create a singleton WeatherRepository using WeatherApiServices to fetch city weather through DirectGeocoding and APIs, with WeatherException and CustomError handling.
Define a weather redux feature in flutter: WeatherState, WeatherStatus, actions, reducer, and thunk middleware to fetch weather from openweathermap, handling loading, success, and failure with CustomError.
Learn to implement weather reducers with fetch, success, and failure actions, assemble them with combineReducers, and wire an app-wide store via store provider and middleware.
Users tap the home search icon to open the search page, enter a city name with validation for at least two characters, and submit to update the home page weather.
Create a _ViewModel for the HomePage that fetches weather via fetchWeather, exposes weather, weatherStatus, and error from WeatherState, and connects with StoreConnector to render openweathermap data in the Scaffold.
Implement a _showWeather function that returns widgets based on WeatherState and WeatherStatus, displaying 'Select a city' at initial, a CircularProgressIndicator while loading, and the city name when loaded.
Explore building a weather header on the home page using a ListView, centered city name, formatted update time, country, and current/high/low temperatures with row and column layouts.
Implement a showTemperature function to format Celsius with two decimals, apply it to tempMax and tempMin, and display a network weather icon with a formatted description in a row.
define a temp settings module in flutter redux using TempUnit enum, TempSettingsState with initial factory, and ToggleTempUnitAction; create reducers to toggle Celsius and Fahrenheit and update app state.
Create a SettingsPage view model with currentTempUnit and toggleTempUnit, connected to the store via StoreConnector and ToggleTempUnitAction through a Switch. Update HomePage showTemperature to reflect TempUnit values, Celsius and Fahrenheit.
Implement a temperature-driven theme switch in a Flutter Redux app using kWarmOrNot and a _ViewModel connected via StoreConnector to toggle light or dark themes.
Explore firebase authentication with redux in a flutter app, implementing email/password sign up, sign in, sign out, email verification, and password reset, using firebase_core, firebase_auth, and redux_thunk.
Learn to set up a Firebase project for Flutter using flutterfire_cli, install firebase_core, configure Android and iOS apps, and test on emulators.
Learn how to set up additional Firebase projects for Android and iOS in Flutter apps, including multidex and minSdkVersion changes, and configure Firebase Auth and Cloud Firestore with Flutterfire.
Organize the app into folders for constants, models, pages, redux, repositories, utils, and widgets, and implement AppUser and CustomError models with AppUser.fromDoc and a users collection in firestore.
Explore app folder structure in the Flutter Redux essential course, focusing on splash, auth, and content folders and how splash_page.dart gates navigation based on Firebase connection, authentication, and errors.
Create a Firebase auth repository as a singleton in Flutter, exposing userStream, currentUser, uid, and emailVerified, and implement signup, signin, signout, and password reset with robust error handling.
Implement Firebase authentication methods in the auth repository using Redux: change password, send password reset email, verify email, reload user data, and reauthenticate with credentials, with robust error handling.
Explores the Firebase authentication flow from splash to sign-in, signup, and home page, using a stream builder to monitor user state and handling email verification and reauthentication for password changes.
Build a Redux-driven signup flow in Flutter by defining signup state and status, actions, reducers, and app state, plus a thunk signupAndDispatch for async signup with error handling.
Create a responsive flutter signup page with name, email, password, and confirm password fields, form validation and autovalidate modes, plus reusable fields and firebase signup.
Develop a redux-based signup flow in flutter by building a _ViewModel, connecting it with StoreConnector, and handling signup status, errors, and navigation to home, including signout.
Learn how Redux signup handles errors with signupStatus failure and a CustomError to display a platform-aware error dialog via StoreConnector's onWillChange.
Build a redux-style signin flow with signin_state, signin_action, and signin_reducer, define SigninStatus and SigninState, and connect actions, thunks, and reducers to AppState and SigninPage.
Develop sign-in page with a view model tracking signin status and errors, dispatch a signin thunk with trimmed credentials, and enable form validation and navigation to signup and reset password.
Learn how the VerifyEmailPage periodically checks email verification every five seconds, reloads the user, and navigates to HomePage when verified, with signup and error handling.
Implement a redux-based reset password flow in flutter by defining reset_password_state and actions, and dispatch a thunk that sends reset email via AuthRepository and navigates to signin page on success.
Implement the reset password page with a view model, form validation, and error handling, dispatching the reset password action and showing dialogs and snackbars on success or failure.
Create a singleton ProfileRepository to read user profile data from firestore's users collection via the getProfile(uid) method, returning an AppUser and handling missing data with CustomError.
Build a redux-based profile feature by defining ProfileState and ProfileStatus, creating profile actions and a thunk getProfileAndDispatch to fetch AppUser from firebase and handle success or failure.
Define _ViewModel, connect to home page via StoreConnector, fetch profile from firestore on init using uid, display loading, error, or welcome with appUser details.
Explore how to implement a change password flow in flutter redux with firebase authentication, including state, actions, and reducers, handling requires-recent-login errors and re-authentication.
learn to implement a change password flow in flutter redux, with a change password page UI, form validation, a store-connected view model, and signout on success.
Learn to handle requires-recent-login by routing to a dedicated reauthentication page, validate email and password forms, and reauthenticate with credentials, then show a success snackbar and secure Firestore rules.
Redux is the most widely used and proven state management solution in React, the most widely used Front End Framework. Redux can also be used in Flutter.
In the Flutter Redux Essentials course, you can learn about Flutter Redux in depth.
If you want a deep understanding of Flutter Redxu and want to practice all the concepts in real life, then this is the course for you.
When creating the lectures, care was taken to ensure a balance between theory and practice.
Under the belief that repetition is the most important learning method, whenever a new concept emerges, a small app is created to test the concept, and practical apps such as TODO (synchronous), TODO (asynchronous with SQLite DB), Weather, and Firebase Authentication app are developed. Through this, the concepts were harmonized comprehensively.
Let's take a quick look at the topics covered in this course.
- Basic concepts of Redux
- Implementation of basic concepts with Dart Redux App
- Core utilities for Flutter Redux App (StoreBuilder, StoreConnector, StoreProvider)
- Combining Reducers
- Dart Data Class Generator Extension and equatable package
- Performance Optimization of Flutter Redux App
- Experience Performance Optimization through real apps
- Redux Middleware
- thunk middleware
- Persisting Redux State
- TODO App (Synchronous)
- TODO App (Asynchronous with SQLite DB, Optimistic Rendering)
- Weather App
- Firebase Authentication App: Signup, Signin, Signout, Verify Email, Change Password, Forgot Password