{"id":1097,"date":"2025-05-15T13:40:38","date_gmt":"2025-05-15T13:40:38","guid":{"rendered":"https:\/\/www.cmarix.com\/qanda\/?p=1097"},"modified":"2026-02-05T12:06:25","modified_gmt":"2026-02-05T12:06:25","slug":"flutter-state-management-guide-with-provider-and-bloc","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/qanda\/flutter-state-management-guide-with-provider-and-bloc\/","title":{"rendered":"How to Manage State in Flutter Using Provider, Riverpod, or Bloc?"},"content":{"rendered":"\n<p>State management is an integral aspect to handle for building responsive UI in Flutter. It is important to be careful about the state management approach you choose, as it directly affects the scalability, maintainability and performance of your app. Here&#8217;s a comparison and guide on using the three most popular options:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Provider \u2013 Simple &amp; Officially Recommended<\/h3>\n\n\n\n<p>Provider is easy to learn and integrates well with the Flutter framework.<\/p>\n\n\n\n<p><strong>Example: Counter with ChangeNotifier<\/strong><\/p>\n\n\n\n<p>Dart:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Counter extends ChangeNotifier {\n  int value = 0;\n  void increment() {\n    value++;\n    notifyListeners();\n  }\n}\n\nvoid main() {\n  runApp(ChangeNotifierProvider(create: (_) => Counter(), child: MyApp()));\n}\n\nConsumer&lt;Counter>(\n  builder: (context, counter, _) => Text('${counter.value}'),\n);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. Riverpod \u2013 Robust, Testable, No Context Needed<\/h3>\n\n\n\n<p>Riverpod is a complete rewrite of Provider with better modularity and compile-time safety.<\/p>\n\n\n\n<p><strong>Example: Counter with StateNotifierProvider<\/strong><\/p>\n\n\n\n<p>Dart:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>final counterProvider = StateNotifierProvider&lt;Counter, int>((ref) => Counter());\nclass Counter extends StateNotifier&lt;int> {\n  Counter() : super(0);\n  void increment() => state++;\n}\nfinal count = ref.watch(counterProvider);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Bloc \u2013 Scalable &amp; Enterprise-Ready<\/h3>\n\n\n\n<p>Bloc is a predictable, event-driven architecture inspired by Redux.<\/p>\n\n\n\n<p><strong>Example: CounterBloc<\/strong><\/p>\n\n\n\n<p>Dart:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>abstract class CounterEvent {}\nclass Increment extends CounterEvent {}\nclass CounterBloc extends Bloc&lt;CounterEvent, int> {\n  CounterBloc() : super(0) {\n    on&lt;Increment>((event, emit) => emit(state + 1));\n  }\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Feature<\/strong><\/td><td><strong>Provider<\/strong><\/td><td><strong>Riverpod<\/strong><\/td><td><strong>Bloc<\/strong><\/td><\/tr><tr><td><strong>Ease<\/strong><\/td><td>\u2b50\u2b50\u2b50\u2b50<\/td><td>\u2b50\u2b50\u2b50<\/td><td>\u2b50\u2b50<\/td><\/tr><tr><td><strong>Scalability<\/strong><\/td><td>\u2b50\u2b50<\/td><td>\u2b50\u2b50\u2b50\u2b50<\/td><td>\u2b50\u2b50\u2b50\u2b50\u2b50<\/td><\/tr><tr><td><strong>Boilerplate&nbsp;<\/strong><\/td><td>Low<\/td><td>Medium<\/td><td>High<\/td><\/tr><tr><td><strong>Async\/Stream<\/strong><\/td><td>Basic<\/td><td>Strong support<\/td><td>Build-in<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>State management is an integral aspect to handle for building responsive UI in Flutter. It is important to be careful about the state management approach you choose, as it directly affects the scalability, maintainability and performance of your app. Here&#8217;s a comparison and guide on using the three most popular options: 1. Provider \u2013 Simple [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1099,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11,1],"tags":[],"class_list":["post-1097","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter","category-mobile"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=1097"}],"version-history":[{"count":3,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1097\/revisions"}],"predecessor-version":[{"id":1102,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1097\/revisions\/1102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/1099"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=1097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=1097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=1097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}