{"id":1292,"date":"2021-07-07T13:36:37","date_gmt":"2021-07-07T13:36:37","guid":{"rendered":"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/?p=1292"},"modified":"2021-07-11T14:15:18","modified_gmt":"2021-07-11T14:15:18","slug":"dart-een-taal-die-je-al-kent","status":"publish","type":"post","link":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/2021\/07\/07\/dart-een-taal-die-je-al-kent\/","title":{"rendered":"Dart: Een Taal Die Je Al Kent"},"content":{"rendered":"<p>Dit is een vervolg op het <a href=\"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/2021\/07\/02\/wat-de-piep-is-flutter\/\" target=\"_blank\" rel=\"noopener\">eerste deel<\/a><\/p>\n<p>We gaan nu in op de daadwerkelijke taal, die dit blijkbaar allemaal mogelijk maakt.<\/p>\n<p>Dart is een zogenaamde conservatieve programmeer taal. Niet ontwikkeld om allerlei nieuwe zaken te tonen, maar meer om een voorspelbaar en stabiele programmeer omgeving te maken. Komt van Google uit 2011, met als doel om JavaScript als de taal van het web van de troon af te stoten.<\/p>\n<p>Dit cookbook doet een aanname dat je bekend bent met C-style talen, maar dat ben ik niet. Zal misschien wat extra achtergrond informatie nodig hebben, maar de uitleg die ze overslaan zoals If statements, loops en switches zijn natuurlijk heel erg bekend en niet alleen maar in de C wereld bekend.<\/p>\n<p>In het boek wordt gezegd dat je via een<a href=\"https:\/\/dartpad.dartlang.org\/\" target=\"_blank\" rel=\"noopener\"> online dart platform<\/a> kunt gaan, of dat je een VS of IntelliJ IDE moet gebruiken. Omdat ik het meeste werk verricht met Atom, heb ik natuurlijk gezocht of er een Dart plugin voor Flutter \/ Dart aanwezig is. Deze heb ik gevonden. Met de meeste downloads heb ik opgehaald en daarbij werd ook een toolbar geinstalleerd. De plugin herkende zelf al de SDK installatie met Flutter die ik op de schijf had staan, dus dat leek goed te gaan:<\/p>\n<figure style=\"width: 459px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-1293 size-full\" src=\"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-07-at-15.34.01.png\" alt=\"\" width=\"459\" height=\"160\" srcset=\"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-07-at-15.34.01.png 459w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-07-at-15.34.01-300x105.png 300w\" sizes=\"(max-width: 459px) 100vw, 459px\"><figcaption class=\"wp-caption-text\">Atom Dart Plugin<\/figcaption><\/figure>\n<h5>Variabelen declareren &#8211; var vs final vs const<\/h5>\n<p>variabelen zijn nodig om input op te slaan, iets aan te passen of met deze input te doen en dan later als output mee terug te geven. Zonder variablen is dit dus niet mogelijk.<\/p>\n<p>Een nieuwe trend, is blijkbaar niet-wijzigbare-variabelen. Dus eenmaal geset: that is it! Dit is veiliger, hebben geen side effects en leiden tot minder bugs als gevolg.<\/p>\n<p>In het volgend stuk gaan we een klein programma maken, dat variabelen declareert in de 3 verschillende manieren dat Dart toestaat:<\/p>\n<ol>\n<li>var<\/li>\n<li>final<\/li>\n<li>const<\/li>\n<\/ol>\n<p>ga naar <a href=\"https:\/\/dartpad.dartlang.org\/\" target=\"_blank\" rel=\"noopener\">DartPad<\/a><\/p>\n<figure id=\"attachment_1296\" aria-describedby=\"caption-attachment-1296\" style=\"width: 700px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-1296 size-large\" src=\"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-07-at-22.17.20-1024x500.png\" alt=\"\" width=\"700\" height=\"342\" srcset=\"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-07-at-22.17.20-1024x500.png 1024w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-07-at-22.17.20-300x146.png 300w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-07-at-22.17.20-768x375.png 768w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-07-at-22.17.20-700x342.png 700w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-07-at-22.17.20.png 1157w\" sizes=\"(max-width: 700px) 100vw, 700px\"><figcaption id=\"caption-attachment-1296\" class=\"wp-caption-text\">dartpad<\/figcaption><\/figure>\n<h5>Hoe dan?<\/h5>\n<p>Haal alles weg uit de main.dart die automatisch is gemaakt.<\/p>\n<p>Een main function toevoegen, wat voor elk Dart programma het beginpunt is:<\/p>\n<blockquote>\n<pre><code class=\" language-markup\" data-code-index=\"0\">main() {\r\n variablePlayground();\r\n}<\/code><\/pre>\n<\/blockquote>\n<p>Deze code kan niet uitgevoerd worden, omdat de functie variablePlayground() nog niet gedefinieerd is. Deze functie is een hub(?) voor alle andere voorbeelden in dit playbook recept.<\/p>\n<blockquote>\n<pre class=\" language-markup\"><code class=\" language-markup\" data-code-index=\"1\">void variablePlayground() {\r\n basicTypes();\r\n untypedVariables();\r\n typeInterpolation();\r\n immutableVariables();\r\n}<\/code><\/pre>\n<\/blockquote>\n<p>void geeft aan dat er niets terugkomt uit deze functie. Dit is bij andere talen volgens mij ook al zo.<\/p>\n<p>Daarna moet je deze basisTypes defini\u00ebren en het mooie van deze variabelen is dat je ze kunt wijzigen:<\/p>\n<blockquote>\n<pre class=\" language-markup\"><code class=\" language-markup\" data-code-index=\"2\">void basicTypes() {\r\n int four = 4;\r\n double pi = 3.14;\r\n num someNumber = 24601;\r\n bool yes = true;\r\n bool no = false;\r\n int nothing; \r\n\r\n print(four);\r\n print(pi);\r\n print(someNumber);\r\n print(yes);\r\n print(no);\r\n print(nothing == null);\r\n}<\/code><\/pre>\n<\/blockquote>\n<p>Nog steeds kan dit niet uitgevoerd worden, aangezien de 3 andere methodes nog niet bekend zijn.<\/p>\n<p>Zelf heb ik om te testen even wat zaken als comments uitgesloten. Daarmee kon ik iig de uitvoer zien van de print statements:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1298\" src=\"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-08.32.04.png\" alt=\"\" width=\"844\" height=\"579\" srcset=\"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-08.32.04.png 844w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-08.32.04-300x206.png 300w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-08.32.04-768x527.png 768w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-08.32.04-700x480.png 700w\" sizes=\"(max-width: 844px) 100vw, 844px\"><\/p>\n<p>De syntax voor een mutable variable is hetzelfde als in vele andere talen. Eerst het type (int, double etc.) dan de naam en na de = de waarde. Als je geen waarde toekent, dan is het automatisch <em><strong>null<\/strong><\/em>.<\/p>\n<p>Blijkbaar was er in de oudere versie dat je gewoon een variabele zonder instantiatie kon doen, maar daar kan Dart nu niet meer tegen blijkt. Daarom heb ik de onderste print statement er ook uit moeten halen. Deze had ik weer terug gedaan en ik kreeg een warning in DartPad:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1299\" src=\"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-08.46.56.png\" alt=\"\" width=\"586\" height=\"388\" srcset=\"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-08.46.56.png 586w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-08.46.56-300x199.png 300w\" sizes=\"(max-width: 586px) 100vw, 586px\"><\/p>\n<p>Bij view docs stond in ieder geval het volgende vermeld:<\/p>\n<blockquote>\n<pre>not_assigned_potentially_non_nullable_local_variable<\/pre>\n<\/blockquote>\n<p>dat kwam dus doordat hij niet null mocht zijn. Als je dat wel wilt kunnen laten gebeuren, dan moet je achter het type een &#8216;?&#8217; zetten:<\/p>\n<figure id=\"attachment_1301\" aria-describedby=\"caption-attachment-1301\" style=\"width: 760px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-1301 size-full\" src=\"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-18.07.57.png\" alt=\"\" width=\"760\" height=\"570\" srcset=\"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-18.07.57.png 760w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-18.07.57-300x225.png 300w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-08-at-18.07.57-700x525.png 700w\" sizes=\"(max-width: 760px) 100vw, 760px\"><figcaption id=\"caption-attachment-1301\" class=\"wp-caption-text\">int? om hem ook leeg te kunnen laten zijn<\/figcaption><\/figure>\n<p>Dart heeft een speciaal type: <em>dynamic<\/em>, die eigenlijk staat voor de gratis uit de gevangenis komen kaart staat (Monopoly?) maar dan van het types systeem. Je kunt dit type voor je variabele zetten om ervoor te zorgen dat je eigenlijk alles erin kan plaatsen!<\/p>\n<blockquote>\n<pre class=\" language-markup\"><code class=\" language-markup\" data-code-index=\"3\">void untypedVariables() {\r\n dynamic something = 14.2;\r\n print(something.runtimeType); \/\/outputs 'double'\r\n}<\/code><\/pre>\n<\/blockquote>\n<figure id=\"attachment_1303\" aria-describedby=\"caption-attachment-1303\" style=\"width: 206px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-1303 size-full\" src=\"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-09-at-08.41.20.png\" alt=\"\" width=\"206\" height=\"234\" \/><figcaption id=\"caption-attachment-1303\" class=\"wp-caption-text\">dynamic variabele<\/figcaption><\/figure>\n<p>Dart var keyword is net anders dan dynamic. Zodra er een waarde aan de variabele is toegekend, zal Dart het type onthouden! De waarde mag nog steeds gewijzigd worden, maar de type niet meer!<\/p>\n<blockquote>\n<pre class=\" language-markup\"><code class=\" language-markup\" data-code-index=\"4\">void typeInterpolation() {\r\n var anInteger = 15;\r\n var aDouble = 27.6;\r\n var aBoolean = false;\r\n\r\n print(anInteger.runtimeType);\r\n print(anInteger);\r\n\r\n print(aDouble.runtimeType);\r\n print(aDouble);\r\n\r\n print(aBoolean.runtimeType);\r\n print(aBoolean);\r\n}<\/code><\/pre>\n<\/blockquote>\n<figure style=\"width: 156px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-1304 size-full\" src=\"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-09-at-08.49.14.png\" alt=\"\" width=\"156\" height=\"185\" \/><figcaption class=\"wp-caption-text\">var keyword<\/figcaption><\/figure>\n<p>Er zijn nog 2 keywords, voor niet wijzigbare variabelen: <em>final<\/em> en <em>const<\/em>.<\/p>\n<blockquote>\n<pre class=\" language-markup\"><code class=\" language-markup\" data-code-index=\"5\">void immutableVariables() {\r\n final int immutableInteger = 5;\r\n final double immutableDouble = 0.015;\r\n\r\nprint(immutableInteger);\r\nprint(immutableDouble);\r\n \r\n \/\/ Type annotation is optional\r\n final interpolatedInteger = 10;\r\n final interpolatedDouble = 72.8;\r\n\r\n print(interpolatedInteger);\r\n print(interpolatedDouble);\r\n\r\n const aFullySealedVariable = true;\r\n print(aFullySealedVariable);\r\n}<\/code><\/pre>\n<\/blockquote>\n<p>Maar dat moet je natuurlijk niet zomaar geloven, vandaar dat ik gewoon zelf toch nog de interpolatedDouble heb geprobeerd aan te passen:<\/p>\n<figure id=\"attachment_1308\" aria-describedby=\"caption-attachment-1308\" style=\"width: 700px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-1308 size-large\" src=\"http:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-10-at-09.41.04-1024x144.png\" alt=\"\" width=\"700\" height=\"98\" srcset=\"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-10-at-09.41.04-1024x144.png 1024w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-10-at-09.41.04-300x42.png 300w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-10-at-09.41.04-768x108.png 768w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-10-at-09.41.04-700x98.png 700w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-10-at-09.41.04-1120x159.png 1120w, https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-content\/uploads\/sites\/2\/2021\/07\/Screenshot-2021-07-10-at-09.41.04.png 1134w\" sizes=\"(max-width: 700px) 100vw, 700px\"><figcaption id=\"caption-attachment-1308\" class=\"wp-caption-text\">final var kan maar eenmaal geset worden<\/figcaption><\/figure>\n<p>var, final en const kunnen op deze wijze gedeclareerd worden:<\/p>\n<blockquote>\n<pre class=\" language-markup\"><code class=\" language-markup\" data-code-index=\"1\">var animal = 'Duck';\r\nfinal numValue = 42;\r\nconst isBoring = true;<\/code><\/pre>\n<\/blockquote>\n<p>var kan dus gewijzigd worden. final kunnen slechts eenmaal geassigned worden, maar door gebruik van objecten kun je de velden van de objecten wel wijzigen. Const zijn compile time constanten en totaal niet wijzigbaar. Een type toekennen kan alleen bij de final modifier:<\/p>\n<blockquote>\n<pre>final int<code class=\" language-markup\" data-code-index=\"2\">numValue = 42; \/\/ this is ok<\/code> <code class=\" language-markup\" data-code-index=\"2\">\/\/ NOT OK: const int or var int.<\/code><\/pre>\n<\/blockquote>\n<p>Waarom variabelen die niet kunnen wijzigen?<\/p>\n<ol>\n<li>het is sneller<\/li>\n<li>geen side effecten. De meeste bugs in programmeren komt doordat waardes worden gewijzigd en onvoorzien ergens anders ook weer wijzigingen teweeg brengen.<\/li>\n<\/ol>\n<p>2 linkjes die ze geven:<\/p>\n<p>Meer over Dart en de ingebouwde type variabelen:<br>\nhttps:\/\/dart.dev\/guides\/language\/language-tour<\/p>\n<p>Meer aspecten over de Dart taal en hoe te gebruiken voor web en server applicaties:<br>\nhttps:\/\/www.packtpub.com\/web-development\/dart-essentials<\/p>","protected":false},"excerpt":{"rendered":"<p>Dit is een vervolg op het eerste deel We gaan nu in op de daadwerkelijke taal, die dit blijkbaar allemaal mogelijk maakt. Dart is een zogenaamde conservatieve programmeer taal. Niet ontwikkeld om allerlei nieuwe zaken te tonen, maar meer om een voorspelbaar en stabiele programmeer omgeving te maken. Komt van Google uit 2011, met als [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/posts\/1292"}],"collection":[{"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/comments?post=1292"}],"version-history":[{"count":10,"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/posts\/1292\/revisions"}],"predecessor-version":[{"id":1310,"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/posts\/1292\/revisions\/1310"}],"wp:attachment":[{"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/media?parent=1292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/categories?post=1292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.studiostuiterbal.com\/mytidbits\/wp-json\/wp\/v2\/tags?post=1292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}