{"id":44700,"date":"2023-08-30T07:52:01","date_gmt":"2023-08-30T05:52:01","guid":{"rendered":"https:\/\/www.inovex.de\/?p=44700"},"modified":"2023-08-30T08:42:56","modified_gmt":"2023-08-30T06:42:56","slug":"flutter-state-management","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/","title":{"rendered":"Flutter: Implementing Agnostic State Management to Build Scalable Apps"},"content":{"rendered":"<p>Whether you are a beginner or an experienced Flutter Developer, while your app evolves there will be the moment when you have to think about Flutter state management. You may manage to delay this decision to the moment when a feature forces you to manage the app state. But what to do now? It is always good to have a quick look into the <a href=\"https:\/\/docs.flutter.dev\/development\/data-and-backend\/state-mgmt\/options\" target=\"_blank\" rel=\"noopener\">official Flutter documentation<\/a> for a recommendation from the Flutter Development Team. The recommendation will confront you with a various number of state management options.\u00a0<!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#Common-use-cases\" >Common use cases<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#Popular-Flutter-state-management-packages\" >Popular Flutter state management packages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#Problems-with-Flutter-state-management-packages\" >Problems with\u00a0Flutter state management packages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#Flutter-agnostic-state-management\" >Flutter agnostic state management<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#Convention\" >Convention<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#Entities\" >Entities<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#Initializerdart\" >Initializer.dart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#StoreListenerdart\" >StoreListener.dart<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#Recap\" >Recap<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Common-use-cases\"><\/span>Common use cases<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Most likely you need to consider use cases like persisting the state for a use session (see image: the common app). For example: If a webshop shopping cart is filled you may want to <strong>preserve<\/strong>, <strong>change<\/strong> and <strong>show<\/strong> the content of the shopping cart on multiple widgets. To do so, the Flutter app needs to have an entity that is able to manage the shopping cart state. We will discuss entities at a later stage in this article.<\/p>\n<figure id=\"attachment_44830\" aria-describedby=\"caption-attachment-44830\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-44830\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-popular-1024x576.png\" alt=\"Diagramm of a common app with relationship cross points\" width=\"1000\" height=\"562\" \/><figcaption id=\"caption-attachment-44830\" class=\"wp-caption-text\">The common app<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"Popular-Flutter-state-management-packages\"><\/span>Popular Flutter state management packages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>MobX, Redux, BloC, or Riverpod just to name a few (see image:\u00a0the common app) Flutter state management packages. Additionally, there is the option to use Stateful Widgets to handle your widget state locally. All of the above-named packages have their pros and cons, depending on the Flutter app requirements. For example, if you find yourself in an environment where you have to manage multiple connected use cases across your application. In this case, Redux or BloC might NOT be much of a help, even though the <a href=\"https:\/\/github.com\/reduxjs\/redux-devtools\" target=\"_blank\" rel=\"noopener\">Redux DevTools<\/a> are quite helpful.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Problems-with-Flutter-state-management-packages\"><\/span>Problems with\u00a0Flutter state management packages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Modern Flutter State Management offers simple functionality to handle your defined state. Namely, you should be able to create variables to persist- and functions to change the defined state. Common public packages differ mainly in naming conventions or the scope of the state. In <a href=\"https:\/\/riverpod.dev\/de\/\" target=\"_blank\" rel=\"noopener\">Riverpod<\/a>, you are able to cut down your state in individual state variables and the sum of all states considered as the Flutter app state (see image: sum of states).<\/p>\n<figure style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-appState-300x82.png\" alt=\"formula of the sum of states\" width=\"300\" height=\"82\" \/><figcaption class=\"wp-caption-text\">sum of states<\/figcaption><\/figure>\n<p>It becomes a challenge to choose the most suitable Flutter state management mechanism which is the best fit for the requirement of an app. Furthermore, the urge of developers to follow old patterns could create additional issues. The phrase \u201cWe have always done it this way!\u201c, is a developer trapp like the <strong>law of instrument<\/strong> stated by A. Maslow:<\/p>\n<blockquote>\n<p style=\"text-align: center;\"><strong><i>&#8222;If the only tool you have is a hammer, it is tempting to treat everything as if it were a nail.&#8220;\u00a0<\/i><\/strong><\/p>\n<p style=\"text-align: right;\"><i>1966\u00a0Maslow&#8217;s hammer <\/i><i>by Abraham Maslow\u00a0<\/i><\/p>\n<\/blockquote>\n<p>Following this approach leads to a loss of freedom and could slow you down significantly while new features are added to your app.<\/p>\n<p>As previously mentioned the question remains, \u201cWhich Flutter state management to choose?\u201c. Obviously, there is no straightforward answer, but a recommendation. If the structure of the app remains adjustable without major refactoring, then you are in a good position to change your Flutter state management package. Of course, sooner or later your app becomes more complex and changes in state management may become more difficult.<\/p>\n<p>In the following, you will see a more agnostic approach to Flutter state management. With this approach, you are able to change the state management package with minor effort.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Flutter-agnostic-state-management\"><\/span>Flutter agnostic state management<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In order to be state management package agnostic, two things have to be defined. First is the convention for how and where we manage the state. This simple convention keeps the Flutter app clean and the structure can easily be discussed amongst all developers. Secondly are independent entities to wrap the selected function of a Flutter state management package. You may think: \u201cOh no, another wrapper class to implement, test and manage\u201c and you are correct. Doing this will lead to some boilerplate code. But this boilerplate, as any, has one benefit. It is yours, and you are in control of exposing only the things you need.\u00a0Below are code snippets showing an example based on the integration of hive as a state management solution, therefore <strong>Store<\/strong>, <strong>AppState,<\/strong> and <strong>Box<\/strong> are model classes. The model classes are either required from hive or used as a custom state wrapper.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Convention\"><\/span>Convention<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure id=\"attachment_44834\" aria-describedby=\"caption-attachment-44834\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-44834 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-use-case-1024x479.png\" alt=\"a prototypical smartphone screen with two widgets on it\" width=\"640\" height=\"299\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-use-case-1024x479.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-use-case-300x140.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-use-case-768x359.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-use-case-1536x719.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-use-case-400x187.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-use-case-360x168.png 360w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-use-case.png 1876w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-44834\" class=\"wp-caption-text\">use case convention<\/figcaption><\/figure>\n<p>If you are familiar with the <a href=\"https:\/\/www.heise.de\/blog\/Was-ist-Domain-Driven-Design-DDD-4983527.html\" target=\"_blank\" rel=\"noopener\">Domain Driven Design from Eric Evans<\/a>, where we structure our software close to the stakeholder domain. We try to transform the domain into use cases and connect the Flutter app state to multiple use cases. What that means, create a directory for your use case and subdirectories for sub-use cases. Where every UI element of the use case is allowed to use an entity that is directly connected to its managed state (see image: use case convention). Furthermore, the encapsulated state is never used directly from a Ui-Widget, but only from an entity that wraps the connection between UI and store. A detailed description of the store follows later in this article.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Entities\"><\/span>Entities<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>An agnostic state management approach has to provide a minimum of three entities to wrap the\u00a0<strong>initialization<\/strong>\u00a0of a state, the possibility to <strong>change<\/strong> the state, and a <strong>connection<\/strong> to the UI-related widgets (see images: discover\u00a0entities).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44836\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-1024x196.png\" alt=\"graphic of Flutter state management: initialization, change and connect\" width=\"1000\" height=\"191\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-1024x196.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-300x57.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-768x147.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-1536x293.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-2048x391.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-1920x367.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-400x76.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-360x69.png 360w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Entities are collections of functions wrapped in Dart classes, which are injected or imported into your Flutter app.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44840\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-connect-1024x126.png\" alt=\"code connect: wire state to UI\" width=\"1000\" height=\"123\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-connect-1024x126.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-connect-300x37.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-connect-768x95.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-connect-1536x189.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-connect-2048x252.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-connect-1920x237.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-connect-400x49.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-connect-360x44.png 360w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<figure id=\"attachment_44838\" aria-describedby=\"caption-attachment-44838\" style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-44838\" style=\"caret-color: #505d6d; color: #505d6d;\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-init-1024x217.png\" alt=\"code of initialization and change\" width=\"1000\" height=\"212\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-init-1024x217.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-init-300x63.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-init-768x162.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-init-1536x325.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-init-2048x433.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-init-1920x406.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-init-400x85.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/Flutter-agnostic-st-mgt-init-360x76.png 360w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption id=\"caption-attachment-44838\" class=\"wp-caption-text\">discovery entities<\/figcaption><\/figure>\n<h3><span class=\"ez-toc-section\" id=\"Initializerdart\"><\/span>Initializer.dart<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The simplest implementation for an entity that cares about the initialization of a state is a wrapper around Flutter\u2019s <strong>FutureBuilder<\/strong>.\u00a0The clue is the minimal exposure of a future that returns the app with an initialized store (see\u00a0code: Initializer). At this point, the terminology is quite important. A store initializes a Flutter app state and a store provides a function that changes the state.<\/p>\n<div>\n<pre>runApp(\r\n    Initializer(\r\n        app: const MyApp(),\r\n        initialize: Store('package.test.com').init(),\r\n    ),\r\n);<\/pre>\n<\/div>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\">code: Initializer<\/span><\/p>\n<p>The described store is exposed as a global <strong>immutable<\/strong> getter, like the <a href=\"https:\/\/pub.dev\/packages\/mobx\" target=\"_blank\" rel=\"noopener\">MobX<\/a> or <a href=\"https:\/\/riverpod.dev\/de\/\" target=\"_blank\" rel=\"noopener\">Riverpod<\/a> package. On the other side, the store needs to be connected to the Ui. Doing this is wrapped within a designated StoreListender.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"StoreListenerdart\"><\/span>StoreListener.dart<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The connection between Ui and <strong>Store<\/strong> could be achieved by implementing a <strong>ValueListener<\/strong>. This typed listener uses the core flutter implementation without extra packages (see\u00a0code: StoreListener).<\/p>\n<div>\n<pre>class StoreListener extends StatelessWidget {\r\n\r\nconst StoreListener({required this.builder});\r\n\r\n    @override\r\n    Widget build(BuildContext context) {\r\n\r\n        \/\/ @store as a global immutable getter which hold a instance of [AppState]\r\n\r\n        return ValueListenableBuilder(\r\n                   valueListenable: store.listenable(),\r\n                   builder: (context, __, _) {\r\n                       return builder(context, store);\r\n                   },\r\n        );\r\n    }\r\n}<\/pre>\n<\/div>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\">code: StoreListener<\/span><\/p>\n<p>As recommended by the convention from above the StoreListener should be wired to the use case level widget (see\u00a0code: Use Case Widget). Remaining is an abstraction between widget and store, which corresponds to a use case-driven repository. Since this article concentrates only on the top-level Flutter state management, we will not go deeper into all required wrappers.<\/p>\n<div>\n<pre>@override\r\nWidget build(BuildContext context) {\r\n  return StoreListener(\r\n    builder: (context, store) {\r\n      return Scaffold(\r\n        body: Center(\r\n          child: Text(store.state.value),\r\n        ),\r\n        floatingActionButton: FloatingActionButton(\r\n          child: constIcon(Icons.home),\r\n          onPressed: () {\r\n            final newAppState = AppState();\r\n            newAppState.value = 'new value';\r\n            store.update(newAppState);\r\n          },\r\n        ),\r\n      );\r\n    },\r\n  );\r\n}<\/pre>\n<\/div>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\">code: Use Case Widget<\/span><\/p>\n<p>The entities Initializer, Store, and StoreListener, are the wrapper to achieve agnostic state management. The benefit is a well-structured and maintainable code. You are able to switch between Flutter state management packages which use a consolidated state. For simplicity, the new app state is created within the widget, but this should be not the common practice. The following example shows the integration of <a href=\"https:\/\/pub.dev\/packages\/hive\" target=\"_blank\" rel=\"noopener\">hive as state management<\/a> and the basic interface which has been described in this article (see code: Store).<\/p>\n<div>\n<pre>class Store {\r\n\r\n  final String stateId;\r\n\r\n  Store({required this.stateId});\r\n\r\n  late Box _state;\r\n  \r\n  Box get box {\r\n    return _state;\r\n  }\r\n\r\n  AppState get state {\r\n    return _state.get(stateId) ?? AppState();\r\n  }\r\n\r\n  Future init() async {\r\n    _state = await _createState();\r\n  }\r\n\r\n  Future _createState() async {\r\n    ... await ...  \/\/ init hive and create box\r\n    return Box()\r\n  }\r\n\r\n  void update(AppState newState) {\r\n    if (newState.hasNoChanges(state)) return;\r\n    _state.put(stateId, newState);\r\n  }\r\n\r\n  void clear() {\r\n    _state.clear();\r\n  }\r\n}<\/pre>\n<\/div>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\">code: Store \u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Recap\"><\/span>Recap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Flutter has become one of the most convenient frameworks for cross-platform development. Following the\u00a0described approach, a Flutter app is more independent in regard to state management and therefore more flexible.\u00a0This article should be a source of inspiration for other developers to question their architecture decisions.<\/p>\n<p>Follow up:<\/p>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/www.inovex.de\/de\/leistungen\/apps\/cross-platform-entwicklung-mit-flutter\/\">inovex &amp; cross-platform development\u00a0<\/a><\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-beginning-of-a-new-era-part-1\/\">inovex &amp; flutter development<\/a><\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/www.inovex.de\/de\/blog\/building-a-contextual-assistant-with-rasa-and-flutter\/\">flutter app with rasa chatbot<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Whether you are a beginner or an experienced Flutter Developer, while your app evolves there will be the moment when you have to think about Flutter state management. You may manage to delay this decision to the moment when a feature forces you to manage the app state. But what to do now? It is [&hellip;]<\/p>\n","protected":false},"author":97,"featured_media":47295,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[372,510,376,378,353],"service":[420,925],"coauthors":[],"class_list":["post-44700","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-app","tag-apps-2","tag-cross-platform","tag-flutter","tag-mobile","service-apps","service-software-craftsmanship"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flutter: Implementing Agnostic State Management to Build Scalable Apps - Apps by inovex GmbH<\/title>\n<meta name=\"description\" content=\"This article describes the implementation of a agnostic Flutter State Management wrapper in order to build scalable production apps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter: Implementing Agnostic State Management to Build Scalable Apps - Apps by inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"This article describes the implementation of a agnostic Flutter State Management wrapper in order to build scalable production apps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-30T05:52:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-30T06:42:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tino Kallinich-Friedrich\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@mx_tino\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tino Kallinich-Friedrich\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/\"},\"author\":{\"name\":\"Tino Kallinich-Friedrich\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/fcabd1e46229e68364e666b6732ff86f\"},\"headline\":\"Flutter: Implementing Agnostic State Management to Build Scalable Apps\",\"datePublished\":\"2023-08-30T05:52:01+00:00\",\"dateModified\":\"2023-08-30T06:42:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/\"},\"wordCount\":1269,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png\",\"keywords\":[\"App\",\"Apps\",\"Cross-Platform\",\"Flutter\",\"Mobile\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/\",\"url\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/\",\"name\":\"Flutter: Implementing Agnostic State Management to Build Scalable Apps - Apps by inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png\",\"datePublished\":\"2023-08-30T05:52:01+00:00\",\"dateModified\":\"2023-08-30T06:42:56+00:00\",\"description\":\"This article describes the implementation of a agnostic Flutter State Management wrapper in order to build scalable production apps.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#primaryimage\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png\",\"width\":1920,\"height\":1080,\"caption\":\"A Smartphone with chat bubbles containing the Flutter Logo and the text \\\"agnostic state management\\\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inovex.de\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter: Implementing Agnostic State Management to Build Scalable Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inovex.de\/de\/#website\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inovex.de\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inovexde\",\"https:\/\/x.com\/inovexgmbh\",\"https:\/\/www.instagram.com\/inovexlife\/\",\"https:\/\/www.linkedin.com\/company\/inovex\",\"https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/fcabd1e46229e68364e666b6732ff86f\",\"name\":\"Tino Kallinich-Friedrich\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/163197d5916185dd18c854751cbd8b08\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/cropped-profil-small-96x96.jpg\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/cropped-profil-small-96x96.jpg\",\"caption\":\"Tino Kallinich-Friedrich\"},\"description\":\"B.Sc. Informatik and B.Sc. Nautik\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/tino-k-friedrich\/\",\"https:\/\/x.com\/mx_tino\"],\"url\":\"https:\/\/www.inovex.de\/de\/blog\/author\/tkallinich-2-2-2-2-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter: Implementing Agnostic State Management to Build Scalable Apps - Apps by inovex GmbH","description":"This article describes the implementation of a agnostic Flutter State Management wrapper in order to build scalable production apps.","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:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/","og_locale":"de_DE","og_type":"article","og_title":"Flutter: Implementing Agnostic State Management to Build Scalable Apps - Apps by inovex GmbH","og_description":"This article describes the implementation of a agnostic Flutter State Management wrapper in order to build scalable production apps.","og_url":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2023-08-30T05:52:01+00:00","article_modified_time":"2023-08-30T06:42:56+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png","type":"image\/png"}],"author":"Tino Kallinich-Friedrich","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management-1024x576.png","twitter_creator":"@mx_tino","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Tino Kallinich-Friedrich","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/"},"author":{"name":"Tino Kallinich-Friedrich","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/fcabd1e46229e68364e666b6732ff86f"},"headline":"Flutter: Implementing Agnostic State Management to Build Scalable Apps","datePublished":"2023-08-30T05:52:01+00:00","dateModified":"2023-08-30T06:42:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/"},"wordCount":1269,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png","keywords":["App","Apps","Cross-Platform","Flutter","Mobile"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/","url":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/","name":"Flutter: Implementing Agnostic State Management to Build Scalable Apps - Apps by inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png","datePublished":"2023-08-30T05:52:01+00:00","dateModified":"2023-08-30T06:42:56+00:00","description":"This article describes the implementation of a agnostic Flutter State Management wrapper in order to build scalable production apps.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/flutter-agnostic-state-management.png","width":1920,"height":1080,"caption":"A Smartphone with chat bubbles containing the Flutter Logo and the text \"agnostic state management\""},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-state-management\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Flutter: Implementing Agnostic State Management to Build Scalable Apps"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/fcabd1e46229e68364e666b6732ff86f","name":"Tino Kallinich-Friedrich","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/163197d5916185dd18c854751cbd8b08","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/cropped-profil-small-96x96.jpg","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/cropped-profil-small-96x96.jpg","caption":"Tino Kallinich-Friedrich"},"description":"B.Sc. Informatik and B.Sc. Nautik","sameAs":["https:\/\/www.linkedin.com\/in\/tino-k-friedrich\/","https:\/\/x.com\/mx_tino"],"url":"https:\/\/www.inovex.de\/de\/blog\/author\/tkallinich-2-2-2-2-2\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/44700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/97"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=44700"}],"version-history":[{"count":6,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/44700\/revisions"}],"predecessor-version":[{"id":50799,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/44700\/revisions\/50799"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/47295"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=44700"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=44700"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=44700"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=44700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}