{"id":1166,"date":"2018-07-23T09:27:48","date_gmt":"2018-07-23T07:27:48","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=1166"},"modified":"2023-04-22T17:50:29","modified_gmt":"2023-04-22T15:50:29","slug":"flutter-getting-started","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2018\/07\/23\/flutter-getting-started\/","title":{"rendered":"Flutter | Getting started"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Installation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Installation of Flutter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Details are <a href=\"https:\/\/flutter.io\/get-started\/instal\" data-type=\"URL\" data-id=\"https:\/\/flutter.io\/get-started\/instal\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation of Dart SDK<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Details are <a href=\"https:\/\/www.dartlang.org\/tools\/sdk\">here<\/a><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$ brew tap dart-lang\/dart\n$ brew install dart --devel<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Create your first App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Copied from <a href=\"https:\/\/flutter.dev\/docs\/get-started\/codelab\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"here (\u00f6ffnet in neuem Tab)\">here<\/a> and <a href=\"https:\/\/codelabs.developers.google.com\/codelabs\/first-flutter-app-pt2\/#0\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"here (\u00f6ffnet in neuem Tab)\">here<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-create-the-starter-flutter-app\">Create the starter Flutter app<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$ flutter create starter\n$ cd starter<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Run Flutter App on the Web<\/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 config --enable-web\n$ flutter config --enable-web\n$ flutter build web<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Run Flutter App on Android Emulator<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"1\" data-enlighter-title=\"\" data-enlighter-group=\"\">$ flutter devices<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$ flutter run [--verbose]<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$ flutter emulators\n5 available emulators:\n\nAndroid_Accelerated_Oreo\nNexus_5X_API_28_x86      \u2022 Nexus 5X      \u2022 Google \u2022 Nexus 5X API 28 x86\nPixel_3_API_28           \u2022 pixel_3       \u2022 Google \u2022 Pixel 3 API 28\nPixel_XL_API_28          \u2022 pixel_xl      \u2022 Google \u2022 Pixel XL API 28\napple_ios_simulator      \u2022 iOS Simulator \u2022 Apple\n\nTo run an emulator, run 'flutter emulators --launch &lt;emulator id>'.\nTo create a new emulator, run 'flutter emulators --create [--name xyz]'.<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$ flutter emulators --launch apple_ios_simulator<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Read More<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"8533\"><strong>Official website<\/strong>:&nbsp;<a href=\"https:\/\/flutter.io\/\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/flutter.io\/<\/a>&nbsp;will supply from step by step to install and start with the simple example.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"87c2\"><strong>Dart language<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dart online compile<\/strong>:&nbsp;<a href=\"http:\/\/dartpat.dartlang.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">http:\/\/dartpat.dartlang.com\/<\/a><\/li>\n\n\n\n<li><strong>Dart language<\/strong>&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=Gv-g1iQBFuI&amp;list=PLlxmoA0rQ-LyHW9voBdNo4gEEIh0SjG-q\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/www.youtube.com\/watch\u2026<\/a><\/li>\n\n\n\n<li><strong>Google Dart language<\/strong>&nbsp;<a href=\"https:\/\/www.youtube.com\/watch?v=MVoK7g_DcVs&amp;list=PLPedo-T7QiNt_i-CNGzkKLgp9McLg1fNp\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/www.youtube.com\/watch\u2026<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"5879\"><strong>Flutter training online<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>(Free)<a href=\"https:\/\/www.youtube.com\/watch?v=GLSG_Wh_YWc\" rel=\"noreferrer noopener\" target=\"_blank\">Flutter Tutorial for Beginners \u2014 Build iOS and Android Apps with Google\u2019s Flutter &amp; Dart<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.udacity.com\/course\/build-native-mobile-apps-with-flutter--ud905\" rel=\"noreferrer noopener\" target=\"_blank\">Build Native Mobile Apps with Flutter<\/a>&nbsp;by Google<\/li>\n\n\n\n<li><a href=\"https:\/\/udemy.com\/dart-and-flutter-the-complete-developers-guide\/\" rel=\"noreferrer noopener\" target=\"_blank\">Dart and Flutter: The Complete Developer\u2019s Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/udemy.com\/flutter-dart-the-complete-flutter-app-development-course\/\" rel=\"noreferrer noopener\" target=\"_blank\">Flutter &amp; Dart \u2014 The Complete Flutter App Development Course<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.udemy.com\/dart-and-flutter-the-complete-developers-guide\/\" rel=\"noreferrer noopener\" target=\"_blank\">Dart and Flutter: The Complete Developer\u2019s Guide<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"0cde\"><strong>Google CodeLab<\/strong>: <a rel=\"noreferrer noopener\" href=\"https:\/\/codelabs.developers.google.com\/?cat=Flutter\" target=\"_blank\">https:\/\/codelabs.developers.google.com\/?cat=Flutter<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"5aab\"><strong>Flutter Samples:&nbsp;<\/strong><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/flutter\/samples\/blob\/master\/INDEX.md\" target=\"_blank\">https:\/\/github.com\/flutter\/samples<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"4768\"><strong>Flutter Cookbook:&nbsp;<\/strong><a href=\"https:\/\/flutter.dev\/docs\/cookbook\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/flutter.dev\/docs\/cookbook<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"03bc\"><strong>Github Awesome-Flutter<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/Solido\/awesome-flutter\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/github.com\/Solido\/awesome-flutter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/basarozcan\/awesome-flutter\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/github.com\/basarozcan\/awesome-flutter<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"84af\"><strong>Flutter challenge series&nbsp;<\/strong>has been building by&nbsp;<a href=\"https:\/\/medium.com\/@mattcarroll\">Matt Carroll<\/a>&nbsp;who is owners of&nbsp;<a href=\"https:\/\/medium.com\/fluttery\">Fluttery<\/a>&nbsp;(Youtube channel&nbsp;<a href=\"https:\/\/www.youtube.com\/fluttery\" rel=\"noreferrer noopener\" target=\"_blank\">https:\/\/www.youtube.com\/fluttery<\/a>)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"0a7a\"><strong>Blogs&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/medium.com\/flutter-io\">Flutter io<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/flutterdoc.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Flutter doc<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/flutter-community\">Flutter community<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/flutterpub\">Flutter Pub<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"4631\"><a rel=\"noreferrer noopener\" href=\"https:\/\/flutterstudio.app\/\" target=\"_blank\"><strong>App builder<\/strong><\/a><strong>:<\/strong>&nbsp;It is an amazing tool to build the Flutter UI online that mean you only need choose your UI widget and drag to screen -&gt; You can get the source code for your app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"2379\">The&nbsp;<a href=\"https:\/\/medium.com\/FlutterPub\"><strong>Flutter Pub<\/strong><\/a>&nbsp;is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts, etc. about this great<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What&#8217;s next<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Learn Dart<\/strong><br>Go to&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/dart.dev\/guides\" target=\"_blank\">Dart<\/a> guides and see a preview of the four most visited websites. Initially, these two are worth focusing on:&nbsp;<em>Language tour<\/em>&nbsp;and&nbsp;<em>Language samples<\/em>. A complete and detailed Dart course supported by examples can also be found&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=F3JuuYuOUK4\" target=\"_blank\">here<\/a>. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Install Flutter SDK &#8211; Prepare IDE<\/strong><br>The entire <a rel=\"noreferrer noopener\" href=\"https:\/\/docs.flutter.dev\/get-started\/install\" data-type=\"URL\" data-id=\"https:\/\/docs.flutter.dev\/get-started\/install\" target=\"_blank\">process&nbsp;<\/a>is described step by step depending on the system on which we want to install Flutter. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Study Material Design Concept<\/strong><br>If we want to create user-friendly interfaces, it is important to read&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/m3.material.io\/\" target=\"_blank\">material design rules.&nbsp;<\/a><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Widgets<\/strong><br>Widgets are an indispensable part of Flutter. You can browse&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/docs.flutter.dev\/reference\/widgets\" target=\"_blank\">them<\/a>&nbsp;alphabetically.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>State Management and Project Architecture<\/strong><br>Read the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/bloclibrary.dev\/#\/gettingstarted\" target=\"_blank\">bloc documentation<\/a>. However, if you decide to take a different approach, you can preview other&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/docs.flutter.dev\/development\/data-and-backend\/state-mgmt\/options\" target=\"_blank\">possible solutions<\/a>.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>API Calls and Database Integration<\/strong><br>The Pub provides great packages such as:&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/packages\/http\" target=\"_blank\">http<\/a>&nbsp;or&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/packages\/dio\" target=\"_blank\">dio<\/a>&nbsp;to perform HTTP requests.&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/pub.dev\/packages\/hive\" target=\"_blank\">Hive<\/a>&nbsp;is a lightweight and blazing fast key-value database written in pure Dart. You should also consider integrating with <a href=\"https:\/\/firebase.flutter.dev\/docs\/overview\/\">Firebase<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Links<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/flutterbyexample.com\/\">Flutter by Example<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\" (\u00f6ffnet in neuem Tab)\" href=\"https:\/\/startflutter.com\/themes\/\" target=\"_blank\">https:\/\/startflutter.com\/themes\/<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\"https:\/\/uiflutter.com\/ (\u00f6ffnet in neuem Tab)\" href=\"https:\/\/uiflutter.com\/\" target=\"_blank\">https:\/\/uiflutter.com\/<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\" (\u00f6ffnet in neuem Tab)\" href=\"https:\/\/flutterawesome.com\/tag\/templates\/\" target=\"_blank\">https:\/\/flutterawesome.com\/tag\/templates\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/pub.dev\/flutter\">https:\/\/pub.dev\/flutter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codelabs.developers.google.com\/\">https:\/\/codelabs.developers.google.com\/<\/a><\/li>\n<\/ul>\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>Installation Installation of Flutter Details are here Installation of Dart SDK Details are here Create your first App Copied from here and here Create the starter Flutter app Run Flutter App on the Web Run Flutter App on Android Emulator Read More Official website:&nbsp;https:\/\/flutter.io\/&nbsp;will supply from step by step to install and start with the simple example. Dart language Flutter training online Google CodeLab: https:\/\/codelabs.developers.google.com\/?cat=Flutter Flutter Samples:&nbsp;https:\/\/github.com\/flutter\/samples Flutter Cookbook:&nbsp;https:\/\/flutter.dev\/docs\/cookbook Github Awesome-Flutter Flutter challenge series&nbsp;has been building by&nbsp;Matt Carroll&nbsp;who is owners of&nbsp;Fluttery&nbsp;(Youtube channel&nbsp;https:\/\/www.youtube.com\/fluttery) Blogs&nbsp; App builder:&nbsp;It is an amazing tool to build the Flutter UI online that mean you only need choose [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6254,"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-1166","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\/2018\/07\/00_header_flutter.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/1166","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=1166"}],"version-history":[{"count":9,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/1166\/revisions"}],"predecessor-version":[{"id":9484,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/1166\/revisions\/9484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/6254"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=1166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=1166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=1166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}