{"id":14701,"date":"2019-02-06T12:55:59","date_gmt":"2019-02-06T11:55:59","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=14701"},"modified":"2026-03-17T07:59:32","modified_gmt":"2026-03-17T06:59:32","slug":"flutter-new-concepts-part-2","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/","title":{"rendered":"Flutter: New Concepts? (Part 2)"},"content":{"rendered":"<p>Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the navigation between screens or saving simple key-value pairs. In this article I will show three of the most common concepts every developer should know.<!--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-new-concepts-part-2\/#Before-We-Are-Getting-Started\" >Before We Are Getting Started<\/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-new-concepts-part-2\/#RIP-Three-Basic-Concepts-for-Flutter\" >RIP: Three Basic Concepts for Flutter<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#Responsiveness\" >Responsiveness<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#In-App-Routing\" >In-App Routing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#Persistence\" >Persistence<\/a><\/li><\/ul><\/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-new-concepts-part-2\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#All-Articles-in-this-Series\" >All Articles in this Series<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#Read-on\" >Read on<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Before-We-Are-Getting-Started\"><\/span>Before We Are Getting Started<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Since Flutter is a cross-platform solution to build mobile applications, it inherits some of\u00a0the platforms&#8216; individual concepts. For example, Android provides access to the <a href=\"https:\/\/developer.android.com\/reference\/android\/content\/SharedPreferences\"><em>SharedPreferences API<\/em><\/a>, and iOS uses <a href=\"https:\/\/developer.apple.com\/documentation\/foundation\/userdefaults\"><em>UserDefaults API<\/em><\/a>. Both\u00a0provide an interface to the system memory.<\/p>\n<p>Flutter&#8217;s basic concept is based on plugins, which we can use to access functionality on both platforms.\u00a0Plugins extend the core features of the provided Flutter framework in the form of basic packages or third party libraries.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"RIP-Three-Basic-Concepts-for-Flutter\"><\/span>RIP: Three Basic Concepts for Flutter<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It is fundamental to know a minimum of basic concepts in every framework. In this article I call this abstract concept RIP. RIP is not an official definition but it will help you remember as soon as a new framework pops up. It excludes <a href=\"https:\/\/de.wikipedia.org\/wiki\/Representational_State_Transfer\">REST<\/a> API calls and any other external interaction, as those features are usually included by third party packages (<a href=\"https:\/\/flutter.io\/docs\/cookbook\/networking\/fetch-data\">http<\/a> or <a href=\"https:\/\/jsoup.org\">jsoup<\/a>).<\/p>\n<p>RIP stands for<\/p>\n<ul>\n<li><strong>R<\/strong>esponsiveness<\/li>\n<li><strong>I<\/strong>n app routing<\/li>\n<li><strong>P<\/strong>ersistence<\/li>\n<\/ul>\n<p>It covers the three most common tasks which have to be handled in any application. With more time and experience we will discover other strategies or designs to build the same functionality.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Responsiveness\"><\/span>Responsiveness<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A responsive <a href=\"https:\/\/en.wikipedia.org\/wiki\/User_interface\">UI<\/a> is a minimum requirement and needs to be handled with great care. It demands a clear vision of what the app should look like and more importantly, how the app should behave (<a href=\"https:\/\/flutter.io\/docs\/development\/data-and-backend\/state-mgmt\">state management<\/a>).<\/p>\n<figure id=\"attachment_14713\" aria-describedby=\"caption-attachment-14713\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14713 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-responive-basic-1024x655.png\" alt=\"Flutter responsive application\" width=\"1024\" height=\"655\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-responive-basic-1024x655.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-responive-basic-300x192.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-responive-basic-768x491.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-responive-basic-1536x982.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-responive-basic-2048x1309.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-responive-basic-1920x1228.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-responive-basic-400x256.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-responive-basic-360x230.png 360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-14713\" class=\"wp-caption-text\">Responsive mobile application<\/figcaption><\/figure>\n<p>In Flutter we have various options to build a responsive UI, as explained in the <a href=\"https:\/\/github.com\/flutter\/flutter\/wiki\/Creating-Responsive-Apps\"><em>Flutter GitHub repository<\/em><\/a> from Ian Hickson: Either with the implementation of a <em>LayoutBuilder<\/em> or the MediaQuery. In this article we will concentrate on the MediaQuery to create a responsive test widget.<\/p>\n<p><strong>Initial application setup<\/strong><\/p>\n<pre class=\"font-size:14 line-height:20 lang:java decode:true\" title=\"TestWidget - TestWidgetState\">import 'package:flutter\/material.dart';\r\n\r\nimport 'package:flutter\/widgets.dart';\r\n\r\n\/\/ create test widget with associated state\r\n\r\nclass TestWidget extends StatefulWidget {\r\n\r\n    @override\r\n\r\n    State &lt;StatefulWidget&gt; createState() {\r\n\r\n        return TestState();\r\n\r\n    }\r\n\r\n}\r\n\r\n\/\/ associated state to widget\r\n\r\nclass TestState extends State &lt; TestWidget &gt; {\r\n\r\n    \/\/ todo: add width and height later here\r\n\r\n    @override\r\n\r\n    Widget build(BuildContext context){\r\n\r\n        \/\/ add MediaQuery.of(...)\r\n\r\n        \/\/ return any widget with fixed dimensions\r\n\r\n        return Container(\r\n\r\n                 height: 400px,\r\n\r\n                 width: 200px\r\n\r\n        );\r\n\r\n    }\r\n\r\n}<\/pre>\n<p>The <em>TestWidget<\/em> shown above consists of a simple container with fixed dimensions. To transform this widget into a responsive widget, we are calling the <em>MediaQuery.of()<\/em> method from Flutter&#8217;s core package. The method provides the <strong><em>size<\/em><\/strong> and <strong><em>orientation<\/em><\/strong> of the application (screen) with each build of the widget. The build function is called with every state change. For example, the state changes as soon as the orientation of the application (screen) changes. This state change causes the widget to rebuilt and recalculate the dimensions of the widget.<\/p>\n<p><strong>Call MediaQuery.of() to get screen size as per state<\/strong><\/p>\n<pre class=\"font-size:14 line-height:20 lang:default decode:true\" title=\"calculate screen size\">\/\/ TestWidget\r\n\r\n    double myHeight = 0.0;\r\n\r\n    double myWidth = 0.0;\r\n\r\n    @override\r\n\r\n    Widget build(BuildContext context){\r\n\r\n        \/\/ calculate present state screen size\r\n\r\n        this.myHeight = MediaQuery.of(context).size.height;\r\n\r\n        this.myWidth = MediaQuery.of(context).size.width;\r\n\r\n        \/\/ return widget with dimensions as per state\r\n\r\n        return Container(\r\n\r\n                 height: this.myHeight,\r\n\r\n                 width: this.myWidth\r\n\r\n        );\r\n\r\n    }<\/pre>\n<p>From here on it is possible to either trickle down the height and width or to create a child with the max size of the parent. A proper widget tree planning is crucial at this stage, because the size of all child widgets depends on the parent&#8217;s container dimensions.\u00a0More references about layouts and responsive UIs in Flutter can be found at the end of this article.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"In-App-Routing\"><\/span>In-App Routing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The navigation through application screens can be managed with two routing options.<\/p>\n<ol>\n<li>Routing <em>with<\/em> defined routes<\/li>\n<li>Routing <em>without<\/em> defined routes<\/li>\n<\/ol>\n<p>Routes define a UI representation of a widget and help to keep the code organized. All routes a registered in the <em>root<\/em> widget (<em>MaterialApp()<\/em>) and can be retrieved from any point in the application with the <strong><em>Navigator<\/em><\/strong>.<\/p>\n<figure id=\"attachment_14716\" aria-describedby=\"caption-attachment-14716\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14716 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-1024x623.png\" alt=\"Flutter Routing I\" width=\"1024\" height=\"623\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-1024x623.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-300x182.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-768x467.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-1536x934.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-2048x1245.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-1920x1167.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-400x243.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-555x338.png 555w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-basic-nav-360x219.png 360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-14716\" class=\"wp-caption-text\">Routing I<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p><strong>Create, import screens and define routes in MaterialApp()<\/strong><\/p>\n<pre class=\"font-size:14 line-height:20 lang:java decode:true\">import 'package:test\/TestWidget.dart';\r\n\r\nimport 'package:test\/MainWidget.dart';\r\n\r\nimport 'package:test\/DetailWidget.dart';\r\n\r\nimport 'package:flutter\/material.dart';\r\n\r\nimport 'package:flutter\/widgets.dart';\r\n\r\n\/\/ starting point of the application\r\n\r\nvoid main() =&gt; runApp(\r\n\r\n    MaterialApp(\r\n\r\n      title: \"TestApplication\",\r\n\r\n      initialRoute: \"\/\",\r\n\r\n      routes: {\r\n\r\n        \"\/\": (context) =&gt; MainWidget(),\r\n\r\n        \"\/detail\": (context) =&gt; DetailWidget(),\r\n\r\n        \"\/test\" : (context) =&gt; TestWidget(),\r\n\r\n      },\r\n\r\n    )\r\n\r\n);<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Register the routes in the MaterialApp() root widget<\/strong><\/p>\n<figure id=\"attachment_14717\" aria-describedby=\"caption-attachment-14717\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14717 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/flutter-uml-nav-1024x567.png\" alt=\"Flutter Routing II\" width=\"1024\" height=\"567\" \/><figcaption id=\"caption-attachment-14717\" class=\"wp-caption-text\"><span style=\"color: #000000;\">Routing II<\/span><\/figcaption><\/figure>\n<p><strong>Navigation with named routes<\/strong><\/p>\n<pre class=\"font-size:14 line-height:20 lang:java decode:true\" title=\"TestWidget -Navigator.push()\">import 'package:flutter\/material.dart';\r\n\r\nimport 'package:flutter\/widgets.dart';\r\n\r\nclass MainWidget extends StatefulWidget {\r\n\r\n  @override\r\n\r\n  State&lt;StatefulWidget&gt; createState() {\r\n\r\n    return new MainState();\r\n\r\n  }\r\n\r\n}\r\n\r\nclass MainState extends State&lt;MainWidget&gt;{\r\n\r\n  @override\r\n\r\n  Widget build(BuildContext context) {\r\n\r\n    \/\/ app will be a single centered button in a structured scaffold\r\n\r\n    return new Scaffold(\r\n\r\n      body: new Center(\r\n\r\n        child: FlatButton(\r\n\r\n          child: Text(\"PUSH\"),\r\n\r\n          onPressed: () {\r\n\r\n            \/\/ navigate to next screen \/ widget\r\n\r\n            Navigator.pushNamed(context, \"\/detail\");\r\n\r\n          }\r\n\r\n        )\r\n\r\n      )\r\n\r\n    );\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/pre>\n<p>The navigation with routes in Flutter runs both ways, either <strong><em>push<\/em><\/strong> to a new widget or <strong><em>pop<\/em><\/strong> back to where we came from. One little drawback exists, as I could not find a nice way to attach data to the <em>Navigator<\/em>\u00a0with a named route. But in Flutter we have other concepts like <em>streams<\/em> &amp; <i>sinks,<\/i>\u00a0which I will talk about in a future article.<\/p>\n<pre class=\"font-size:14 line-height:20 lang:java decode:true\">import 'package:flutter\/material.dart';\r\n\r\nimport 'package:flutter\/widgets.dart';\r\n\r\nclass DetailWidget extends StatefulWidget {\r\n\r\n  @override\r\n\r\n  State&lt;StatefulWidget&gt; createState() {\r\n\r\n    return new DetailState();\r\n\r\n  }\r\n\r\n}\r\n\r\nclass DetailState extends State&lt;DetailWidget&gt;{\r\n\r\n  @override\r\n\r\n  Widget build(BuildContext context) {\r\n\r\n    return new Scaffold(\r\n\r\n      body: new Center(\r\n\r\n        child: FlatButton(\r\n\r\n          child: Text(\"RETURN\"),\r\n\r\n          onPressed: () {\r\n\r\n            \/\/ navigate back from the widget has been pushed\r\n\r\n            Navigator.pop(context);\r\n\r\n          }\r\n\r\n        )\r\n\r\n      )\r\n\r\n    );\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/pre>\n<p><strong>Navigation without named routes<\/strong><\/p>\n<p>If the application does not require a pre-declared routes, it is possible to navigate directly to other screen widgets in Flutter. In this case we can use the <em>MaterialPageRoute<\/em> builder option. This builder does the same as the pre-declared routes, but only at the defined location.<\/p>\n<pre class=\"font-size:14 line-height:20 lang:java decode:true\" title=\"Route builder\">    onPressed: () {\r\n\r\n      Navigator.push(\r\n\r\n        context,\r\n\r\n        MaterialPageRoute(builder: (context) =&gt; DetailWidget()),\r\n\r\n      );\r\n\r\n    }\r\n\r\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Persistence\"><\/span>Persistence<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Saving simple <em>key-value<\/em> pairs is a basic feature and straight forward to implement.\u00a0The standard solution will be following the 4 steps below which can be found at the official\u00a0<a href=\"https:\/\/flutter.io\/docs\/cookbook\/persistence\/key-value\">Flutter<\/a>\u00a0documentation.<\/p>\n<ol>\n<li>Include library (shared_preferences)<\/li>\n<li>Save a key-value pair<\/li>\n<li>Retrieve a key-value pair<\/li>\n<li>Delete a key-value pair<\/li>\n<\/ol>\n<p><strong>Add dependency to pubspec.yaml<\/strong><\/p>\n<pre class=\"font-size:14 line-height:20 lang:java decode:true\" title=\"add dependency to yaml\">dependencies:\r\n\r\n  flutter:\r\n\r\n    sdk: flutter\r\n\r\n  shared_preferences: any\r\n\r\n<\/pre>\n<p><strong>Save<\/strong><\/p>\n<pre class=\"font-size:14 line-height:20 lang:java decode:true\" title=\"shared_pref - save\">\/\/ get shared preferences\r\n\r\nfinal preferences = await SharedPreferences.getInstance();\r\n\r\n\/\/ set value\r\n\r\nprefs.setString('TEST-KEY', 'test-value');\r\n\r\n<\/pre>\n<p><strong>Retrieve<\/strong><\/p>\n<pre class=\"font-size:14 line-height:20 lang:java decode:true\" title=\"shared_pref - retrieve\">\/\/ get shared preferences\r\n\r\nfinal prefs = await SharedPreferences.getInstance();\r\n\r\n\/\/ get 'TEST-KEY' or return default string if key can not be found\r\n\r\nfinal test = prefs.getString('TEST-KEY') ?? 'no key';\r\n\r\n<\/pre>\n<p><strong>Remove<\/strong><\/p>\n<pre class=\"font-size:14 line-height:20 lang:java decode:true \" title=\"shared_pref - remove\">\/\/ get shared preferences\r\n\r\nfinal prefs = await SharedPreferences.getInstance();\r\n\r\n\/\/ remove key-value pair\r\n\r\nprefs.remove('TEST-KEY');\r\n\r\n<\/pre>\n<p>Shared preferences are designed to store simple data only (primitive data types). If you&#8217;d like to store more and\/or structured data you should look into <a href=\"https:\/\/firebase.google.com\/docs\/flutter\/setup\">Firebase<\/a> or an <a href=\"https:\/\/pub.dartlang.org\/packages\/sqflite\">sqlLite<\/a> solution.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now we are able to create and manage a responsive UI, navigate through various screens and persist simple key-value pairs. This gives us the basic tooling to create amazing but simple apps.<\/p>\n<p>In the next Blog: \u00a0<em>Flutter: The Profiler (Part 3)<\/em>, we are looking deeper into building lightweight responsive layouts. We will build a simple <em>profile<\/em> <em>app<\/em> (master\/detail), which can be seen as a prototype for many similar structures.<\/p>\n<p>In the meantime, have a look at this Medium post:\u00a0<a href=\"https:\/\/medium.com\/@limboy\/flutter-layout-in-a-nutshell-f2ed3cb66d72\">Flutter layout in a nutshell<\/a>, or check out my other articles on Flutter.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"All-Articles-in-this-Series\"><\/span>All Articles in this Series<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/inovex.de\/blog\/flutter-beginning-of-a-new-era-part-1\/\">Flutter: The Beginning of a New Era? (Part 1)<\/a><\/li>\n<li data-fontsize=\"41\" data-lineheight=\"62\"><a href=\"https:\/\/www.inovex.de\/blog\/flutter-the-profiler-part-3\/\">Flutter: The Profiler (Part 3)<\/a><\/li>\n<li data-fontsize=\"41\" data-lineheight=\"62\"><a href=\"https:\/\/www.inovex.de\/blog\/flutter-the-finalizer-part-4\/\">Flutter: The Finalizer (Part 4)<\/a><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Read-on\"><\/span>Read on<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/medium.com\/search?q=Tino%20Kallinich\">Flutter Medium Blog<\/a><\/p>\n<p>Find out more about our <a href=\"https:\/\/www.inovex.de\/en\/our-services\/apps\/\">Android and iOS portfolio<\/a> or join us as a mobile developer!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the navigation between screens or saving simple key-value pairs. In this article I will show three of the most common concepts every developer should know.<\/p>\n","protected":false},"author":97,"featured_media":15075,"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":[510],"service":[420],"coauthors":[],"class_list":["post-14701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-apps-2","service-apps"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flutter: New Concepts? (Part 2) - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the navigation between screens or saving simple key-values pairs . In this article I will show three of the most common concepts every developer should know.\" \/>\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-new-concepts-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter: New Concepts? (Part 2) - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the navigation between screens or saving simple key-values pairs . In this article I will show three of the most common concepts every developer should know.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/\" \/>\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=\"2019-02-06T11:55:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-17T06:59:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1838\" \/>\n\t<meta property=\"og:image:height\" content=\"1036\" \/>\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\/2019\/01\/Flutter-2-e1549443620215-1024x577.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=\"6\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-new-concepts-part-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/\"},\"author\":{\"name\":\"Tino Kallinich-Friedrich\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/fcabd1e46229e68364e666b6732ff86f\"},\"headline\":\"Flutter: New Concepts? (Part 2)\",\"datePublished\":\"2019-02-06T11:55:59+00:00\",\"dateModified\":\"2026-03-17T06:59:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/\"},\"wordCount\":939,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png\",\"keywords\":[\"Apps\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/\",\"url\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/\",\"name\":\"Flutter: New Concepts? (Part 2) - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png\",\"datePublished\":\"2019-02-06T11:55:59+00:00\",\"dateModified\":\"2026-03-17T06:59:32+00:00\",\"description\":\"Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the navigation between screens or saving simple key-values pairs . In this article I will show three of the most common concepts every developer should know.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#primaryimage\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png\",\"width\":1838,\"height\":1036,\"caption\":\"Flutter Logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inovex.de\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter: New Concepts? (Part 2)\"}]},{\"@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: New Concepts? (Part 2) - inovex GmbH","description":"Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the navigation between screens or saving simple key-values pairs . In this article I will show three of the most common concepts every developer should know.","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-new-concepts-part-2\/","og_locale":"de_DE","og_type":"article","og_title":"Flutter: New Concepts? (Part 2) - inovex GmbH","og_description":"Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the navigation between screens or saving simple key-values pairs . In this article I will show three of the most common concepts every developer should know.","og_url":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2019-02-06T11:55:59+00:00","article_modified_time":"2026-03-17T06:59:32+00:00","og_image":[{"width":1838,"height":1036,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png","type":"image\/png"}],"author":"Tino Kallinich-Friedrich","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215-1024x577.png","twitter_creator":"@mx_tino","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Tino Kallinich-Friedrich","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/"},"author":{"name":"Tino Kallinich-Friedrich","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/fcabd1e46229e68364e666b6732ff86f"},"headline":"Flutter: New Concepts? (Part 2)","datePublished":"2019-02-06T11:55:59+00:00","dateModified":"2026-03-17T06:59:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/"},"wordCount":939,"commentCount":2,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png","keywords":["Apps"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/","url":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/","name":"Flutter: New Concepts? (Part 2) - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png","datePublished":"2019-02-06T11:55:59+00:00","dateModified":"2026-03-17T06:59:32+00:00","description":"Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the navigation between screens or saving simple key-values pairs . In this article I will show three of the most common concepts every developer should know.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-2-e1549443620215.png","width":1838,"height":1036,"caption":"Flutter Logo"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-new-concepts-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Flutter: New Concepts? (Part 2)"}]},{"@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\/14701","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=14701"}],"version-history":[{"count":4,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/14701\/revisions"}],"predecessor-version":[{"id":66526,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/14701\/revisions\/66526"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/15075"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=14701"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=14701"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=14701"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=14701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}