Advanced Flutter[2026]: BLoC, Injectable, Flavors, i18n, Dio

Learn how flavors in Flutter build multiple environments—development, staging, and production—allowing different APIs, logos, and app names, while enabling safe testing and quick environment switching.

Set up flutter flavors to manage prod, staging, and dev environments using a flavor config with base URL and app name, then create separate entry points to switch easily.

Configure Android flavors in Flutter by defining a flavor dimension for production, staging, and dev, with app name and application ID suffixes, and update the manifest.

Configure vscode to run flutter flavors by adding launch.json and defining prod, staging, and dev configurations with specific entry points and flavor-based API base URLs.

Open Android Studio and edit run configurations to set entry points for each flutter flavor, using main.prod for production, main.dev for development, and main.staging for staging.

Learn how dependency injection in Flutter improves testability and loose coupling by injecting dependencies, and how injectable with get it automates setup, annotations, and code generation for scalable apps.

Configure injectable in a Flutter project by adding the injectable and get it package, plus the injectable generator and build_runner dev dependencies, and set environment flavors.

Explore auto route, a declarative navigation package that auto-generates routes for deep linking and guarded pages, enabling strongly typed argument parsing and minimal boilerplate for Flutter apps.

Learn to configure auto_route in flutter by adding auto_route, auto_route_generator, injectable, and build_runner, creating a router.dart, and enabling lazy singleton with router config for central route management.

Learn how to add an auto route observer to your Flutter app, integrate a navigation observer for debugging, and configure generated routes with build runner for reliable routing.

Learn to set up flutter internationalization by adding flutter localization packages, configuring l10n.yaml, creating language files, running flutter pub get, and enabling localization delegates and supported locales.

Learn how to set up Flutter internationalization using flat localization, add localization support, and configure delegates and supported locales for your Material app.

Test the app's internationalization by accessing translated text via localization context, switch to Swahili to display Habari Dunia, and enable language changes with a button and settings.

Build an onboarding flow with a splash screen, language selection, and intro screens. Use hive to store the chosen language and first-open flag, with injectable guiding dependency management.

Learn how to register a Hive adapter and initialize Hive, open the box, and wire the configuration with injectable modules so settings are ready before use.

Create and manage app settings with a settings cubit that uses a hive box, await-based initialization, and injectable wiring to handle first-launch language selection and onboarding flow.

Register the app settings cubit globally with bloc provider, enabling access to language controls. Use block builder to load the chosen language (English or Swahili) from the box.

Create a splash screen as the app’s initial screen, navigate across three pages (splash, choose language, onboarding) based on first-launch logic with app settings and router.

Explore building a language selection screen in flutter, using localization keys and translations, a reusable language option widget, and app-wide state to switch between Swahili and English.

Build a polished onboarding flow in Flutter using the introduction screen package, with pages including title, body, and image, and track completion via qubit to reach the home route.

Set up a global networking layer with DOH for API requests, and implement a singleton logger for consistent debugging, error handling, and a reusable get and post service.

Configure Dio network settings for flutter flavors by creating env config classes for dev, staging, and prod, defining base url, timeouts, logging, and headers.

Implement Dio interceptors as middleware to manage requests, responses, and errors, including token passing for secured endpoints and a logging interceptor for debugging, enabling a scalable API layer.

Create a centralized Dio client with environment config for base URL, headers, and timeouts, and add interceptors for tokens and logging.

Create an api exception class to handle api related errors with friendly messages and structured error handling. Print each response and include status codes to ease debugging and error management.

Define a generic api result class to handle server responses with clear success and failure paths, using generics for any data type to ensure reusable, type-safe, and maintainable networking.

Create an api service wrapper class to execute network calls, handle specific errors and http status codes, and return messages, status codes, and responses for users.

Implement a centralized Dio network service that handles http status codes, maps errors to user-friendly messages, logs all issues, and uses api service wrapper execute for consistent results.

Define a global API response with status code, message, timestamp, and data for all server responses. Use freezed to create a reusable, serializable front-end model for consistent API handling.

Recap networking setup for flutter apps, showing a reusable dio client with env configs for dev, staging, and prod, plus interceptors, logging, and json serialization via freezed and json_serializable.

Inspect and understand the categories API response using Postman, identify the data structure (data list with id and name, createdat and updatedat), and plan serialization for UI integration.

Explore creating a category model with freezed to deserialize JSON from an endpoint, generate from JSON methods with build_runner, and organize feature-based folders for models, presentation, and repository.

Create a product repository that fetches all categories via a network service and categories endpoint, handling success and failure with API result and JSON deserialization into category models.

Set up a BLoC with states and events to fetch categories, using a standard API response pattern and the freezed block boilerplate.

Define a bloc workflow to fetch categories via a load categories event, emit a category status, and handle success or failure using a repository injected with injectable.

Explore folder structure and define pages for the home screen, showing blocs communicating with the repository to fetch categories and products, and set up tabs and routes for the dashboard.

Design and implement bottom navigation with tabs using AutoRoute, wiring a dashboard with home and profile pages and tab indices for seamless navigation.

Navigate the home screen UI, including the dashboard route, search bar, banner slider, and static categories, while wiring bloc-driven backend category fetching inside a custom scroll view.

Learn to configure dev environment with flavors and base URLs, fetch and display categories using Flutter Bloc with BlocBuilder and injectable, handling loading, success, and error states.

Learn to test category fetching in a Flutter app using BLoC with injectable for dependency injection, including API calls, deserialization with freezed, and logging to debug endpoints.

Explore inspecting the get all products endpoint in Postman, parse the nested product data with pagination metadata, and implement proper deserialization and mobile pagination using a global API response.

Develop a reusable generic pagination model with freezed to handle products, categories, and search results, enabling consistent current page, total pages, and total items across resources.

Define a reusable pagination meta model with Freezed to deserialize JSON metadata like items per page, current page, total pages, and total items.

Create a product model for deserialization and a product response with items and pagination meta. Use freezed for from-json and to-json, handling json keys like product image.

Create a Freezed product response model to deserialize paginated api results, including the data list and the pagination meta, for use with product data and product image.

Apply the repository pattern to fetch all products with pagination. Add page and limit query parameters, map api responses, and support infinite scrolling.

Define a product state and events in a bloc to fetch all products with pagination, using a generic paginated data model, then implement business logic and support load more actions.

Implement BLoC business logic for fetching all products from the backend with pagination, including load, unload, and load more, using copyWith.

Implements the load more products logic in a BLoC, handling pagination, end-of-list checks, and a bottom loading indicator by merging new items with existing state.

Display a home screen grid of products using bloc builder and a sliver grid, with two columns, product cards, network images with placeholders, and pagination considerations.

Learn how to implement infinite scroll pagination in flutter by pairing a custom scroll view with a scroll controller, bloc events, and state to fetch and load more products.

Explore implementing pagination and infinite scrolling to fetch products in batches of 16, handle page state, and detect end of data, while wiring navigation to product detail and category filters.

Implement the repository pattern to fetch all products by category, add a category id to the request, update the endpoint, and define states and events to manage category-based fetching.

Set up a paginated load products by category event, passing the category id from the UI through the bloc to the repository, and run build runner to generate the code.

Learn to add BLoC logic for fetching products by category, including event handling, passing the category ID to the endpoint, processing results, and supporting load more in the UI.

Add a new all products by category screen as a stateful widget, wire it to the root page, pass the category model, and run build_runner to generate exports.

Implement infinite scroll pagination for all products by category using Flutter BLoC, detailing scroll controller setup, sliver grid rendering, loading indicators, and category navigation.

Debug and optimize category-based product listing with pagination in Flutter, using dispose and pause to reset category IDs on changes, with loading indicators and product detail fetch.

Explore retrieving a single product via the api/products/{id}, inspect the 200 response, and reuse the product data structure with freezed, noting varying backend payloads and endpoint optimization.

Fetches a single product via the repository pattern, calls the product slash ID endpoint, deserializes into a product model, and updates the BLoC state and events.

Define a product bloc with a state and an event that fetches details by id via the network repository; then run the build runner.

Register events and implement business logic to fetch product details in BLoC, handle loading states, and interact with the network repository using the event id.

Define a product detail page that receives a product id via the router, navigates from the product list, and triggers a bloc event with that id to render the details.

Learn to implement a product detail UI in Flutter using BLoC, load a single product, display images with CardSwiper, and show price with block selector for i18n-ready UI.

Test fetching product details in a Flutter app, render a swiper image gallery with pagination, handle loading and errors, and implement search and filters for products.

Implement product search with keyword and filters, including category id, min price, and max price, aligning front end query parameters with back end expectations.

Implement product search using a repository pattern, calling the API with keyword, category id, min price, max price, and pagination, and define blog stages and events to manage the search.

Set up and manage search state for products using events and a search results state, handling keyword input, category filters, price ranges, and pagination to drive a responsive UI.

Define and manage search keyword and results in BLoC to support simple product search by keyword, with pagination and future filters like min price, max price, and category.

Implement a search products UI with a stateful page, route annotation, focus management, and BLoC-driven search, featuring a text field, keyboard search, filters, pagination, and a sliver grid.

Learn to implement keyword-based product search in Flutter, manage search bar focus and state, trigger backend search, and add filter UI for min price, max price, and category.

Implement a multi-criteria search filter in Flutter using BLoC to track active filters, including category and min/max price, with a filter sheet UI and reset functionality.

Explore testing a search filter workflow, including min and max price, category chips, apply and reset actions, and how filters affect product search results.