# DART-Tutorial – erste Schritte ganz praktisch Die junge **Programmiersprache DART** hat bereits Fuß gefasst, vor allem in der Programmierung von Apps für mobile Anwendungen. Das Unternehmen Google hat mit **Flutter** ein Software Development Kit (SDK) aufgesetzt, das DART nutzt, und so die Anwendung und Verbreitung dieser Programmiersprache befördert. Ein wesentlicher Pluspunkt ist, dass sich damit **Apps für alle mobilen Betriebssysteme** – also Apple iOS, Google Android oder Microsoft Windows Phone – programmieren lassen. Lernen Sie Programmieren mit DART – unser DART-Tutorial führt Sie mit ersten Schritten in die Welt von Googles Programmiersprache ein. Das ist gar nicht so schwer. Mehr über die Sprache an sich bietet unser Ratgeber-Artikel „[Was ist DART](https://www.ionos.de/digitalguide/websites/web-entwicklung/dart-programmiersprache/ "Dart: Programmiersprache")?“. Weiterführende Informationen erhalten Sie im Artikel über Googles Software Development Kit [Flutter](https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-flutter/ "Was ist Flutter?"). ## Der Ursprung von DART Angetreten war DART ursprünglich, um **Schwachstellen von JavaScript zu überwinden**, die sich aus Sicht der Entwickler nicht mehr innerhalb dieser etablierten Programmiersprache bearbeiten ließen. So begann die Suche nach Wegen, bestimmte innere Logiken zu vereinfachen oder zusammenzufassen, ohne dabei die Vielfalt der Möglichkeiten aus dem Auge zu verlieren. Um ein Beispiel aufzuführen: JavaScript hat ```none getElementsById() getElementsByTagName() getElementsByName() getElementsByClassName() querySelector() querySelectorAll() document.links document.images document.forms document.scripts formElement.elements selectElement.options ``` In **DART** bleibt davon übrig: ```none elem.query('#foo'); elem.queryAll('.foo'); ``` ## Die ersten Schritte mit DART Eine Programmiersprache besteht aus einer Welt von „Vokabeln“, mit denen Daten strukturiert und Abläufe (Algorithmen) gestaltet werden. Dazu bedient sich die Sprache einer festgelegten Anzahl von Begriffen – den **Variablen**, die nicht zu anderen Zwecken verwendet werden dürfen. Einige Beispiele dafür sind in DART „var“, „int“ „if“, „else“ oder „while“. Mehr Details zur Architektur von Programmiersprachen lesen Sie in unserem Ratgeber zu [Internet-Programmiersprachen](https://www.ionos.de/digitalguide/websites/web-entwicklung/internet-programmiersprachen/ "Internet-Programmiersprachen"). Aus der Kombination von Variablen, Operatoren, Bedingungen, Funktionen und vielem mehr entsteht der Programmablauf, an dessen Ende ein Ergebnis ausgegeben wird. ## DART ganz praktisch Wir stellen Ihnen erste und einfache, nachvollziehbare Beispiele zum Lernen von DART-Programmieren vor, die Sie dann nach Belieben erweitern und mit denen Sie selbst experimentieren können. Jede Programmroutine beginnt mit dem Aufruf der Hauptfunktion – hier am Beispiel des Klassikers in der Code-Welt: ```none void main () { print("Hallo Welt!"); // Druckbefehl mit Ausgabe: Hallo Welt } ``` Vor der Funktion „main“ steht der Rückgabetyp „void“, der nichts zurückgibt. Die **runden Klammern** „()“ deuten auf eine **Funktion** hin, und innerhalb der **geschweiften Klammern** „{ … }“ wird der DART-**Code ausgeführt** – hier der Befehl, etwas auf dem Bildschirm auszugeben. Was hinter den beiden **Schrägstrichen** „//“ steht, ist ein **Kommentar**, der unsichtbar bleibt; das geht ebenso mit „/\* das ist ein mehrzeiliger Kommentar …\*/“ – bekannt zum Beispiel aus PHP. Damit kann man den eigenen Code für sich oder andere Entwickler strukturiert kommentieren, was die Team-Arbeit an bestehenden Projekten wesentlich erleichtert. --- ### Hinweis Wie in Java, C oder PHP müssen alle DART-Statements mit einem Semikolon abgeschlossen werden. --- Die nachfolgenden Beispiele können Sie einfach selbst ausprobieren. Dazu nutzen Sie die kostenlose Open-Source-Plattform [DartPad](https://dart.dev/#try-dart "DART im Browser ausprobieren"). Dieses Pad hat u. a. den Vorteil, dass es die Zeilen des Programms nummeriert und ggf. Fehlermeldungen ausgibt. Zudem sind einige Programmierbeispiele in einem Drop-down-Menü verfügbar. In den weiteren Code-Beispielen im Text wird „void main() {…}“ nicht mehr mitaufgeführt. ### Variablen definieren und nutzen Mit Variablen werden feste Größen für das Programm definiert. Wir beginnen mit Zahlen. ```none var meineGroesse = 174; ``` Damit ist eine neue **Variable** „meineGroesse“ festgelegt worden. Ihr wurde der **Wert** „174“ zugewiesen. Diese Variable bleibt im Programmablauf mit Ihrem Wert erhalten, bis sie aktiv durch Operatoren oder Funktionen verändert wird. Um den **Wert** der Variablen **auszugeben**, kommt der Befehl „**print**“ ins Spiel. ```none var meineGroesse = 174; print(meineGroesse); int deineGroesse = 174; print(deineGroesse); double dieseGroesse = 1.74; print(dieseGroesse); dynamic eineGroesse = 'Hundertvierundsiebzig' + ': ' + '174'; print(eineGroesse); ``` Das ergibt im DartPad per Befehl „print“ die folgenden Ausgaben aus den Zeilen 3, 6, 9 und 12 in der Konsole: [![Bild: DART-Programmieren lernen: print-Befehl](https://www.ionos.de/digitalguide/fileadmin/_processed_/d/6/csm_DE-dart-tutorial-print-befehl_acb673ebac.webp "DART-Programmieren lernen: print-Befehl")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-dart-tutorial-print-befehl.jpg) Für Variablen können (fast) beliebige Bezeichnungen gewählt werden. Das vereinfacht das Lesen und Korrigieren des Programm-Codes. Die **Variablen in DART** nehmen bestimmte **Typen** an. Das können Ganzzahlen („int“) oder Gleitkommazahlen („double“) sein. Der Variablentyp „dynamic“ kann im Programmablauf verschiedene Werte und Ausdrücke annehmen. Dagegen werden Leerzeilen, Tabulatoren oder Absätze beim Abarbeiten der Routine nicht berücksichtigt. Deshalb stehen die Werte rechts in der Konsole auch direkt untereinander. Der Versuch, einem bestimmten Variablentyp einen **falschen Wert** zuzuweisen, erzeugt eine **Fehlermeldung** mit Fehlerbeschreibung im DartPad: ```none int deineGroesse = 1.74; // Ganzzahl wird erwartet, Gleitkommazahl wird eingegeben print(deineGroesse); ``` [![Bild: DART-Programmieren lernen: Fehlerausgabe](https://www.ionos.de/digitalguide/fileadmin/_processed_/9/f/csm_DE-dart-tutorial-fehlerausgabe_8973fd19be.webp "DART-Programmieren lernen: Fehlerausgabe")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-dart-tutorial-fehlerausgabe.jpg) Einen falsch zugewiesenen Wert meldet das DartPad als „1 issue(s)“. Im Beispiel kann also eine Gleitkommazahl nicht der Ganzzahl-Variablen zugewiesen werden. Der Fehler tritt in Zeile 2 des Programmablaufs auf, die fehlerhafte Zahl ist orange unterstrichen. --- ### Hinweis Die Bezeichnungen (Identifier) für die verwendeten Variablen dürfen keine Schlüsselwörter enthalten. Auch Zahlen am Anfang sowie Leer- und Sonderzeichen sind nicht zugelassen – Ausnahmen sind Unterstrich „\_“ und Dollarzeichen „$“. Die Bezeichner berücksichtigen Groß- und Kleinschreibung und müssen einzigartig sein. --- ### Zeichenfolgen im DART-Tutorial Mit **Zeichenfolgen**, dem Datentyp „**String**“ (Achtung: mit großem S am Anfang), lassen sich beliebige Zeichen in der DART-Programmierung verarbeiten. In diesem Zusammenhang lernen Sie hier auch gleich, mehrzeilig formatierte Zeilen in DART zu programmieren. ```none String text1 = 'Das ist einzeiliger Text'; String text2 = '''Das ist ein mehr- zeiliger Text mit Umbruch'''; print(text1); print(text2); ``` [![Bild: DART-Programmieren lernen: Ein- und mehrzeiliger Text](https://www.ionos.de/digitalguide/fileadmin/_processed_/7/3/csm_DE-dart-tutorial-ein-und-mehrzeiliger-text_a55f5d9002.webp "DART-Programmieren lernen: Ein- und mehrzeiliger Text")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-dart-tutorial-ein-und-mehrzeiliger-text.jpg) Ein- und mehrzeiliger Text in DART; die Umsetzung erfolgt durch die Verwendung einer festgelegten Anzahl von Anführungszeichen. Die Wiedergabe von Text per String erfolgt durch Umschließen des gewünschten Inhalts mit einfachen oder normalen Anführungszeichen: ' oder ". Wird der Text jedoch mit **dreifach hintereinander angeordneten Anführungszeichen** (''' oder """) begonnen und beendet, gibt DART den Text an der umbrochenen Stelle auch als Umbruch aus. Damit steht eine Möglichkeit zum Formatieren der Ausgabe zur Verfügung. --- ### Tipp **Typografische Anführungszeichen** (meist in der korrekten englischen Version) lassen sich ganz einfach in **Windows** mit den Tastenkombinationen \[Alt\] + 0147 (Anführung) und \[Alt\] + 0148 (Abführung) im Text platzieren. Diese werden in einem String von DART auch als solche ausgegeben. In **macOS** erreichen Sie diese Anführungszeichen mit \[Alt\] +\[Shift\] + \[W\] und \[Alt\] + \[2\]. --- ### Zahlenakrobatik mit DART Von der Festlegung von Variablen ist der Weg nicht weit zu **Berechnungen** mit Variablen. Dabei können Zahlen oder auch Ausdrücke zusammengerechnet werden. Um Ergebnisse zu berechnen, nutzt DART **arithmetische Operatoren**. Eine Aufgabe könnte beispielsweise darin bestehen, dass **ein Artikel im Onlineshop** ausgewählt wurde, der Kunde jedoch **drei Stück** davon kaufen möchte. Also muss in der Warenkorb-Funktion der Einzelpreis mit „3“ multipliziert werden und am Ende der Berechnung der Gesamtpreis dargestellt sein. Am nachfolgenden Code kann man die Verwendung verschiedener Methoden zur Zusammenführung von Daten sehen – und dazu die Kommentare in den relevanten Zeilen: ```none String produkt = 'Kalender'; String waehrung = 'EUR'; String fuer = 'für'; // drei Strings für spätere Verwendung in der Ausgabe double einzelPreis = 7.96; // Gleitkommazahl Einzelpreis für einen Kalender int anzahl = 3; // Ganzzahl für die Anzahl der bestellten Kalender var gesamtPreis = (anzahl*einzelPreis); //Berechnung des Gesamtpreises mit Multiplikator * var rgBetrag = '$gesamtPreis $waehrung'; /* Zusammenführung zweier Werte in neue Variable. */ var ergebnis = '$anzahl $produkt'; //ebenso print (rgBetrag); // Erzeugung der Bildschirmausgaben print (fuer); print (ergebnis); ``` [![Bild: DART-Programmieren lernen: Einfache Berechnung](https://www.ionos.de/digitalguide/fileadmin/_processed_/4/9/csm_DE-dart-tutorial-einfache-berechnung_1ad3cd06b8.webp "DART-Programmieren lernen: Einfache Berechnung")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-dart-tutorial-einfache-berechnung.jpg) Ein Beispiel für eine einfache Berechnung in Kombination mit Textbausteinen. Es kommen Strings, Gleitkomma- und Ganzzahlen sowie die **Zusammenführung von Elementen** der Programmierung **zu neuen Variablen** vor. Eine Besonderheit ist beim Zusammenführen von zwei existierenden Variablen in einer neuen Variable zur Ausgabe auf dem Bildschirm zu beachten: Den **bereits definierten Variablen** wird in diesem Falle ein **Dollarzeichen „$“** vorangestellt (Zeilen 8 und 9 in der obigen Abbildung des DartPads). ### Bedingungen stellen Beim Programmieren, spielen Bedingungen eine wichtige Rolle. Hier lernen Sie das Programmieren einer Bedingung mit DART. Eine Bedingung führt immer zu einer Entscheidung, im Sinn von: Wenn (**if**) Fall A eintritt, erscheint Anzeige X auf dem Bildschirm; tritt Fall B ein (**elseif**), dann kommt die Anzeige Y; wenn beide nicht zutreffen (**else**), wird Anzeige Z ausgegeben. Mit den in Klammern dargestellten DART-Befehlen entsteht daraus der folgende Code: ```none var werkzeug = 'Handschuh'; if (werkzeug == 'Zange' || werkzeug == 'Lineal') { print('Das ist Werkzeug.'); } else if (werkzeug == 'Pinsel') { print('Das ist ein Malerwerkzeug.'); } else { print('Das ist kein Werkzeug.'); } ``` Im DartPad sieht das dann so aus: [![Bild: DART-Programieren lernen: Einsatz von Bedingungen](https://www.ionos.de/digitalguide/fileadmin/_processed_/6/2/csm_DE-dart-tutorial-einsatz-von-bedingungen_72f679a145.webp "DART-Programieren lernen: Einsatz von Bedingungen")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-dart-tutorial-einsatz-von-bedingungen.jpg) Bedingungen erzwingen geplante Ausgaben auf dem Bildschirm. Erweitern Sie Ihr eigenes Wissen im DART-Tutorial und wechseln Sie im DartPad das Wort „Handschuh“ einmal gegen „Zange“, „Lineal“ oder „Pinsel“ aus und beobachten Sie die Veränderungen der programmierten Ausgabe auf der Konsole. Das lässt sich beliebig erweitern und auf diverse Fälle anwenden. Neu erscheint hier erstmals der **Operator** „||“. Diese doppelte Pipe steht für den logischen Begriff „oder“, der in DART **nicht als Wort „OR“** verwendet werden darf. ### Auf und Ab geht auch mit DART Um den nachfolgenden Abschnitt zu programmieren, müssen wir die sogenannten **Inkremente** und **Dekremente** in DART erlernen. Es handelt sich um das schrittweise Vergrößern oder Verkleinern eines Ausgangswerts. Im Beispiel wird die Zahl 50 mit den Operatoren „++“ und „--“ verändert. ```none var aufUndAb = 50; print (aufUndAb); print('----'); ++aufUndAb; print (aufUndAb); print('----'); aufUndAb++; print (aufUndAb); print('----'); --aufUndAb; print (aufUndAb); print('----'); aufUndAb--; print (aufUndAb); ``` [![Bild: DART-Programmieren lernen: Eine Zahl erhöhen und erniedrigen](https://www.ionos.de/digitalguide/fileadmin/_processed_/e/0/csm_DE-dart-tutorial-einezahl-erhoehen-und-erniedrigen_78c3f63f42.webp "DART-Programmieren lernen: Eine Zahl erhöhen und erniedrigen")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-dart-tutorial-einezahl-erhoehen-und-erniedrigen.jpg) Die Zahl 50 wird definiert erhöht und wieder erniedrigt. Hier sehen Sie auch, dass man eine einfache Zeichenkette auch ohne vorherige Definition ausgeben kann, indem sie in runden Klammern mit Anführungszeichen per „print“ in den Programmcode eingefügt wird. Das dient hier lediglich der optischen Strukturierung des Ergebnisses. Mit diesem Wissen sind Sie vorbereitet, Schleifen zu programmieren. ### Wir drehen uns im Kreis: Schleifen in DART Schleifen sind ebenso wichtige Programmroutinen, die immer wieder benötigt werden, um beispielsweise **Vergleiche mit vorhandenen Größen** anzustellen. Dazu bedient man sich folgender „Formulierung“: Wir haben den Wert A; verändere diesen Wert solange, bis die Größe (der Zustand) B erreicht ist. Als DART-Code sieht das so aus: ```none String bezeichnung = ' Stück'; var stueck = 3; while (stueck < 12) { var gesamt = '$stueck $bezeichnung'; print(gesamt); stueck++; } ``` Was macht das DartPad damit? [![Bild: DART-Programmieren lernen: Schleifen](https://www.ionos.de/digitalguide/fileadmin/_processed_/a/4/csm_DE-dart-tutorial-schleifen_3ef98ee286.webp "DART-Programmieren lernen: Schleifen")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-dart-tutorial-schleifen.jpg) Schleifen werden durchlaufen, bis eine definierte Bedingung erfüllt ist. In diesem Beispiel könnte man auch wieder Bedingungen einsetzen, wenn sich beispielsweise Wörter in Einzahl und Mehrzahl unterscheiden: ```none int menge = 1; var artikelEinzahl = 'Bluse'; var artikelMehrzahl = 'Blusen'; if (menge == 1) { print(artikelEinzahl); } else { print(artikelMehrzahl); } } ``` Um mit DART programmieren zu lernen, kopieren Sie dieses Code-Beispiel in das DartPad und ändern die Ganzzahl-Variable „menge“, sodass der Artikel „Bluse“ in der Einzahl oder in der Mehrzahl ausgegeben wird. ## DART-Operatoren auf einen Blick Sie haben nun schon einige **Operatoren** zum Programmieren in DART erlernt. Mit der nachfolgenden Tabelle geben wir Ihnen den Überblick über die wichtigsten verfügbaren Operatoren. In der Tabelle ist die Variable „Muster“ auf den Wert 35 gesetzt. ```none var muster = 35; ```
Operator-Typ Bezeichnung Symbol Beispiel Ausgabe
Rechnen Addition + var muster + 2; 37
Substraktion - var muster - 2; 33
Multiplikation \* var muster \* 3; 105
Division / var muster / 7; 5
Ganzzahl-Division ~/ var muster ~/ 7; 11
Erhöhung um += var muster += 6; 41
Verminderung um -= var muster -= 7; 28
Multiplikation mit \*= var muster \*= 2; 70
Division durch /= var muster /= 7; 5
Vergleichen Identisch == var muster == 35; True
Nicht identisch != var muster != 44; True
Kleiner als < var muster < 44; true
Kleiner gleich als <= var muster <= 33; False
Größer als > 44 > var muster; True
Größer gleich als >= var muster>=23; false
Verändern Aufsteigend ++ ++var muster; 36
Aufsteigend ++ var muster++; 36
Absteigend -- --var muster; 34
Absteigend -- var muster--; 34
Restwert % %var muster%3; 2
Logik UND && muster1 && muster2 … und
ODER ll muster1 ll muster2 … oder
Negation ! muster1 ! muster2 … ist nicht
Bedingungen Wenn-Dann ? … : var y = muster < 34 ? 15 : 10; 10
Wenn-Dann ? … : var y = muster < 36 ? 15 : 10; 15
Prüfung auf Null ?? var y = muster ?? 9; 35
Prüfung auf Null ?? var z = 0 ?? muster; 35
Mit diesem Basiswissen können Sie nun weitere Schritte in DART gehen, und der Weg zum Vorhaben, [die eigene App zu programmieren](https://www.ionos.de/digitalguide/websites/web-entwicklung/die-eigene-app-erstellen-programmieren-vs-app-baukasten/ "Die eigene App erstellen: Programmieren vs. App-Baukasten"), ist nicht mehr ganz so weit. This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/dart-programmierung-tutorial/](https://www.ionos.de/digitalguide/websites/web-entwicklung/dart-programmierung-tutorial/) for AI/LLM consumption.