{"id":9134,"date":"2022-06-25T12:23:32","date_gmt":"2022-06-25T10:23:32","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=9134"},"modified":"2022-07-02T11:34:23","modified_gmt":"2022-07-02T09:34:23","slug":"flutter-cookbook","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2022\/06\/25\/flutter-cookbook\/","title":{"rendered":"Flutter | Cookbook"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Development Workflow<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">TL;DR<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">flutter create &lt;app>\ncd &lt;app>\nflutter run\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Run App<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">flutter\nflutter run --release .\\lib\\go_router.dart<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">VSCode and DevTools<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Change default browser<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Press&nbsp;<code>F1<\/code>, find&nbsp;<strong>Preferences: Open Settings (UI)<\/strong>&nbsp;then search for&nbsp;<code>devtoolsbrowser<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Change in DevTools Menu<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"704\" height=\"48\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2022\/06\/image.png\" alt=\"\" class=\"wp-image-9147\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2022\/06\/image.png 704w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2022\/06\/image-300x20.png 300w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"195\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2022\/06\/image-1.png\" alt=\"\" class=\"wp-image-9148\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2022\/06\/image-1.png 720w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2022\/06\/image-1-300x81.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Working with Modules and Classes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Import all Modules from a Folder<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Suppose you have a list of modules located in the folder models and you want to import all of them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To do this<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>create a file <code>index.dart<\/code> which exports all files<\/li><li>in your dart file, import this <code>index.dart<\/code><\/li><\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">export 'counter.dart';\nexport 'number.dart';<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import 'data\/models\/index.dart';<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Create custom code for unsupported packages<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create main file to check, if package is available. If not, then switch to custom code<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">export 'unsupported.dart' if (dart.library.io) 'io.dart';<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Use this file in your code<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import 'plugins\/desktop\/desktop.dart';<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Create files for supported and unsupported packages<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>io.dart<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"6\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import 'dart:io';\n\nimport 'package:flutter\/foundation.dart';\nimport 'package:flutter\/material.dart';\n\nvoid setTargetPlatformForDesktop({TargetPlatform platform}) {\n  TargetPlatform targetPlatform;\n  if (platform != null) {\n    targetPlatform = platform;\n  }\n  if (targetPlatform == null) {\n    if (Platform.isMacOS) {\n      targetPlatform = TargetPlatform.iOS;\n    } else if (Platform.isLinux || Platform.isWindows) {\n      targetPlatform = TargetPlatform.android;\n    }\n  }\n  debugDefaultTargetPlatformOverride = targetPlatform;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><code>unsupported.dart<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"3\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import 'package:flutter\/material.dart';\n\nvoid setTargetPlatformForDesktop({TargetPlatform platform}) {}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Working with Themes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Using a Theme in MaterialApp()<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"3-5\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">return MaterialApp(\n      title: 'Flutter Demo',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: const MyHomePage(title: 'Flutter Demo Home Page'),\n    );<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"3-5\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    return MaterialApp(\n      title: 'Flutter Demo',\n      theme: ThemeData.light().copyWith(\n        primaryColor: Colors.blue,\n      ),\n      darkTheme: ThemeData.dark(),\n      home: MyHomePage(title: 'Flutter Demo Home Page'),\n    );<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Working with CSS Colors<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Import<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import 'package:css_colors\/css_colors.dart';<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Usage<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">new Container(color: CSSColors.orange)<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">App Bar<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-remove-a-debug-banner\">How to remove a DEBUG Banner<a href=\"https:\/\/sarunw.com\/posts\/how-to-remove-debug-banner-in-flutter-app\/#how-to-remove-a-debug-banner\"><\/a><\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"dart\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">MaterialApp(\n  debugShowCheckedModeBanner: false,\n\n  home: Scaffold(\n    appBar: AppBar(\n      title: const Text('Home'),\n    ),\n  ),  \n);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Working With Data and Data Models<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Replace Integer Variables with a Data Model<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Examining the default Flutter App (Counter Sample), shows, that the real counter is implemented as integer with integer operations:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"dart\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">int _counter = 0;\n\nvoid _incrementCounter() {\n  setState(() {\n    _counter++;\n  });\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to customize the varianble and operations, you could replace the interger variable witrh your own data model<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import 'data\/models\/counter.dart';\n\nCounterModel _counter = CounterModel();\n\nvoid _incrementCounter() {\n  setState(() {\n    _counter.add(1);\n  });\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>CounterModel <\/code>is defined in <code>data\/models\/counter.dart'<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class CounterModel {\n  int _value = 0;\n\n  int get value => _value;\n\n  void set(int val) => _value = val;\n  void add(int val) => _value += val;\n  void remove(int val) => _value -= val;\n\n  void reset() => _value = 0;\n\n  @override\n  String toString() {\n    return value.toString();\n  }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Interesting Pack<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pub.dev\/packages\/device_preview\/example\">device_preview<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Development Workflow TL;DR Run App VSCode and DevTools Change default browser Press&nbsp;F1, find&nbsp;Preferences: Open Settings (UI)&nbsp;then search for&nbsp;devtoolsbrowser. Change in DevTools Menu Working with Modules and Classes Import all Modules from a Folder Suppose you have a list of modules located in the folder models and you want to import all of them. To do [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9101,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26,49],"tags":[],"class_list":["post-9134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter","category-mobile-development"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2022\/06\/dart_header.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=9134"}],"version-history":[{"count":13,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9134\/revisions"}],"predecessor-version":[{"id":9181,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9134\/revisions\/9181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/9101"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=9134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=9134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=9134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}