{"id":39329,"date":"2025-06-10T11:55:44","date_gmt":"2025-06-10T06:25:44","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=39329"},"modified":"2026-03-11T18:43:59","modified_gmt":"2026-03-11T13:13:59","slug":"flutter-state-management-bloc-tutorial","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial","title":{"rendered":"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step)"},"content":{"rendered":"<h2 class=\"wp-block-heading\"><strong>What is BLoC in Flutter?<\/strong><\/h2>\n\n\n\n<p>Flutter state management is a core concept for handling data and UI synchronization in apps. One of the most widely adopted patterns for state management in Flutter applications is BLoC (Business Logic Component). It separates business logic from UI, making your code clean, testable, and easy to maintain, even for large teams or projects. BLoC for state management is suitable for both simple and complex<a href=\"https:\/\/mobisoftinfotech.com\/services\/flutter-app-development-company?utm_source=blog_cta&amp;utm_campaign=flutter-state-management-bloc\"> Flutter app development<\/a>. The code becomes more user friendly, maintainable, and testable.<\/p>\n\n\n\n<p>It will handle all the state that flows through the Flutter application. Most people use BLoC to navigate major scenarios seamlessly, and any potential issues can be tracked and resolved effectively by Flutter developers. This makes the code cleaner, more manageable, and inherently testable.<\/p>\n\n\n\n<p>In this implementation, we are using Flutter + BLoC + REST API for Flutter state management. The application includes a search country name page with a search bar and a list of results. When a country is tapped, it navigates to a details page displaying all information related to the selected country.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How does it work?<\/strong><\/h2>\n\n\n\n<p>The BLoC for state management consists of three components: UI, BLoC, and Data (Repository\/REST API). The UI triggers events based on user actions and renders the view. These events are passed to the BLoC, which captures and processes them to emit new states. Finally, the Data layer (repository) fetches and stores the necessary data. Fig. block diagram below.<\/p>\n\n\n\n<p>Using the BLoC architecture makes your application more scalable and production ready especially when you&#8217;re planning to<a href=\"https:\/\/mobisoftinfotech.com\/services\/hire-flutter-developers?utm_source=blog&amp;utm_campaign=flutter-state-management-bloc_blog\"> hire Flutter app developers<\/a> for complex or enterprise level applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Core Components of the BLoC Pattern:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Event<\/strong>:&nbsp; An event is triggered when a user interacts with the application. This event is then sent as input to the BLoC. For example, when a user clicks a button or types into a search field on the UI, the corresponding event is generated and passed to the BLoC for processing.<\/li>\n\n\n\n<li><strong>States<\/strong>: States provide a clean separation between business logic and UI, and they represent the current condition of the application. Simply put, states are responsible for rendering the UI based on the BLoC&#8217;s output. For example, the states can be Initial, Loading, Error, or Success.<\/li>\n\n\n\n<li><strong>BLoC<\/strong>: The BLoC contains the main business logic or core logic of the application. It captures the events triggered by the UI through user interactions and emits the corresponding states for those events. Overall, the BLoC is responsible for managing the entire state of the application.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"297\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/bloc-architecture-diagram.png\" alt=\"Flutter BLoC architecture diagram for state management\" class=\"wp-image-39358\" title=\"BLoC Architecture for Flutter State Management\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"297\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20297%22%3E%3C%2Fsvg%3E\" alt=\"Flutter BLoC architecture diagram for state management\" class=\"wp-image-39358 lazyload\" title=\"BLoC Architecture for Flutter State Management\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/bloc-architecture-diagram.png\"><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>Fig. Block Diagram<\/strong><\/p>\n\n\n\n<p>It provides three widgets: Bloc Consumer, Bloc Provider, and Bloc Listener. Using them will make it easy and simple to integrate the BLoC implementation.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Bloc Consumer: <\/strong>&nbsp;BlocConsumer is used for both BlocListener and BlocBuilder. It will listen to the state changes in the BLoC and update the UI elements based on the current state. It will handle both the work of the listener and the builder.<br>   <strong>BlocListener:<\/strong> Only for UI actions that are triggered with state changes.<br>   <strong>BlocBuilder:<\/strong> Used to perform actions if the state makes some changes (primarily for rebuilding UI).<\/li>\n<\/ol>\n\n\n\n<p><strong>Syntax :&nbsp;<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">BlocConsumer&lt;BlocType, StateType&gt;(\n  builder: (BuildContext context, StateType state) {\n    <span class=\"hljs-comment\">\/\/ UI elements based on the current state<\/span>\n    <span class=\"hljs-keyword\">return<\/span> Widget();\n  },\n  <span class=\"hljs-attr\">listener<\/span>: (BuildContext context, StateType state) {\n    <span class=\"hljs-comment\">\/\/ Actions to perform when the state changes<\/span>\n  },\n)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Bloc Provider:<\/strong> It&#8217;s a Flutter widget that provides an instance of BLoC or Cubit.<br>  <strong>Create:<\/strong> It will create an instance of cubit or bloc.<br>  <strong>Child:<\/strong> The widget subtree that can access the provided BLoC.<\/li>\n<\/ol>\n\n\n\n<p>Also, if the same, we can use multiple providers. So, for that, if there are multiple providers, it uses MultiBlocProvider<\/p>\n\n\n\n<p><strong>Syntax :&nbsp;<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">BlocProvider&lt;MyBloc, MyState&gt;(\n       create: <span class=\"hljs-function\">(<span class=\"hljs-params\">context<\/span>) =&gt;<\/span> MyBloc(),\n       <span class=\"hljs-attr\">child<\/span>: MyApp(),\n     );<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Bloc Listener: <\/strong>&nbsp;BlocListener only listens to the states emitted by the BLoC. It does not rebuild the UI but is used solely to handle side effects in response to state changes, such as showing a snackbar, dialog, or performing navigation<\/li>\n<\/ol>\n\n\n\n<p><strong>Syntax :&nbsp;<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">BlocListener&lt;BlocA, BlocAState&gt;(\n                  listener: (context, state) {\n                <span class=\"hljs-comment\">\/\/ do stuff here based on BlocA's state<\/span>\n  },\n  <span class=\"hljs-attr\">child<\/span>: <span class=\"hljs-keyword\">const<\/span> Widget(),\n);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/services\/flutter-app-development-company?utm_source=blog_cta&amp;utm_campaign=flutter-state-management-bloc\"><noscript><img decoding=\"async\" width=\"855\" height=\"363\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/cta-growth-flutter-app.png\" alt=\"Your path to 10x growth starts with a Flutter app\" class=\"wp-image-39359\" title=\" Drive 10x Growth with High-Performance Flutter Apps\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"363\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20363%22%3E%3C%2Fsvg%3E\" alt=\"Your path to 10x growth starts with a Flutter app\" class=\"wp-image-39359 lazyload\" title=\" Drive 10x Growth with High-Performance Flutter Apps\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/cta-growth-flutter-app.png\"><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Advantages of BLoC :<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>Separation of Business Logic<\/strong><\/h4>\n\n\n\n<p>It\u2019s a clear separation of business logic and UI from each other. Due to this, the code will look very separate from each other, code will be maintainable and easy to understand.<\/p>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>Testable Outcome<\/strong><\/h4>\n\n\n\n<p>We can easily test the code that is added in the business logic without involving the UI.<\/p>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>Handle State Management Effectively<\/strong><\/h4>\n\n\n\n<p>To track state management with BLoC, it is easy and effective. As compared to other state management dependencies, it has better handling of state management.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>Code is Reusable and easily understood<\/strong><\/h4>\n\n\n\n<p>Due to the code being written independently of each other, other people can easily use it from any screen, widget, or class, with no duplication of code. It will help new developers structure or architecture easily. So the changes or maintenance of a project takes less time.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>Scalable and Low Maintenance<\/strong><\/h4>\n\n\n\n<p>In large scale applications, there are often very complex operations that are not easily scalable within the system. With BLoC, it becomes easier to manage and maintain the code across the application.<\/p>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>Real Time Update<\/strong><\/h4>\n\n\n\n<p>Due to emitted states and events, real time updates to the UI happen easily and quickly. The screen UI reflects changes instantly, which improves the user experience as well.<\/p>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>Large Scale Developer Uses<\/strong><\/h4>\n\n\n\n<p>BLoC is used by a large number of developers. Due to that, issues are often addressed with multiple solutions by the Flutter BLoC developer community. This helps resolve problems quickly, even at critical stages of the project.<\/p>\n\n\n\n<p>By following this approach, you can align your architecture with industry standard<a href=\"https:\/\/mobisoftinfotech.com\/services\/mobile-app-development-company?utm_source=blog&amp;utm_campaign=flutter-state-management-bloc_blog\"> mobile app development services<\/a> that prioritize clean code and long term maintainability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Disadvantages of BLoC:<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>Mid-Level Understanding for Beginner Developers<\/strong><\/h4>\n\n\n\n<p>For beginner developers, this architecture requires a mid-level understanding. It can be difficult for newcomers to grasp at first, as they need to understand the overall structure and every concept involved. Due to the separation of code, they may need to review it multiple times to fully understand how different parts communicate with each other.<\/p>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>More Code for Smaller Applications (BoilerPlate code)<\/strong><\/h4>\n\n\n\n<p>For big and complex applications, BLoC is suitable for small applications needing small operations and multiple code classes that need to be implemented. Need to write more code to create BLoC, event, state, and main UI screen access for actual uses is different.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading h4-list\"><strong>Unnecessary Complexity<\/strong><\/h4>\n\n\n\n<p>As developers need to create more than one file, such as BLoC, State, and Event files, for every screen or feature they want to implement, this introduces additional complexity to the codebase.<\/p>\n\n\n\n<p>If you&#8217;re looking to implement a robust testing strategy in your projects, this detailed<a href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-unit-widget-integration-testing-guide?utm_source=blog&amp;utm_campaign=flutter-state-management-bloc_blog\"> Flutter Testing: Unit, Widget &amp; Integration Tests Guide<\/a> will help you understand how to structure and automate different types of Flutter tests effectively.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Steps to Add BLoC for State Management in Your Flutter Project<\/strong><\/h2>\n\n\n\n<p>In this implementation, we are using Flutter + BLoC + REST API to demonstrate how BLoC for state management is applied in real world projects. The application includes a search country name page with a search bar and a list of results. When a country is tapped, it navigates to a details page that displays all the information related to the selected country.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Project Setup<\/strong><\/h3>\n\n\n\n<p>First, create a Flutter project, then add the <em><code>flutter_bloc: ^9.1.1<\/code> <\/em>&nbsp;package to the <em>dependencies:<\/em> section of your project\u2019s <em><code>pubspec.yaml<\/code><\/em> file. You can find the latest version and details on the<a href=\"https:\/\/pub.dev\/packages\/flutter_bloc\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> BLoC Package on pub.dev<\/a>, and then run the command flutter pub get to install the dependency.<\/p>\n\n\n\n<p><strong>Note: Please use the latest version of <\/strong><strong><em>flutter_bloc,<\/em><\/strong><strong> which helps you to get the latest update on BLoC.<\/strong><\/p>\n\n\n\n<p>We added <em><code>http: ^1.4.0<\/code><\/em> dependency which helps us to call api for real time data.&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">dependencies<\/span>:\n <span class=\"hljs-selector-tag\">flutter<\/span>:\n   <span class=\"hljs-selector-tag\">sdk<\/span>: <span class=\"hljs-selector-tag\">flutter<\/span>\n # <span class=\"hljs-selector-tag\">flutter<\/span> <span class=\"hljs-selector-tag\">bloc<\/span> <span class=\"hljs-selector-tag\">dependency<\/span>\n <span class=\"hljs-selector-tag\">flutter_bloc<\/span>: ^9<span class=\"hljs-selector-class\">.1<\/span><span class=\"hljs-selector-class\">.1<\/span>\n # <span class=\"hljs-selector-tag\">Api<\/span> <span class=\"hljs-selector-tag\">call<\/span> <span class=\"hljs-selector-tag\">dependency<\/span>\n <span class=\"hljs-selector-tag\">http<\/span>: ^1<span class=\"hljs-selector-class\">.4<\/span><span class=\"hljs-selector-class\">.0<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: API Integration Note &amp; Model<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>API Reference:<\/strong><\/h4>\n\n\n\n<p>All API details are taken from the official REST Countries documentation. We are going to leverage the REST Countries <code>(<a href=\"https:\/\/restcountries.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/restcountries.com\/<\/a> )<\/code>API.<\/p>\n\n\n\n<p>For Data model creation, you can refer to the <a href=\"https:\/\/app.quicktype.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">QuickType<\/a> website to create a Dart model class.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"> <strong>API endpoint:<\/strong><\/h4>\n\n\n\n<p><code>https:\/\/restcountries.com\/v3.1\/name\/${event.name}<\/code><br>where <code>${event.name}<\/code> is the searchable country name provided by the user input.<\/p>\n\n\n\n<p>Please create a corresponding API model class under the new directory, the <em>lib<\/em> folder, and add a Dart file named <code>country_model.dart<\/code> under the <code>Model<\/code> folder, as shown in the screenshot (refer to it for naming and structure).<\/p>\n\n\n\n<p>Kindly adhere to the project structure to maintain consistency and ensure the intended functionality is achieved.<\/p>\n\n\n\n<p>Please follow the project folder structure as given in the snapshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"592\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-bloc-folder-structure.png\" alt=\"Recommended folder structure for Flutter BLoC apps\" class=\"wp-image-39363\" title=\"Best Practices: Folder Structure for BLoC in Flutter\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"592\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20592%22%3E%3C%2Fsvg%3E\" alt=\"Recommended folder structure for Flutter BLoC apps\" class=\"wp-image-39363 lazyload\" title=\"Best Practices: Folder Structure for BLoC in Flutter\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-bloc-folder-structure.png\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: <code>main.dart<\/code> \u2013 App Entry Point &amp; UI<\/strong><\/h3>\n\n\n\n<p>After creating a Flutter project, you&#8217;ll find a <strong>main.dart<\/strong> file, which serves as the main UI entry point. We need to make changes to this file as outlined in the steps below.<\/p>\n\n\n\n<p>Sets up <strong>BlocProvider<\/strong> and the main screen with a search input.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>BlocProvider:<\/strong> Provides the BLoC to its child widgets.<\/li>\n\n\n\n<li><strong>BlocBuilder:<\/strong> Rebuilds UI when state changes.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>User types in a search bar \u2192 event is sent to BLoC<\/li>\n\n\n\n<li><strong>UI reacts to states<\/strong>: loading spinner, country list, error<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Import Statements<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_bloc\/flutter_bloc.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_bloc_sample_app\/model\/country_model.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_bloc_sample_app\/screen\/country_details_page.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'bloc\/country_bloc.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'bloc\/country_event.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'bloc\/country_state.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'repository\/country_repository.dart'<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>These imports bring in:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>flutter_bloc<\/code>: For BLoC pattern and state management.<\/li>\n\n\n\n<li><code>country_model.dart<\/code>: Defines the structure of country data.<\/li>\n\n\n\n<li><code>country_details_page.dart<\/code>: Displays detailed country info.<\/li>\n\n\n\n<li><code>country_bloc.dart<\/code>, <code>country_event.dart<\/code>, <code>country_state.dart<\/code>: Core of the BLoC layer.<\/li>\n\n\n\n<li><code>country_repository.dart<\/code>: Handles actual API fetching logic (decouples logic from UI and BLoC).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>App Entry Point<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">void<\/span> main() =&gt; runApp(<span class=\"hljs-keyword\">const<\/span> MyApp());<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This is the main function that starts your Flutter app by running the MyApp widget.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>MyApp Widget \u2013 Root of the App<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyApp<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n <span class=\"hljs-keyword\">const<\/span> MyApp({<span class=\"hljs-keyword\">super<\/span>.key});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>MyApp<\/code> is the root widget of your application.<\/li>\n\n\n\n<li><code>StatelessWidget<\/code> because it doesn\u2019t manage any internal state.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyApp<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n <span class=\"hljs-keyword\">const<\/span> MyApp({<span class=\"hljs-keyword\">super<\/span>.key});\n @override\n Widget build(BuildContext context) {\n   <span class=\"hljs-keyword\">return<\/span> MaterialApp(\n     debugShowCheckedModeBanner: <span class=\"hljs-literal\">false<\/span>,\n     <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">'Country Search'<\/span>,\n     <span class=\"hljs-attr\">home<\/span>: BlocProvider(\n       create: <span class=\"hljs-function\">(<span class=\"hljs-params\">_<\/span>) =&gt;<\/span> CountryBloc(repository: CountryRepository()),\n       <span class=\"hljs-attr\">child<\/span>: <span class=\"hljs-keyword\">const<\/span> CountryPage(),\n     ),\n   );\n }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>MaterialApp<\/code><strong>:<\/strong> Sets up your app\u2019s basic structure and theming.<\/li>\n\n\n\n<li><code>debugShowCheckedModeBanner<\/code>: false: Hides the debug label on the top right.<\/li>\n\n\n\n<li><code>BlocProvider<\/code>: Provides the CountryBloc to the widget tree.<\/li>\n\n\n\n<li><code>CountryBloc(repository: CountryRepository())<\/code>: Injects the CountryRepository into the BLoC to fetch data.<\/li>\n\n\n\n<li><code>child<\/code>: Sets CountryPage as the home screen<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>CountryPage \u2013 Main Screen UI<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryPage<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatefulWidget<\/span> <\/span>{\n <span class=\"hljs-keyword\">const<\/span> CountryPage({<span class=\"hljs-keyword\">super<\/span>.key});\n @override\n State&lt;CountryPage&gt; createState() =&gt; _CountryPageState();\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>This is the main screen widget with a search bar and list of countries.<\/li>\n\n\n\n<li><code>StatefulWidget<\/code> because it manages a <code>TextEditingController<\/code>.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Controller Setup<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">final<\/span> TextEditingController controller = TextEditingController();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Used to read input from the search bar.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>UI Layout (build method)<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">@override\nWidget build(BuildContext context) {\n <span class=\"hljs-keyword\">return<\/span> Scaffold(\n   appBar: AppBar(title: <span class=\"hljs-keyword\">const<\/span> Text(<span class=\"hljs-string\">'Search Country'<\/span>)),<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>Scaffold<\/code>: Provides page structure with an <code>AppBar<\/code>, body, etc<\/li>\n\n\n\n<li><code>AppBar<\/code>: Displays the screen title.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Search TextField UI<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">Padding(\n padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.all(<span class=\"hljs-number\">16.0<\/span>),\n <span class=\"hljs-attr\">child<\/span>: Column(\n   children: &#091;\n     Container(\n       height: <span class=\"hljs-number\">50<\/span>,\n       <span class=\"hljs-attr\">decoration<\/span>: BoxDecoration(\n         borderRadius: BorderRadius.circular(<span class=\"hljs-number\">10.0<\/span>),\n         <span class=\"hljs-attr\">border<\/span>: Border.all(color: Colors.grey, <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">1<\/span>),\n       ),\n       <span class=\"hljs-attr\">child<\/span>: TextField(\n         controller: controller,\n         <span class=\"hljs-attr\">onChanged<\/span>: (<span class=\"hljs-built_in\">String<\/span> value) {\n           context.read&lt;CountryBloc&gt;().add(SearchCountry(value));\n         },\n         <span class=\"hljs-attr\">decoration<\/span>: InputDecoration(\n           contentPadding:\n               EdgeInsets.symmetric(horizontal: <span class=\"hljs-number\">10<\/span>, <span class=\"hljs-attr\">vertical<\/span>: <span class=\"hljs-number\">12<\/span>),\n           <span class=\"hljs-attr\">border<\/span>: InputBorder.none,\n           <span class=\"hljs-attr\">hintText<\/span>: <span class=\"hljs-string\">'Search country name'<\/span>,\n           <span class=\"hljs-attr\">suffixIcon<\/span>: IconButton(\n             icon: <span class=\"hljs-keyword\">const<\/span> Icon(Icons.search),\n             <span class=\"hljs-attr\">onPressed<\/span>: () {\n               BlocProvider.of&lt;CountryBloc&gt;(context)\n                   .add(SearchCountry(controller.text));\n             },\n           ),\n         ),\n       ),\n     ),<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>A TextField inside a styled container.<\/li>\n\n\n\n<li><code>onChanged<\/code>: Sends a <code>SearchCountry<\/code> event to BLoC every time the user types.<\/li>\n\n\n\n<li><code>suffixIcon<\/code>: Search icon button that also sends the search event manually.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>BlocBuilder \u2013 List Display Based on State<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">const<\/span> SizedBox(height: <span class=\"hljs-number\">16<\/span>),\nExpanded(\n child: BlocBuilder&lt;CountryBloc, CountryState&gt;(\n   builder: (context, state) {\n     <span class=\"hljs-keyword\">if<\/span> (state is CountryLoading) {\n       <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">const<\/span> Center(child: CircularProgressIndicator());\n     } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (state is CountryLoaded) {\n       <span class=\"hljs-keyword\">return<\/span> ListView.builder(\n         itemCount: state.countries.length,\n         itemBuilder: (context, index) {\n           <span class=\"hljs-keyword\">final<\/span> country = state.countries&#091;index];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>BlocBuilder<\/code>: Listens to the BLoC state and rebuilds the UI.<\/li>\n\n\n\n<li><code>CountryLoading<\/code>: Shows spinner.<\/li>\n\n\n\n<li><code>CountryLoaded<\/code>: Shows a list of countries.<\/li>\n\n\n\n<li><code>ListView.builder<\/code>: Dynamically builds country cards.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Each Country List Item<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">return<\/span> GestureDetector(\n     onTap: (){\n       Navigator.push(\n         context,\n         MaterialPageRoute(\n           builder: <span class=\"hljs-function\">(<span class=\"hljs-params\">context<\/span>) =&gt;<\/span> CountryDetailsPage(country: country),\n         ),\n       );\n     },\n     <span class=\"hljs-attr\">child<\/span>: Card(\n       child: ListTile(\n           title: Text(country.name?.official ?? <span class=\"hljs-string\">\"NA\"<\/span>),\n           <span class=\"hljs-attr\">subtitle<\/span>: getCountryDetails(country)),\n     ),\n   );\n },\n);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Tapping on a country navigates to the <code>CountryDetailsPage<\/code> with selected country data.<\/li>\n\n\n\n<li>Each card displays the country&#8217;s official name and a summary.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>getCountryDetails Helper Method<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">Widget getCountryDetails(CountryModel country) {\n <span class=\"hljs-keyword\">return<\/span> Column(\n   crossAxisAlignment: CrossAxisAlignment.start,\n   <span class=\"hljs-attr\">mainAxisAlignment<\/span>: MainAxisAlignment.start,\n   <span class=\"hljs-attr\">children<\/span>: &#091;\n     Text(<span class=\"hljs-string\">'Capital: ${country.capital}'<\/span>),\n     Text(<span class=\"hljs-string\">'Region: ${country.region}'<\/span>),\n     Text(<span class=\"hljs-string\">'Subregion: ${country.subregion}'<\/span>),\n     Text(<span class=\"hljs-string\">'Population: ${country.population}'<\/span>),\n   ],\n );\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Formats and displays a few key details for each country card.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Dispose Controller<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-keyword\">@override<\/span>\n@override\nvoid dispose() {\n <span class=\"hljs-selector-tag\">controller<\/span><span class=\"hljs-selector-class\">.dispose<\/span>();\n <span class=\"hljs-selector-tag\">super<\/span><span class=\"hljs-selector-class\">.dispose<\/span>();\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Frees up memory by disposing of the TextEditingController when widget is removed.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: <code>country_event.dart<\/code> \u2013 Implement event<\/strong><\/h3>\n\n\n\n<p>Please create a corresponding <code>country_event<\/code><strong> <\/strong>class<strong> <\/strong>under the new directory in the <em><code>lib-&gt;bloc<\/code><\/em> folder and add a Dart file name as <code>country_event.dart<\/code> under the <em><code>bloc<\/code><\/em> folder. Add the below mentioned code block.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">abstract<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryEvent<\/span> <\/span>{}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>What this line does:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This defines an abstract class named <code>CountryEvent<\/code>.<\/li>\n\n\n\n<li>It acts as a base class for all types of events related to the country search feature.<\/li>\n\n\n\n<li>You cannot create an object directly from an abstract class.<\/li>\n\n\n\n<li>This is useful in BLoC pattern to group related events.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">SearchCountry<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">CountryEvent<\/span> <\/span>{\n final <span class=\"hljs-built_in\">String<\/span> name;\n SearchCountry(<span class=\"hljs-keyword\">this<\/span>.name);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SearchCountry is a concrete class that extends (inherits) from CountryEvent.<\/li>\n\n\n\n<li>This class represents a specific event: when the user searches for a country.<\/li>\n\n\n\n<li>final String name; \u2192 This holds the name of the country entered by the user.<\/li>\n\n\n\n<li>SearchCountry(this.name); \u2192 A constructor that assigns the given name to the variable.<\/li>\n<\/ul>\n\n\n\n<p><code>CountryEvent<\/code>\u2014Base class for all country related events<\/p>\n\n\n\n<p><code>SearchCountry<\/code>\u2013Specific event when user enters a country name<\/p>\n\n\n\n<p><code>name<\/code>\u2013Holds the user&#8217;s search input<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: <code>country_state.dart<\/code> \u2013 App State Definition<\/strong><\/h3>\n\n\n\n<p>Please create a corresponding <code>country_state<\/code> class<strong> <\/strong>under new directory the <em><code>lib-&gt;bloc<\/code><\/em> folder and add a dart file name as <code>country_state.dart<\/code> under the <em><code>bloc<\/code><\/em> folder. Add the below mentioned code block.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:country_search_bloc\/model\/country_model.dart'<\/span>;\n\nabstract <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryState<\/span> <\/span>{}\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryInitial<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">CountryState<\/span> <\/span>{}\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryLoading<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">CountryState<\/span> <\/span>{}\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryLoaded<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">CountryState<\/span> <\/span>{\n final List&lt;CountryModel&gt; countries;\n CountryLoaded(<span class=\"hljs-keyword\">this<\/span>.countries);\n}\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryError<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">CountryState<\/span> <\/span>{\n final <span class=\"hljs-built_in\">String<\/span> message;\n CountryError(<span class=\"hljs-keyword\">this<\/span>.message);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This file defines different states used in the BLoC for country search.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CountryInitial is the default state when the app loads.<\/li>\n\n\n\n<li>CountryLoading is used while the API call is in progress.<\/li>\n\n\n\n<li>CountryLoaded holds a list of countries when data is successfully fetched.<\/li>\n\n\n\n<li>CountryError shows an error message when something goes wrong during the fetch.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 6: <code>country_bloc.dart<\/code> \u2013 Main BLoC Logic<\/strong><\/h3>\n\n\n\n<p>Please create a corresponding <code>country_bloc<\/code><strong> <\/strong>class<strong> <\/strong>under new directory the <em><code>lib-&gt;bloc<\/code><\/em> folder and add a dart file name as <code>country_bloc.dart<\/code> under the <em><code>bloc<\/code><\/em> folder. Add the below mentioned code block.<\/p>\n\n\n\n<p>As all setup done just need to move toward main logic that actual bloc.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'dart:async'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_bloc\/flutter_bloc.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_bloc_sample_app\/repository\/country_repository.dart'<\/span>;\n\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'country_event.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'country_state.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryBloc<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Bloc<\/span>&lt;<span class=\"hljs-title\">CountryEvent<\/span>, <span class=\"hljs-title\">CountryState<\/span>&gt; \n <span class=\"hljs-title\">final<\/span> <span class=\"hljs-title\">CountryRepository<\/span> <span class=\"hljs-title\">_repository<\/span><\/span>;\n Timer? _debounceTimer;\n\n CountryBloc({required CountryRepository repository})\n     : _repository = repository,\n       <span class=\"hljs-keyword\">super<\/span>(CountryInitial()) {\n   on&lt;SearchCountry&gt;(_onSearchCountry);\n }\n\n Future&lt;<span class=\"hljs-keyword\">void<\/span>&gt; _onSearchCountry(SearchCountry event, Emitter&lt;CountryState&gt; emit) <span class=\"hljs-keyword\">async<\/span> {\n   _debounceTimer?.cancel();\n\n   final completer = Completer();\n\n   _debounceTimer = Timer(<span class=\"hljs-keyword\">const<\/span> Duration(milliseconds: <span class=\"hljs-number\">500<\/span>), () <span class=\"hljs-keyword\">async<\/span> {\n     emit(CountryLoading());\n     <span class=\"hljs-keyword\">try<\/span> {\n       final countries = <span class=\"hljs-keyword\">await<\/span> _repository.searchCountry(event.name);\n       emit(CountryLoaded(countries));\n     } <span class=\"hljs-keyword\">catch<\/span> (e) {\n       emit(CountryError(e.toString()));\n     } <span class=\"hljs-keyword\">finally<\/span> {\n       completer.complete();\n     }\n   });\n\n   <span class=\"hljs-keyword\">await<\/span> completer.future;\n }\n\n @override\n Future&lt;<span class=\"hljs-keyword\">void<\/span>&gt; close() {\n   _debounceTimer?.cancel();\n   <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">super<\/span>.close();\n }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\"><strong>Imports:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>dart:async:<\/strong> For managing asynchronous tasks and debouncing via Timer.<\/li>\n\n\n\n<li><strong>flutter_bloc: <\/strong>To use the Bloc class from the BLoC library.<\/li>\n\n\n\n<li><strong>country_repository.dart<\/strong>: Handles actual API fetching logic (data separation).<\/li>\n\n\n\n<li><strong>country_event.dart &amp; country_state.dart:<\/strong> Defines input events and output states for the BLoC.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>&nbsp;Class Declaration<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryBloc<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">Bloc<\/span>&lt;<span class=\"hljs-title\">CountryEvent<\/span>, <span class=\"hljs-title\">CountryState<\/span>&gt; <\/span>{\n  <span class=\"hljs-keyword\">final<\/span> CountryRepository _repository;\n  Timer? _debounceTimer;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>CountryBloc<\/code> listens for CountryEvents and emits CountryStates.<\/li>\n\n\n\n<li>It uses a <code>CountryRepository<\/code> instance (_repository) to separate business logic from data access.<\/li>\n\n\n\n<li>A private <code>_debounceTimer<\/code> is used to debounce user input (avoid calling the API on every keystroke).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Constructor<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-22\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">CountryBloc({required CountryRepository repository})\n   : _repository = repository,\n     super(CountryInitial()) {\n on<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SearchCountry<\/span>&gt;<\/span>(_onSearchCountry);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-22\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Initializes with <code>CountryInitial <\/code>state.<\/li>\n\n\n\n<li>Registers <code>_onSearchCountry<\/code> as the handler for SearchCountry events.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Event Handling with Debounce Logic<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-23\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">Future&lt;<span class=\"hljs-keyword\">void<\/span>&gt; _onSearchCountry(SearchCountry event, Emitter&lt;CountryState&gt; emit) <span class=\"hljs-keyword\">async<\/span> {\n _debounceTimer?.cancel();\n\n\n final completer = Completer();\n\n\n _debounceTimer = Timer(<span class=\"hljs-keyword\">const<\/span> Duration(milliseconds: <span class=\"hljs-number\">500<\/span>), () <span class=\"hljs-keyword\">async<\/span> {\n   emit(CountryLoading());\n   <span class=\"hljs-keyword\">try<\/span> {\n     final countries = <span class=\"hljs-keyword\">await<\/span> _repository.searchCountry(event.name);\n     emit(CountryLoaded(countries));\n   } <span class=\"hljs-keyword\">catch<\/span> (e) {\n     emit(CountryError(e.toString()));\n   } <span class=\"hljs-keyword\">finally<\/span> {\n     completer.complete();\n   }\n });\n\n\n <span class=\"hljs-keyword\">await<\/span> completer.future;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-23\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Cancels previous timer (if any).<br><\/li>\n\n\n\n<li>Sets a new timer for 500ms (debounce).<br><\/li>\n\n\n\n<li>After 500ms, performs API search using the repository.<br><\/li>\n\n\n\n<li>Emits corresponding BLoC states:<br><\/li>\n\n\n\n<li><code>CountryLoading <\/code>\u2192 before API call<br><\/li>\n\n\n\n<li><code>CountryLoaded <\/code>\u2192 on success<br><\/li>\n\n\n\n<li><code>CountryError<\/code> \u2192 on failure<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Cleanup on Dispose<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-24\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-keyword\">@override<\/span>\nFuture&lt;void&gt; close() {\n _<span class=\"hljs-selector-tag\">debounceTimer<\/span>?<span class=\"hljs-selector-class\">.cancel<\/span>();\n <span class=\"hljs-selector-tag\">return<\/span> <span class=\"hljs-selector-tag\">super<\/span><span class=\"hljs-selector-class\">.close<\/span>();\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-24\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Cancels the timer when BLoC is disposed.<\/li>\n\n\n\n<li>Prevents memory leaks and dangling timers if a widget is removed or the app is closed.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 7: <code>country_repository.dart<\/code> \u2013&nbsp; Repository for API Logic<\/strong><\/h3>\n\n\n\n<p>Please create a corresponding <code>country_repository<\/code><strong> <\/strong>class<strong> <\/strong>under new directory the <em><code>lib-&gt;repository <\/code><\/em>folder and add a dart file name as <code>country_repository.dart<\/code> under the <em>repository<\/em> folder.<\/p>\n\n\n\n<p><strong>Imports<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-25\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'dart:convert'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:http\/http.dart'<\/span> <span class=\"hljs-keyword\">as<\/span> http;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'..\/model\/country_model.dart'<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-25\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>dart:convert<\/code><strong>:<\/strong> To decode the JSON response from the API.<\/li>\n\n\n\n<li><code>http<\/code><strong>:<\/strong> To make HTTP GET requests.<\/li>\n\n\n\n<li><code>country_model.dart<\/code><strong>: <\/strong>Contains the CountryModel class used to parse each country&#8217;s data.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Class Declaration<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-26\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">CountryRepository<\/span> <\/span>{\nfinal <span class=\"hljs-built_in\">String<\/span> baseUrl = <span class=\"hljs-string\">'https:\/\/restcountries.com\/v3.1'<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-26\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>CountryRepository<\/code>: Class responsible for fetching data.<\/li>\n\n\n\n<li><code>baseUrl<\/code>: Base endpoint of the REST Countries API.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>searchCountry Method<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-27\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">Future&lt;List&lt;CountryModel&gt;&gt; searchCountry(<span class=\"hljs-built_in\">String<\/span> name) <span class=\"hljs-keyword\">async<\/span> {<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-27\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>A Future function that returns a list of CountryModel objects.<\/li>\n\n\n\n<li>Takes name as input (the country name typed by the user).<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Validation Check<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-28\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">if<\/span> (name.trim().isEmpty) {\n <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">Exception<\/span>(<span class=\"hljs-string\">'Please enter a country name.'<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-28\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If the input is empty or only spaces, it throws an exception to notify the user.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Making the API Call<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-29\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">final response = await http.get(Uri.<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">em<\/span>&gt;<\/span>parse<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">em<\/span>&gt;<\/span>('$baseUrl\/name\/$name'));<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-29\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Makes a GET request to the endpoint:<br><code>https:\/\/restcountries.com\/v3.1\/name\/{name}<\/code><br><\/li>\n\n\n\n<li>Example: Searching for &#8220;India&#8221; hits<br><a href=\"https:\/\/restcountries.com\/v3.1\/name\/India\"><code>https:\/\/restcountries.com\/v3.1\/name\/India<\/code><\/a><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Handling the Response<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-30\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">if<\/span> (response.statusCode == <span class=\"hljs-number\">200<\/span>) {\n <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-keyword\">List<\/span>&lt;dynamic&gt; jsonData = json.decode(response.body);\n <span class=\"hljs-keyword\">return<\/span> jsonData.map((e) =&gt; CountryModel.fromJson(e)).toList();\n} <span class=\"hljs-keyword\">else<\/span> {\n <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">Exception<\/span>(<span class=\"hljs-string\">'No country found for \"$name\".'<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-30\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If status is 200 OK:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Decodes the response into a list of JSON objects.<\/li>\n\n\n\n<li>Maps each JSON object to a <code>CountryModel <\/code>instance using <code>fromJson<\/code>.<\/li>\n\n\n\n<li>Returns a list of <code>CountryModel<\/code> objects.<\/li>\n<\/ul>\n\n\n\n<p>If status is not 200:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Throws an exception saying the country was not found.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Error Handling<\/strong><\/h4>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-31\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">} <span class=\"hljs-keyword\">catch<\/span> (e) {\n   rethrow;\n }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-31\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If any unexpected error occurs (e.g., no internet, bad response), it rethrows the error to be handled by the BLoC.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 8: <code>country_model.dart<\/code> \u2013 Data Model<\/strong><\/h3>\n\n\n\n<p>Please create a corresponding API model class under a new directory in the <em><code>lib<\/code><\/em> folder and add a Dart file named c<code>ountry_model.dart<\/code> under the <code>Model<\/code> folder.<\/p>\n\n\n\n<p>Please refer to the git repository model class.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CountryModel: Root model class<\/li>\n\n\n\n<li>Nested models: Name, Flags, Currencies, etc.<\/li>\n\n\n\n<li>fromJson \/ toJson methods<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 9: <code>country_details_page.dart<\/code> \u2013 Country Detail Screen<\/strong><\/h3>\n\n\n\n<p>Please create a corresponding <code>country_details_page.dart<\/code> under new directory the <em><code>lib-&gt;screen<\/code><\/em> folder.<\/p>\n\n\n\n<p>This screen shows detailed information about a country when the user taps on a country from the list. The screen receives a <code>CountryModel<\/code> object (data of one country) from the previous screen. Shows the official country name as the title.Displays the country&#8217;s flag using the image URL (<code>flags.png<\/code>) from the API.Uses a custom method <code>getCommonWidget()<\/code> to display country info in two-column rows. Each row shows two labels and values like<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Official Name &amp; Common Name<\/li>\n\n\n\n<li>Capital &amp; Alternative Names<\/li>\n\n\n\n<li>Region &amp; Subregion<\/li>\n\n\n\n<li>And more&#8230;<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Key Concepts in the App :<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>BLoC:<\/strong> Business Logic Component \u2013 Manages state based on events<\/li>\n\n\n\n<li><strong>Event:<\/strong> Trigger from UI, like typing a country name<\/li>\n\n\n\n<li><strong>State:<\/strong> Represents UI changes like loading or error<\/li>\n\n\n\n<li><strong>Debounce:<\/strong> Prevents API calls on every keystroke<\/li>\n\n\n\n<li><strong>Model:<\/strong> Maps JSON to Dart class<\/li>\n\n\n\n<li><strong>BlocBuilder:<\/strong> Rebuilds the widget tree based on state<\/li>\n\n\n\n<li><strong>BlocProvider:<\/strong> Injects the BLoC into the widget tree<\/li>\n<\/ul>\n\n\n\n<p>App working like \u2192User types a country name \u2192 SearchCountry event \u2192BLoC captures event and fetches data from REST API \u2192Emits Loading state, then Loaded (or Error) \u2192UI displays country list \u2192 Tap shows details screen<\/p>\n\n\n\n<p>Please refer to the following screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"855\" height=\"385\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/bloc-country-info-result.png\" alt=\"Country info in two-column layout using BLoC\" class=\"wp-image-39365\" title=\"Final Output \u2013 Displaying Country Info with BLoC\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"385\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20385%22%3E%3C%2Fsvg%3E\" alt=\"Country info in two-column layout using BLoC\" class=\"wp-image-39365 lazyload\" title=\"Final Output \u2013 Displaying Country Info with BLoC\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/bloc-country-info-result.png\"><\/figure>\n\n\n\n<p>If you&#8217;re planning to build scalable apps using advanced patterns like BLoC, explore our <a href=\"https:\/\/mobisoftinfotech.com\/services\/flutter-consulting-development\">flutter development services<\/a> to see how structured architecture improves performance and maintainability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Summing It Up<\/strong><\/h2>\n\n\n\n<p>We hope you found this step-by-step Flutter state management tutorial helpful in understanding how to integrate BLoC for state management into your Flutter application.<\/p>\n\n\n\n<p>To download the full source code for the sample app,&nbsp; click <a href=\"https:\/\/github.com\/mobisoftinfotech\/flutter-state-management-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mobisoftinfotech.com\/contact-us?utm_source=blog_cta&amp;utm_campaign=flutter-state-management-bloc_blog\"><noscript><img decoding=\"async\" width=\"855\" height=\"363\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/cta-build-next-flutter.png\" alt=\"Build your next big idea with the right Flutter tech\" class=\"wp-image-39360\" title=\"Let\u2019s Build Your Next Big Idea with Flutter\"><\/noscript><img decoding=\"async\" width=\"855\" height=\"363\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20855%20363%22%3E%3C%2Fsvg%3E\" alt=\"Build your next big idea with the right Flutter tech\" class=\"wp-image-39360 lazyload\" title=\"Let\u2019s Build Your Next Big Idea with Flutter\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/cta-build-next-flutter.png\"><\/a><\/figure>\n\n\n<div class=\"modern-author-card\">\n    <div class=\"author-card-content\">\n        <div class=\"author-info-section\">\n            <div class=\"author-avatar\">\n                <noscript><img decoding=\"async\" src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/author-mahesh-dhoble.png\" alt=\"Mahesh Dhoble\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"Mahesh Dhoble\" data-src=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/author-mahesh-dhoble.png\" class=\" lazyload\">\n            <\/div>\n            <div class=\"author-details\">\n                <h3 class=\"author-name\">Mahesh Dhoble<\/h3>\n                <p class=\"author-title\">Software Engineer<\/p>\n                <a href=\"javascript:void(0);\" class=\"read-more-link read-more-btn\" onclick=\"toggleAuthorBio(this); return false;\">Read more <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"expand\" class=\"read-more-arrow down-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"expand\" class=\"read-more-arrow down-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <div class=\"author-bio-expanded\">\n                    <p>Mahesh Dhoble is a Software Engineer at <a href=\"https:\/\/mobisoftinfotech.com\">Mobisoft Infotech<\/a> with 8.6 years of experience in developing high-quality mobile applications. He specializes in Java, Kotlin, Flutter (Dart), and Swift, with strong expertise in both native and cross-platform mobile development. Mahesh is committed to writing clean, efficient code and is passionate about continuous learning, consistently exploring new tools, technologies, and frameworks to sharpen his skills and stay updated in the fast-evolving mobile development landscape.<\/p>\n                    <div class=\"author-social-links\"><div class=\"social-icon\"><a href=\"https:\/\/www.linkedin.com\/in\/mahesh-dhoble-97a587121\" target=\"_blank\" rel=\"nofollow noopener\"><i class=\"icon-sprite linkedin\"><\/i><\/a><\/div><\/div>\n                    <a href=\"javascript:void(0);\" class=\"read-more-link read-less-btn\" onclick=\"toggleAuthorBio(this); return false;\" style=\"display: none;\">Read less <noscript><img decoding=\"async\" src=\"\/assets\/images\/blog\/Vector.png\" alt=\"collapse\" class=\"read-more-arrow up-arrow\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"collapse\" class=\"read-more-arrow up-arrow lazyload\" data-src=\"\/assets\/images\/blog\/Vector.png\"><\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"share-section\">\n            <span class=\"share-label\">Share Article<\/span>\n            <div class=\"social-share-buttons\">\n                <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Fflutter-development%2Fflutter-state-management-bloc-tutorial\" target=\"_blank\" class=\"share-btn facebook-share\"><i class=\"fa fa-facebook-f\"><\/i><\/a>\n                <a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fmobisoftinfotech.com%2Fresources%2Fblog%2Fflutter-development%2Fflutter-state-management-bloc-tutorial\" target=\"_blank\" class=\"share-btn linkedin-share\"><i class=\"fa fa-linkedin\"><\/i><\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<style>\np.has-text-align-center {\n    text-align: center;\n}\n.post-content p{\n    margin: 20px 0 20px;\n}\n.border-to-img img {\n    border-radius: 20px;\n}\n.border-to-img{\nborder: 1px solid #babab9;\n    border-radius: 15px;\n}\n.hljs-keyword, .hljs-title {\n    font-weight: normal !important;\n}\n\nspan.hljs-attribute, .hljs-selector-tag {\n    font-weight: normal;\n}\nh5.wp-block-heading{\nfont-size:20px;\n}\nh4.wp-block-heading{\nfont-size:20px;\n}\nh3.wp-block-heading{\nfont-size:22px;\n}\nh4.wp-block-heading.h4-list {\n    position: relative;\nfont-size:20px;\n    padding-left: 20px;\n}\n\nh4.wp-block-heading.h4-list:before {\n    position: absolute;\n    content: '';\n    background: #0d265c;\n    height: 9px;\n    width: 9px;\n    left: 0;\n    border-radius: 50px;\n    top: 8px;\n}\n@media only screen and (max-width: 991px) {\nul.wp-block-list.step-9-ul {\n    margin-left: 0px;\n}\n.step-9-h4{padding-left:0px;}\n    .post-content li {\n       padding-left: 25px;\n    }\n    .post-content li:before {\n        content: '';\n         width: 9px;\n        height: 9px;\n        background-color: #0d265c;\n        border-radius: 50%;\n        position: absolute;\n        left: 0px;\n        top: 12px;\n    }\n}\n<\/style>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Article\",\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\"\n  },\n  \"headline\": \"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step)\",\n  \"description\": \"Learn Flutter state management with BLoC in this step-by-step tutorial. Master statemgmt in Flutter using BLoC for scalable, maintainable app architecture.\",\n  \"image\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/6\/flutter-state-management-bloc-tutorial\",\n  \"author\": {\n    \"@type\": \"Person\",\n    \"name\": \"Mahesh Dhoble \",\n    \"description\": \"Mahesh Dhoble is a Software Engineer at Mobisoft Infotech with 8.6 years of experience in developing high-quality mobile applications. He specializes in Java, Kotlin, Flutter (Dart), and Swift, with strong expertise in both native and cross-platform mobile development. Mahesh is committed to writing clean, efficient code and is passionate about continuous learning, consistently exploring new tools, technologies, and frameworks to sharpen his skills and stay updated in the fast-evolving mobile development landscape.\n \"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"Mobisoft Infotech\",\n    \"logo\": {\n      \"@type\": \"ImageObject\",\n      \"url\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/mshomepage\/MI_Logo-white.svg\",\n      \"width\": 600,\n      \"height\": 600\n    }\n  },\n  \"datePublished\": \"2025-06-10\",\n  \"dateModified\": \"2025-06-10\"\n}\n<\/script>\n<script type=\"application\/ld+json\">\n{\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"LocalBusiness\",\n    \"name\": \"Mobisoft Infotech\",\n    \"url\": \"https:\/\/mobisoftinfotech.com\",\n    \"logo\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/mshomepage\/MI_Logo-white.svg\",\n    \"description\": \"Mobisoft Infotech specializes in custom software development and digital solutions.\",\n    \"address\": {\n        \"@type\": \"PostalAddress\",\n        \"streetAddress\": \"5718 Westheimer Rd Suite 1000\",\n        \"addressLocality\": \"Houston\",\n        \"addressRegion\": \"TX\",\n        \"postalCode\": \"77057\",\n        \"addressCountry\": \"USA\"\n    },\n    \"contactPoint\": [{\n        \"@type\": \"ContactPoint\",\n        \"telephone\": \"+1-855-572-2777\",\n        \"contactType\": \"Customer Service\",\n        \"areaServed\": [\"USA\", \"Worldwide\"],\n        \"availableLanguage\": [\"English\"]\n    }],\n    \"sameAs\": [\n        \"https:\/\/www.facebook.com\/pages\/Mobisoft-Infotech\/131035500270720\",\n        \"https:\/\/x.com\/MobisoftInfo\",\n        \"https:\/\/www.linkedin.com\/company\/mobisoft-infotech\",\n        \"https:\/\/in.pinterest.com\/mobisoftinfotech\/\",\n        \"https:\/\/www.instagram.com\/mobisoftinfotech\/\",\n        \"https:\/\/github.com\/MobisoftInfotech\",\n        \"https:\/\/www.behance.net\/MobisoftInfotech\",\n        \"https:\/\/www.youtube.com\/@MobisoftinfotechHouston\"\n    ]\n}\n<\/script>\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"Organization\",\n  \"name\": \"Mobisoft Infotech\",\n  \"url\": \"https:\/\/mobisoftinfotech.com\/\",\n  \"logo\": \"https:\/\/mobisoftinfotech.com\/assets\/images\/MI_Logo.svg\",\n  \"sameAs\": [\n    \"https:\/\/www.facebook.com\/pages\/Mobisoft-Infotech\/131035500270720\",\n    \"https:\/\/twitter.com\/MobisoftInfo\",\n    \"https:\/\/www.instagram.com\/mobisoftinfotech\/\",\n    \"https:\/\/www.youtube.com\/@MobisoftinfotechHouston\",\n    \"https:\/\/www.linkedin.com\/company\/mobisoft-infotech\",\n    \"https:\/\/in.pinterest.com\/mobisoftinfotech\/\",\n    \"https:\/\/github.com\/MobisoftInfotech\"\n  ],\n  \"contactPoint\": [\n    {\n      \"@type\": \"ContactPoint\",\n      \"telephone\": \"+1-855-572-2777\",\n      \"contactType\": \"Customer Service\",\n      \"areaServed\": \"US\",\n      \"availableLanguage\": [\"English\"]\n    },\n    {\n      \"@type\": \"ContactPoint\",\n      \"telephone\": \"+91-858-600-8627\",\n      \"contactType\": \"Customer Service\",\n      \"areaServed\": \"IN\",\n      \"availableLanguage\": [\"English\"]\n    }\n  ]\n}\n<\/script>\n<script type=\"application\/ld+json\">\n    [\n    {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/cta-growth-flutter-app.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\",\n            \"name\": \"Drive 10x Growth with High-Performance Flutter Apps\",\n            \"caption\": \"Discover how Flutter and BLoC architecture can unlock massive scalability and performance for your product.\",\n            \"description\": \"This image acts as a growth-oriented call-to-action, aimed at CTOs and decision-makers seeking scalable mobile app solutions with Flutter.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/cta-growth-flutter-app.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/cta-build-next-flutter.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\",\n            \"name\": \"Let\u2019s Build Your Next Big Idea with Flutter\",\n            \"caption\": \"Partner with a tech team that understands scalable Flutter development using BLoC.\",\n            \"description\": \"A strategic CTA targeting CROs and product leads to collaborate on Flutter based apps using proven state management practices.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/cta-build-next-flutter.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\",\n            \"name\": \"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step)\",\n            \"caption\": \"Learn how BLoC helps manage state efficiently in Flutter apps through this visual tutorial banner.\",\n            \"description\": \"This hero image introduces the main topic - a deep dive into Flutter BLoC state management - aligning with technical SEO and audience interest.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/author-mahesh-dhoble.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\",\n            \"name\": \"About the Author \u2013 Mahesh Dhoble\",\n            \"caption\": \"Mahesh Dhoble shares hands-on insights into building scalable Flutter apps with BLoC.\",\n            \"description\": \"An author bio image to build credibility and show subject-matter expertise in Flutter BLoC architecture and implementation.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/author-mahesh-dhoble.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/bloc-architecture-diagram.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\",\n            \"name\": \"BLoC Architecture for Flutter State Management\",\n            \"caption\": \"Visualize the complete flow of BLoC state management in Flutter through this architecture diagram.\",\n            \"description\": \"This diagram illustrates the BLoC (Business Logic Component) pattern to help developers and architects visualize event-driven state management.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/bloc-architecture-diagram.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-bloc-folder-structure.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\",\n            \"name\": \"Best Practices: Folder Structure for BLoC in Flutter\",\n            \"caption\": \"Maintain clean code and scalable architecture with this standard folder structure for BLoC projects.\",\n            \"description\": \"A best-practices visual that supports clean architecture and organization for Flutter apps using BLoC pattern.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-bloc-folder-structure.png\"\n        },\n        {\n            \"@context\": \"https:\/\/schema.org\",\n            \"@type\": \"ImageObject\",\n            \"contentUrl\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/bloc-country-info-result.png\",\n            \"url\": \"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\",\n            \"name\": \"Final Output - Displaying Country Info with BLoC\",\n            \"caption\": \"See how BLoC effectively renders UI by displaying country information in a responsive grid.\",\n            \"description\": \"This UI result image demonstrates the outcome of implementing BLoC to render dynamic content like country data in a structured layout.\",\n            \"license\": \"https:\/\/mobisoftinfotech.com\/terms\",\n            \"acquireLicensePage\": \"https:\/\/mobisoftinfotech.com\/acquire-license\",\n            \"creditText\": \"Mobisoft Infotech\",\n            \"copyrightNotice\": \"Mobisoft Infotech\",\n            \"creator\": {\n                \"@type\": \"Organization\",\n                \"name\": \"Mobisoft Infotech\"\n            },\n            \"thumbnail\": \"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/bloc-country-info-result.png\"\n        }\n        ]\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>What is BLoC in Flutter? Flutter state management is a core concept for handling data and UI synchronization in apps. One of the most widely adopted patterns for state management in Flutter applications is BLoC (Business Logic Component). It separates business logic from UI, making your code clean, testable, and easy to maintain, even for [&hellip;]<\/p>\n","protected":false},"author":117,"featured_media":39356,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","footnotes":""},"categories":[4945],"tags":[],"class_list":["post-39329","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step) - Mobisoft Infotech<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step) - Mobisoft Infotech\" \/>\n<meta property=\"og:description\" content=\"What is BLoC in Flutter? Flutter state management is a core concept for handling data and UI synchronization in apps. One of the most widely adopted patterns for state management in Flutter applications is BLoC (Business Logic Component). It separates business logic from UI, making your code clean, testable, and easy to maintain, even for [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\" \/>\n<meta property=\"og:site_name\" content=\"Mobisoft Infotech\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-10T06:25:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T13:13:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/og-Flutter-State-Management-Tutorial.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mahesh Dhoble\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mahesh Dhoble\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#article\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\"},\"author\":{\"name\":\"Mahesh Dhoble\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/ccfea03bf74b755ebc7e3cf48c4b7673\"},\"headline\":\"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step)\",\"datePublished\":\"2025-06-10T06:25:44+00:00\",\"dateModified\":\"2026-03-11T13:13:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\"},\"wordCount\":2663,\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png\",\"articleSection\":[\"Flutter Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\",\"name\":\"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step) - Mobisoft Infotech\",\"isPartOf\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png\",\"datePublished\":\"2025-06-10T06:25:44+00:00\",\"dateModified\":\"2026-03-11T13:13:59+00:00\",\"author\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/ccfea03bf74b755ebc7e3cf48c4b7673\"},\"breadcrumb\":{\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#primaryimage\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png\",\"contentUrl\":\"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png\",\"width\":855,\"height\":392,\"caption\":\"Flutter BLoC state management tutorial step-by-step\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mobisoftinfotech.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#website\",\"url\":\"https:\/\/mobisoftinfotech.com\/resources\/\",\"name\":\"Mobisoft Infotech\",\"description\":\"Discover Mobility\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/ccfea03bf74b755ebc7e3cf48c4b7673\",\"name\":\"Mahesh Dhoble\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/16c808a5d26db474a83a9261f7ebcdf441f3afb1c09b346f60cfce1c33e5da5d?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/16c808a5d26db474a83a9261f7ebcdf441f3afb1c09b346f60cfce1c33e5da5d?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/16c808a5d26db474a83a9261f7ebcdf441f3afb1c09b346f60cfce1c33e5da5d?s=96&r=g\",\"caption\":\"Mahesh Dhoble\"},\"sameAs\":[\"https:\/\/mobisoftinfotech.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step) - Mobisoft Infotech","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial","og_locale":"en_US","og_type":"article","og_title":"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step) - Mobisoft Infotech","og_description":"What is BLoC in Flutter? Flutter state management is a core concept for handling data and UI synchronization in apps. One of the most widely adopted patterns for state management in Flutter applications is BLoC (Business Logic Component). It separates business logic from UI, making your code clean, testable, and easy to maintain, even for [&hellip;]","og_url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial","og_site_name":"Mobisoft Infotech","article_published_time":"2025-06-10T06:25:44+00:00","article_modified_time":"2026-03-11T13:13:59+00:00","og_image":[{"width":1000,"height":525,"url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/og-Flutter-State-Management-Tutorial.png","type":"image\/png"}],"author":"Mahesh Dhoble","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mahesh Dhoble","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#article","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial"},"author":{"name":"Mahesh Dhoble","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/ccfea03bf74b755ebc7e3cf48c4b7673"},"headline":"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step)","datePublished":"2025-06-10T06:25:44+00:00","dateModified":"2026-03-11T13:13:59+00:00","mainEntityOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial"},"wordCount":2663,"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png","articleSection":["Flutter Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial","url":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial","name":"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step) - Mobisoft Infotech","isPartOf":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#primaryimage"},"image":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#primaryimage"},"thumbnailUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png","datePublished":"2025-06-10T06:25:44+00:00","dateModified":"2026-03-11T13:13:59+00:00","author":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/ccfea03bf74b755ebc7e3cf48c4b7673"},"breadcrumb":{"@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#primaryimage","url":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png","contentUrl":"https:\/\/mobisoftinfotech.com\/resources\/wp-content\/uploads\/2025\/06\/flutter-state-management-bloc-tutorial.png","width":855,"height":392,"caption":"Flutter BLoC state management tutorial step-by-step"},{"@type":"BreadcrumbList","@id":"https:\/\/mobisoftinfotech.com\/resources\/blog\/flutter-development\/flutter-state-management-bloc-tutorial#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mobisoftinfotech.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Flutter State Management Tutorial: How to Use BLoC for State Management in Flutter (Step-by-Step)"}]},{"@type":"WebSite","@id":"https:\/\/mobisoftinfotech.com\/resources\/#website","url":"https:\/\/mobisoftinfotech.com\/resources\/","name":"Mobisoft Infotech","description":"Discover Mobility","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mobisoftinfotech.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mobisoftinfotech.com\/resources\/#\/schema\/person\/ccfea03bf74b755ebc7e3cf48c4b7673","name":"Mahesh Dhoble","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/16c808a5d26db474a83a9261f7ebcdf441f3afb1c09b346f60cfce1c33e5da5d?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/16c808a5d26db474a83a9261f7ebcdf441f3afb1c09b346f60cfce1c33e5da5d?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/16c808a5d26db474a83a9261f7ebcdf441f3afb1c09b346f60cfce1c33e5da5d?s=96&r=g","caption":"Mahesh Dhoble"},"sameAs":["https:\/\/mobisoftinfotech.com\/"]}]}},"_links":{"self":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/39329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/comments?post=39329"}],"version-history":[{"count":35,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/39329\/revisions"}],"predecessor-version":[{"id":47587,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/posts\/39329\/revisions\/47587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media\/39356"}],"wp:attachment":[{"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/media?parent=39329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/categories?post=39329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobisoftinfotech.com\/resources\/wp-json\/wp\/v2\/tags?post=39329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}