{"id":15437,"date":"2019-02-25T09:52:02","date_gmt":"2019-02-25T08:52:02","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=15437"},"modified":"2026-03-17T07:59:31","modified_gmt":"2026-03-17T06:59:31","slug":"flutter-the-profiler-part-3","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/","title":{"rendered":"Flutter: The Profiler (Part\u00a03)"},"content":{"rendered":"<p class=\"line lemma_desc\"><span class=\"tag_lemma\">Previously,<\/span> I gave a brief introduction to the core concepts and setup of Flutter. I showed the general structure of a Flutter project and some implementation examples for:<\/p>\n<ul>\n<li><strong>R<\/strong>esponsive UI<\/li>\n<li><strong>I<\/strong>n App Navigation<\/li>\n<li><strong>P<\/strong>ersistence (internal device storage)<\/li>\n<\/ul>\n<p>The next step will be to build a <em>prototype<\/em> application in <a href=\"https:\/\/www.inovex.de\/blog\/flutter-beginning-of-a-new-era-part-1\/\">Flutter<\/a> with <a href=\"https:\/\/www.dartlang.org\/\">Dart<\/a>. As this is a longer procedure, I will split this project into at least two articles. This will reduce the code overload per article to a minimum and therefore will make the articles easier to follow and easier to understand. At the end of the article, you will find a link to the <a href=\"#GitHub\">GitHub<\/a> repository that contains the present stage of the application.<!--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-the-profiler-part-3\/#The-App\" >The App<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#Step-0-Wording\" >Step 0: Wording<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#Step-1-Analyse-Research\" >Step 1: Analyse &amp; Research<\/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-the-profiler-part-3\/#Step-2-Design-Feature-Definition\" >Step 2: Design &amp; Feature Definition<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#Design\" >Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#Features\" >Features<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#Step-3-Setup-Implementation\" >Step 3: Setup &amp; Implementation<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#Setup-Import\" >Setup &amp; Import<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#General-Details-Page\" >General &amp; Details Page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#maindart\" >main.dart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#GeneralPagedart\" >GeneralPage.dart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#DetailsPagedart\" >DetailsPage.dart<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#Recap\" >Recap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#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-15\" href=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#Read-on\" >Read on<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"The-App\"><\/span>The App<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I will follow the simple &#8222;<em>analyze, design and implement<\/em>&#8220; pattern. This will help to avoid\u00a0unnecessary drawbacks for unsupported features and provide us with a clear vision of the final application.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-0-Wording\"><\/span>Step 0: Wording<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Pages:<\/strong> <a href=\"https:\/\/en.wikipedia.org\/wiki\/User_interface\">UI<\/a> representations of a specific application state<\/li>\n<li><strong>Widgets:<\/strong> Standard &amp; custom widgets as per the Flutter\u00a0<a href=\"https:\/\/flutter.io\/docs\/development\/ui\/widgets\">Widget Catalog<\/a><\/li>\n<li><strong>Navigation:<\/strong> Process of switching pages (In App routing)<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step-1-Analyse-Research\"><\/span>Step 1: Analyse &amp; Research<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Let&#8217;s get started by defining what kind of Futter application we like to build. As shown in the diagram below, we are going to implement a simple\u00a0<i>general<\/i>\/<em>detail<\/em> app. This is a common structure and can easily be adjusted to various use cases.<\/p>\n<figure id=\"attachment_15439\" aria-describedby=\"caption-attachment-15439\" style=\"width: 748px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15439\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/blog-prototype-app-flow-1024x981.png\" alt=\"Basic Structure Diagram\" width=\"748\" height=\"717\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/blog-prototype-app-flow-1024x981.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/blog-prototype-app-flow-300x287.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/blog-prototype-app-flow-768x736.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/blog-prototype-app-flow-1536x1472.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/blog-prototype-app-flow-1920x1840.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/blog-prototype-app-flow-400x383.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/blog-prototype-app-flow-360x345.png 360w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/blog-prototype-app-flow.png 2004w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><figcaption id=\"caption-attachment-15439\" class=\"wp-caption-text\">Basic Structure Diagram<\/figcaption><\/figure>\n<p>The given structure will be our guide to lean on during the implementation. We can use it to search for appropriate <em>widgets<\/em> and we can\u00a0draw conclusions for the <em>state management<\/em> from it.\u00a0This sounds complicated for starters like myself, but I will run you through the whole process and try to keep it as simple as possible.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-2-Design-Feature-Definition\"><\/span>Step 2: Design &amp; Feature Definition<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <a href=\"#attachment_15439\">basic structure<\/a> of the app\u00a0demands some specific setup, features and widgets.<\/p>\n<table style=\"height: 82px; border-style: none; border-color: #fcfcfc; background-color: #003c7e; width: 100%; padding: 50px;\" width=\"100%\" cellspacing=\"8px\" cellpadding=\"8px\">\n<tbody>\n<tr style=\"height: 24px;\">\n<th style=\"width: 179px; height: 10px; border-style: none; border-color: #ffffff; background-color: #003c7e; text-align: center;\"><span style=\"color: #ffffff;\">Design<\/span><\/th>\n<th style=\"width: 179px; border-style: none; border-color: #ffffff; background-color: #003c7e; height: 10px; text-align: center;\"><span style=\"color: #ffffff;\">Features<\/span><\/th>\n<th style=\"width: 162px; border-style: none; border-color: #ffffff; background-color: #003c7e; height: 10px; text-align: center;\"><span style=\"color: #ffffff;\">Widgets<\/span><\/th>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 179px; height: 24px; background-color: #4487c7; border-style: none; text-align: center;\"><span style=\"color: #ffffff;\">2 Pages (General \/ Detail)<\/span><\/td>\n<td style=\"width: 179px; background-color: #4487c7; border-style: none; text-align: center; height: 24px;\"><span style=\"color: #ffffff;\">Responsive Layout<\/span><\/td>\n<td style=\"width: 162px; background-color: #4487c7; border-style: none; height: 24px; text-align: center;\"><span style=\"color: #ffffff;\">Grid (catalog)<\/span><\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 179px; height: 24px; background-color: #4487c7; border-style: none; text-align: center;\"><span style=\"color: #ffffff;\">In App Routing<\/span><\/td>\n<td style=\"width: 179px; background-color: #4487c7; border-style: none; text-align: center; height: 24px;\"><span style=\"color: #ffffff;\">Custom Icon<\/span><\/td>\n<td style=\"width: 162px; background-color: #4487c7; border-style: none; height: 24px; text-align: center;\"><span style=\"color: #ffffff;\">Standard (catalog)<\/span><\/td>\n<\/tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 179px; height: 24px; background-color: #4487c7; border-style: none; text-align: center;\"><span style=\"color: #ffffff;\">Assets (Images, Icons &#8230;)<\/span><\/td>\n<td style=\"width: 179px; background-color: #4487c7; border-style: none; height: 24px; text-align: center;\"><span style=\"color: #ffffff;\">Hero Animation<\/span><\/td>\n<td style=\"width: 162px; background-color: #4487c7; border-style: none; height: 24px; text-align: center;\"><span style=\"color: #ffffff;\">Custom (built by us)<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>To keep this project simple, we will keep the the app theme as it is and only set different colors to the desired widgets. Therefore, we don&#8217;t need to create a full scale <a href=\"https:\/\/flutter.io\/docs\/cookbook\/design\/themes\">custom theme<\/a>.<\/p>\n<p>As I go through the implementation, I will introduce each required widget. I will start with the structure widgets and go through various kinds of other widgets, up to the standard widgets (Text or Buttons).<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Design\"><\/span>Design<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The <em>general <\/em>page should show a grid of images that are loaded from the project&#8217;s assets directory, the image will be the interface of the <em>details<\/em> page which will contain functionality of\u00a0a navigation between pages, while the <em>expandable text<\/em>\u00a0widget, located below the image, is optional. Feel free to include it and share your experience in the comment section.<\/p>\n<p>Each page should have a top app bar and a bottom app bar. In case we want to extend the project later, this would be the section where you set buttons. The overall look of the page can be derived from the <a href=\"#attachment_15439\">basic structure diagram<\/a>.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Features\"><\/span>Features<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The responsive layout will be achieved with the <em>MediaQuery.of(&#8230;)<\/em> function as described in the\u00a0<a href=\"https:\/\/www.inovex.de\/blog\/flutter-new-concepts-part-2\/\">previous article<\/a>. Custom widgets will be built as a combination of standard widgets.\u00a0<a href=\"https:\/\/flutter.io\/docs\/development\/ui\/animations\/hero-animations\">Heros<\/a> are also included in that process. In the end, the custom icon is a standard task that will be accomplished with a third party library.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-3-Setup-Implementation\"><\/span>Step 3: Setup &amp; Implementation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Select an\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Integrated_development_environment\">IDE<\/a> of your choice and follow the steps at the <a href=\"https:\/\/flutter.io\/docs\/get-started\/codelab\">Flutter.io<\/a> website in order to create your first project. Which IDE you use doesn&#8217;t matter because the project structure is the same for each.<\/p>\n<p>We will start with the project setup and the import of all <em>assets<\/em> and <em>libraries<\/em>. Then, we will create our first widgets, the<em>\u00a0General widget<\/em>\u00a0and the\u00a0<em>DetailsPage<\/em> widget.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Setup-Import\"><\/span>Setup &amp; Import<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5 style=\"padding-left: 30px;\"><span style=\"font-size: 12pt;\">1. A new Flutter project has been created \u00a0<\/span><\/h5>\n<p style=\"padding-left: 60px;\"><span style=\"font-size: 12pt;\">The <span class=\"lang:java decode:true crayon-inline \">lib<\/span>\u00a0 directory contains only the\u00a0<em>main.dart<\/em> file.<\/span><\/p>\n<h5 style=\"padding-left: 30px;\"><span style=\"font-size: 12pt;\">2. Create an assets folder in the project&#8217;s root directory ()<\/span><\/h5>\n<figure id=\"attachment_15485\" aria-describedby=\"caption-attachment-15485\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15485\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/create-asstes-dir-1024x658.png\" alt=\"Assets Directory\" width=\"700\" height=\"450\" \/><figcaption id=\"caption-attachment-15485\" class=\"wp-caption-text\">Assets Directory<\/figcaption><\/figure>\n<h5 style=\"padding-left: 30px;\"><span style=\"font-size: 12pt;\">3. Add assets to the asset directory<\/span><\/h5>\n<p style=\"padding-left: 60px;\">Choose a bundle of images that you want to be displayed at the <em>GeneralPage<\/em> and paste them into the <em>assets<\/em> directory with right click and paste operation.<\/p>\n<h5 style=\"padding-left: 30px;\"><span style=\"font-size: 12pt;\">4. Add assets to the <em>pubspec.yaml<\/em> file<\/span><\/h5>\n<p style=\"padding-left: 60px;\">The <em>pubspec.yaml<\/em> file manages all assets, third party libraries, and the Flutter <a href=\"https:\/\/en.wikipedia.org\/wiki\/Software_development_kit\">SDK<\/a> setup. The assets have to be listed under the section <em>flutter\/assets<\/em>\u00a0and most importantly<em>\u00a0<\/em>you have to<em>\u00a0<\/em>follow the spacing convention as shown below.<\/p>\n<figure id=\"attachment_15487\" aria-describedby=\"caption-attachment-15487\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15487\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/assets-and-pubspec.yaml_-1024x822.png\" alt=\"Assets\" width=\"700\" height=\"562\" \/><figcaption id=\"caption-attachment-15487\" class=\"wp-caption-text\">Assets<\/figcaption><\/figure>\n<h5 style=\"padding-left: 30px;\"><span style=\"font-size: 12pt;\">5. Add third party library to the <em>pubspec.yaml<\/em> file<\/span><\/h5>\n<p style=\"padding-left: 60px;\">Find section <em>dev_dependencies<\/em>, add the package <a href=\"https:\/\/pub.dartlang.org\/packages\/flutter_launcher_icons\"><em>flutter_launcher_icons<\/em><\/a> and the parameter <em>flutter_icons<\/em> as shown below. If you have chosen an image as your icon and imported it correctly, you can run the\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Command-line_interface\">CL<\/a> commands mentioned below in your project&#8217;s root directory. This will set the given image as the icon of your application.<\/p>\n<pre class=\"font-size:14 line-height:24 lang:yaml decode:true\" title=\"The pubspec.yaml file\">...\r\n\r\ndev_dependencies:\r\n\r\n  flutter_test:\r\n\r\n    sdk: flutter\r\n\r\n  # Special add custom icon\r\n\r\n  # 1. add library\r\n\r\n  # 2. add flutter_icons parameter\r\n\r\n  # 3. add assets\/icon\/any_image_you_like\r\n\r\n  # CLI run: flutter pub get\r\n\r\n  # CLI run: flutter pub pub run flutter_launcher_icons:main\r\n\r\n  flutter_launcher_icons: any\r\n\r\nflutter_icons:\r\n\r\n  android: true\r\n\r\n  ios: true\r\n\r\n  image_path: \"assets\/icons\/your_icon.png\"\r\n\r\n..<\/pre>\n<p>Test your application with the CLI commands <span class=\"lang:java decode:true crayon-inline \">flutter packages get<\/span>\u00a0 and\u00a0 <span class=\"lang:java decode:true crayon-inline \">flutter run<\/span>\u00a0 to make sure that all packages have been imported correctly.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"General-Details-Page\"><\/span>General &amp; Details Page<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The basic setup of the entire app is completed. Now we will have to design and connect widgets.<\/p>\n<h5><span style=\"font-size: 12pt;\">1. Create new Dart file GeneralPage.dart in lib directory<\/span><\/h5>\n<figure id=\"attachment_15488\" aria-describedby=\"caption-attachment-15488\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15488\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/create-dart-file-1024x473.png\" alt=\"New Dart file\" width=\"700\" height=\"324\" \/><figcaption id=\"caption-attachment-15488\" class=\"wp-caption-text\">New Dart File<\/figcaption><\/figure>\n<p>The Dart file will wrap the widget with the corresponding state in one file and can later be accessed via the <em>Navigator<\/em>.<\/p>\n<h5><span style=\"font-size: 12pt;\">2. Generate new Stateful Widget in GeneralPage.dart<\/span><\/h5>\n<p>Create a stateful widget, either as described in the\u00a0<a href=\"https:\/\/flutter.io\/docs\/development\/ui\/interactive#creating-a-stateful-widget\">official documentation<\/a>\u00a0or with the shortcut <span class=\"lang:java decode:true crayon-inline \">stful<\/span>\u00a0. <span class=\"lang:java decode:true crayon-inline\">stful<\/span>\u00a0 will create the complete logic of a <em>nameless stateful widget<\/em>. Continue by setting the name of that widget to match the file name of the page.<\/p>\n<p style=\"text-align: center;\">HINT: Type <span class=\"lang:java decode:true crayon-inline \">stful<\/span>\u00a0<strong><em>\u00a0<\/em><\/strong>to create the logic for a Stateful Widget.<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"font-size:14 line-height:24 lang:default decode:true\">\/\/ GeneralPage.dart\r\n\r\nclass GeneralPage extends StatefulWidget {\r\n\r\n  @override\r\n\r\n  _GeneralPageState createState() =&gt; _GeneralPageState();\r\n\r\n}\r\n\r\nclass _GeneralPageState extends State&lt;GeneralPage&gt; {\r\n\r\n  @override\r\n\r\n  Widget build(BuildContext context) {\r\n\r\n    \/\/ Container is a placeholder at this moment\r\n\r\n    return new Container();\r\n\r\n  }\r\n\r\n}<\/pre>\n<h5><span style=\"font-size: 12pt;\">\u00a03. Create new Dart file DetailsPage.dart in lib directory<\/span><\/h5>\n<p>Repeat step 1 and create a new Dart file called <em>DetailsPage. <\/em><span style=\"font-size: 12pt;\">\u00a0\u00a0<\/span><\/p>\n<h5><span style=\"font-size: 12pt;\">4.\u00a0Generate new Stateful Widget in DetailsPage.dart<\/span><\/h5>\n<p>Repeat step 2 and create a new stateful widget called <em>DetailsPage.<\/em><\/p>\n<p>Each state widget of both pages returns a placeholder (<em>new Container()<\/em>). Besides this, the placeholder will be replaced with our custom widgets later.\u00a0As soon as you have completed step 4, your <span class=\"lang:java decode:true crayon-inline \">lib<\/span>\u00a0 directory should contain three Dart files:<\/p>\n<ul>\n<li>main.dart<\/li>\n<li>GeneralPage.dart<\/li>\n<li>DetailsPage.dart<\/li>\n<\/ul>\n<p>Execute CLI command <span class=\"lang:java decode:true crayon-inline\">flutter run<\/span>\u00a0in the project root directory and check for compiling errors.<\/p>\n<p>If your application runs without errors, you can proceed by implementing the core structure. Start with\u00a0<em>main.dart<\/em> and define the structure in both <em>page<\/em> widgets.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"maindart\"><\/span>main.dart<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>As we learned in the <a href=\"https:\/\/www.inovex.de\/blog\/flutter-new-concepts-part-2\/\">previous article<\/a>, the <em>main.dart<\/em> file returns the root widget of the project. In the root widget we declare the <em>home<\/em> widget (the first widget to start) and other attributes like the\u00a0<em>title<\/em> (this.title) of the app.<\/p>\n<pre class=\"font-size:14 line-height:24 lang:default decode:true\">\/\/ main.dart\r\n\r\nvoid main() =&gt; runApp(new MyApp();\r\n\r\nclass MyApp extends StatelessWidget {\r\n\r\n  String title = 'Profile'\r\n\r\n  @override\r\n\r\n  Widget build(BuildContext context) {\r\n\r\n    return MaterialApp(  \/\/ root widget\r\n\r\n      title: this.title,\r\n\r\n      home: GeneralPage(),\r\n\r\n    );\r\n\r\n  }\r\n\r\n}<\/pre>\n<h4><span class=\"ez-toc-section\" id=\"GeneralPagedart\"><\/span>GeneralPage.dart<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>As seen in the <a href=\"#attachment_15439\">basic structure image<\/a>, the <em>GeneralPage<\/em> widget serves as the home widget. The <em>home<\/em> attribute in the context of Flutter describes the first widget that will be built directly after the root widget. In order to get a predefined strutted app in Flutter we take advantage of a <em>Scaffold<\/em> widget.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15484 aligncenter\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/scaffold-widget-1024x580.png\" alt=\"scaffold widget\" width=\"365\" height=\"207\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/scaffold-widget-1024x580.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/scaffold-widget-300x170.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/scaffold-widget-768x435.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/scaffold-widget-400x227.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/scaffold-widget-720x406.png 720w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/scaffold-widget-360x204.png 360w, https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/02\/scaffold-widget.png 1196w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/p>\n<p>This structural widget will be returned by the\u00a0<em>build<\/em> function to the <em>state<\/em> widget (<em>GeneralPageState<\/em>) of the related page (<em>GeneralPage<\/em>).<\/p>\n<pre class=\"font-size:14 line-height:24 lang:default decode:true\">\/\/ GeneralPage.dart\r\n\r\nclass GeneralPage extends StatefulWidget {\r\n\r\n  @override\r\n\r\n  _GeneralPageState createState() =&gt; new _GeneralPageState();\r\n\r\n}\r\n\r\nclass _GeneralPageState extends State&lt;GeneralPage&gt; {\r\n\r\n  @override\r\n\r\n  Widget build(BuildContext context) {\r\n\r\n    return Scaffold\r\n\r\n      appBar: new AppBar(),\r\n\r\n      body: new Container(),\r\n\r\n      bottomNavigationBar: new Container(),\r\n\r\n    );\r\n\r\n  }<\/pre>\n<p>The Scaffold widget has many attributes, but for this project I will only use the <em>appBar<\/em>, the <em>body<\/em> and the <em>bottomNavigationBar<\/em>. All of these attributes will be addressed with the next part of this article series. For now I recommend to set a placeholder (<em>new Container()<\/em>).<\/p>\n<h4><span class=\"ez-toc-section\" id=\"DetailsPagedart\"><\/span>DetailsPage.dart<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The implementation of the <em>DetailsPage<\/em>\u00a0widget is equal to the <em>GeneralPage <\/em>widget. Continue with the exchange of the <em>new Container()<\/em>\u00a0placeholder, in the \u00a0<em>_DetailsPageState class<\/em>, with the defined <em>Scaffold<\/em> widget. Both pages should now contain an equal implementation of a <em>Scaffold<\/em> widget in the related state class.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Recap\"><\/span>Recap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We have started to create our first Flutter application. It consists of two pages, the\u00a0<em>General<\/em>&#8211; and the\u00a0<em>DetailsPage<\/em>. All necessary assets and third party packages are imported in the <em>pubspec.yaml<\/em> file. Furthermore, an additional <em>assets<\/em> directory has been added to the root project directory. The <em>assets<\/em> directory should contain images to populate other widgets at a later stage of this project. The course is set for the next steps:<\/p>\n<ul>\n<li>Create Custom UI Widgets<\/li>\n<li>Add UI for GeneralPage and DetailsPage<\/li>\n<li>Implement <a href=\"https:\/\/www.inovex.de\/blog\/flutter-new-concepts-part-2\/\">In App Navigation\u00a0<\/a><\/li>\n<li>Run <a href=\"https:\/\/flutter.io\/docs\/development\/ui\/animations\/hero-animations\">Hero<\/a> Animation<\/li>\n<\/ul>\n<p>In the next article: &#8222;<em>Flutter: The Finalizer! (Part 4)&#8220;,\u00a0<\/em>I will finalize the prototype <em>profile<\/em> app. Feel free to have a look at the <a href=\"https:\/\/github.com\/SeemannMx\/flutter_profile_setup\">Github Repository<\/a>\u00a0and share your opinion!<\/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 class=\"entry-title fusion-post-title\" data-fontsize=\"41\" data-lineheight=\"62\"><a href=\"https:\/\/www.inovex.de\/blog\/flutter-new-concepts-part-2\/\">Flutter: New Concepts? (Part 2)<\/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>Previously, I gave a brief introduction to the core concepts and setup of Flutter. I showed the general structure of a Flutter project and some implementation examples for: Responsive UI In App Navigation Persistence (internal device storage) The next step will be to build a prototype application in Flutter with Dart. As this is a [&hellip;]<\/p>\n","protected":false},"author":97,"featured_media":15077,"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-15437","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: The Profiler (Part\u00a03) - inovex GmbH<\/title>\n<meta name=\"description\" content=\"In this article we will start to build a prototype application in Flutter with Dart. At the end, you will find a link to the GitHub repository that contains the present stage of the application.\" \/>\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-the-profiler-part-3\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter: The Profiler (Part\u00a03) - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"In this article we will start to build a prototype application in Flutter with Dart. At the end, you will find a link to the GitHub repository that contains the present stage of the application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/\" \/>\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-25T08:52:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-17T06:59:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.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\/2019\/01\/Flutter-3-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=\"8\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-the-profiler-part-3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/\"},\"author\":{\"name\":\"Tino Kallinich-Friedrich\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/fcabd1e46229e68364e666b6732ff86f\"},\"headline\":\"Flutter: The Profiler (Part\u00a03)\",\"datePublished\":\"2019-02-25T08:52:02+00:00\",\"dateModified\":\"2026-03-17T06:59:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/\"},\"wordCount\":1481,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.png\",\"keywords\":[\"Apps\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/\",\"url\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/\",\"name\":\"Flutter: The Profiler (Part\u00a03) - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.png\",\"datePublished\":\"2019-02-25T08:52:02+00:00\",\"dateModified\":\"2026-03-17T06:59:31+00:00\",\"description\":\"In this article we will start to build a prototype application in Flutter with Dart. At the end, you will find a link to the GitHub repository that contains the present stage of the application.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#primaryimage\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.png\",\"width\":1920,\"height\":1080,\"caption\":\"Flutter Logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inovex.de\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter: The Profiler (Part\u00a03)\"}]},{\"@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: The Profiler (Part\u00a03) - inovex GmbH","description":"In this article we will start to build a prototype application in Flutter with Dart. At the end, you will find a link to the GitHub repository that contains the present stage of the application.","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-the-profiler-part-3\/","og_locale":"de_DE","og_type":"article","og_title":"Flutter: The Profiler (Part\u00a03) - inovex GmbH","og_description":"In this article we will start to build a prototype application in Flutter with Dart. At the end, you will find a link to the GitHub repository that contains the present stage of the application.","og_url":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2019-02-25T08:52:02+00:00","article_modified_time":"2026-03-17T06:59:31+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.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-3-1024x576.png","twitter_creator":"@mx_tino","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Tino Kallinich-Friedrich","Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/"},"author":{"name":"Tino Kallinich-Friedrich","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/fcabd1e46229e68364e666b6732ff86f"},"headline":"Flutter: The Profiler (Part\u00a03)","datePublished":"2019-02-25T08:52:02+00:00","dateModified":"2026-03-17T06:59:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/"},"wordCount":1481,"commentCount":3,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.png","keywords":["Apps"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/","url":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/","name":"Flutter: The Profiler (Part\u00a03) - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.png","datePublished":"2019-02-25T08:52:02+00:00","dateModified":"2026-03-17T06:59:31+00:00","description":"In this article we will start to build a prototype application in Flutter with Dart. At the end, you will find a link to the GitHub repository that contains the present stage of the application.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2019\/01\/Flutter-3.png","width":1920,"height":1080,"caption":"Flutter Logo"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/flutter-the-profiler-part-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Flutter: The Profiler (Part\u00a03)"}]},{"@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\/15437","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=15437"}],"version-history":[{"count":5,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/15437\/revisions"}],"predecessor-version":[{"id":66524,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/15437\/revisions\/66524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/15077"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=15437"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=15437"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=15437"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=15437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}