Mobile Apps4 - FlutterMit Flutter starten

Mit Flutter starten

💡

Dauer: 30 Minuten mit Zeit für die Einrichtung der IDE bzw. Problemlösungen

  • Entwicklungsumgebung einrichten
  • Erstes Flutter-Projekt erstellen und starten
  • Bemerkungen zu Dart

Ziel: Einstieg mit Flutter

Was ist Flutter?

Flutter ist ein Open-Source-Framework von Google, mit dem Apps plattformübergreifend für mobile Geräte, Web und Desktop entwickelt werden können. Die Programmiersprache, die für Flutter verwendet wird, ist Dart.

‼️

Achtung: Im Oktober 2024 wurde Flutter geforked.

Es gibt jetzt zwei Versionen von Flutter:

→ Welche Version wird sich durchsetzen?

Hintergrundinfos: https://getflocked.dev/blog/posts/we-are-forking-flutter-this-is-why/

Entwicklungsumgebung einrichten

Wir werden im Unterricht mit der Cloud-IDE Project IDX (idx.dev) von Google arbeiten, damit wir sofort loslegen können. Diese Umgebung bietet neben der Unterstützung von Flutter in Zukunft wohl auch eine Version von Android Studio im Browser bzw. in der Cloud.

Zur Verwendung von Project IDX wird ein Google-Konto benötigt.

Wer lieber mit einer lokalen Entwicklungsumgebung arbeiten möchte, kann mit Android Studio oder VS Code arbeiten. Mehr Informationen dazu finden sich in der Flutter-Dokumentation.

→ Allerdings sind dazu ein paar Tools herunterzuladen und zu installieren, was etwas dauern kann.

Erstes Flutter-Projekt erstellen und starten

In der Cloud-IDE von Project IDX kann ein neues Flutter-Projekt mit wenigen Klicks erstellt werden. Im Prinzip ist dies selbsterklärend, da die IDE eine Schritt-für-Schritt-Anleitung anbietet.

Wir nennen das Projekt TodosFlutterTIF24 (oder ähnlich)

Achtung: Der Dozent hat eine Referenzversion namens TodosFlutter auf GitHub: https://github.com/behrends/TodosFlutter

‼️

Am Besten funktioniert Project IDX in Chrome.

In manchen Browsern kann es Warnungen zu third-party cookies geben, welche die Nutzung von Project IDX beeinträchtigen.

In diesem Fall gibt es ein Popup mit weiteren Informationen.

→ Wir benötigen die third-party cookies u.a. dazu, um die Vorschau der App in der IDE zu nutzen.

⚠️

Bei Bedarf die Dart-Analytics im Terminal ausschalten:

dart --disable-analytics

Die IDE basiert auf VS Code. Wir können direkt im Browser programmieren und die App auf einem virtuellen Gerät testen.

Das Projekt wird mit der Datei lib/main.dart im Editor geöffnet. Diese Datei enthält den Code für die Startseite der App. Wir sehen die Vorschau der App auf der rechten Seite (Android und Web). Code-Änderungen werden automatisch übernommen (hot reload).

→ Wir nutzen die Android-Vorschau für unsere Todo-App.

Wichtig: Dazu die third-party cookies zulassen! (siehe oben)

Manchmal ist in der Android-Vorschau ein full reload oder sogar ein hard restart notwendig, um die Code-Änderungen zu testen.

Im Oktober 2024 war es noch nicht möglich die Flutter-App aus Project IDX direkt auf einem „echten“ Android-Gerät zu testen. Dazu muss Flutter lokal auf dem Rechner installiert werden.

Dokumentation zu Project IDX: https://developers.google.com/idx/guides

Bemerkungen zu Dart

Dart ist die Programmiersprache, die für Flutter verwendet wird. Dart ist eine objektorientierte Programmiersprache, die von Google entwickelt wurde. Wer bereits mit Java, JavaScript oder C# gearbeitet hat, wird sich in Dart schnell zurechtfinden. Im Vergleich zu Kotlin ist Dart deutlich näher an Java.

Hier ein paar Bemerkungen zu Dart im Vergleich zu Java (laut ChatGPT 😉):

  • Objektorientierte Programmierung: Dart ist eine objektorientierte, klassenbasierte und statisch typisierte Sprache, ähnlich wie Java.
  • Optionale Typisierung: Dart unterstützt statische Typen, kann aber auch dynamisch typisiert verwendet werden. Der Typ var oder dynamic ermöglicht es, Typen offener zu halten.
  • Null-Safety: Dart unterstützt Null-Safety standardmäßig. Variablen sind per Default “non-nullable”. Um Nullwerte zuzulassen, muss ? verwendet werden (z.B. String?).
  • Asynchrone Programmierung: Verwendung von async und await für asynchrone Operationen, ähnlich wie in modernen Java-Versionen und in JavaScript.
  • Keine new-Schlüsselwortpflicht: Das new-Schlüsselwort ist optional beim Erstellen von Objekten.
  • Sichtbarkeit: Private Mitglieder werden durch ein vorangestelltes _ gekennzeichnet statt durch Zugriffsmodifikatoren wie private oder protected.
  • Mixins statt Mehrfachvererbung: Dart unterstützt Mixins zur Wiederverwendung von Code, da Mehrfachvererbung nicht unterstützt wird.
  • Funktionale Programmierung: Funktionen sind First-Class-Objekte und können wie Variablen behandelt werden.
  • Collections: Eingebaute Unterstützung für Listen, Maps und Sets mit Literalen und Generics ähnlich wie in Java.
  • Operatorüberladung: Dart unterstützt Operatorüberladung, was in Java nicht möglich ist.
  • Einstiegspunkt: Die main()-Funktion dient als Einstiegspunkt der Anwendung, wie in Java.

Nützliche Links zu Dart:

🤔

Warum Google in nativer Android-Entwicklung auf Kotlin setzt, aber in Flutter auf Dart, ist eine interessante Frage…

4 - FlutterAufbau einer Flutter-App