{"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 this create a file index.dart which exports all files in your dart file, import this index.dart Create custom code for unsupported packages Create main file to check, if package is available. If not, then switch to custom code Use this file in your code Create files [&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}]}}