Was ist flutter?

Flutter ist ein Open-Source-Software-Development-Kit (SDK) für die Entwicklung von Apps für mobile, Web und Desktop-Plattformen, die auf der Dart-Programmiersprache basieren. Es wurde von Google entwickelt und bietet eine schnelle und effiziente Möglichkeit, benutzerfreundliche Apps mit einer modernen und schnellen Benutzeroberfläche zu erstellen. Flutter nutzt die Dart-Programmiersprache. Flutter bietet eine umfassende Bibliothek an UI-Komponenten und Tools, die es Entwicklern ermöglichen, ihre Apps mit Animationen, Transitions, Shadow Effects, Cupertino- und Material-Design-Elementen anzureichern. Mit Flutter können Entwickler ihre Apps auch mit benutzerdefinierten Widgets erstellen, die aus einer Kombination von vordefinierten und selbst erstellten Komponenten bestehen. Durch den Einsatz moderner Technologien und seiner innovativen Architektur hat Flutter eine sehr hohe Leistung und eine sehr niedrige Latenzzeit. Es verwendet eine eigene Grafik-Engine, die es Entwicklern ermöglicht, native Geschwindigkeit und Animationen zu erreichen, ohne dass eine native Plattform-Komponente erforderlich ist. Insgesamt ist Flutter eine schnelle, leistungsstarke und flexible Plattform für die App-Entwicklung, die es Entwicklern ermöglicht, benutzerfreundliche, performante und ansprechende Apps für mehrere Plattformen zu erstellen.

Mit Flutter kann man native Apps für folgende Plattformen entwickeln: • iOS • Android • Windows • MacOS • Linux • Web (in Form von Progressive Web Apps) Dies bedeutet, dass man mit Flutter eine einzige Codebasis verwenden kann, um Apps für mehrere Plattformen zu entwickeln. Dies spart Zeit und erhöht die Effizienz im Vergleich zur Entwicklung von Apps für jede Plattform separat.

Widgets

Stateless Widgets


In Flutter sind StatelessWidget Widgets Komponenten, die keinen Zustand haben. Das bedeutet, dass sie sich nicht ändern und immer das gleiche Aussehen und Verhalten aufweisen, unabhängig von Benutzereingaben oder Systemereignissen.
StatelessWidget werden normalerweise verwendet, um Teile der Benutzeroberfläche darzustellen, die statisch sind und nicht auf Benutzerinteraktionen oder andere äußere Ereignisse reagieren müssen. Zum Beispiel könnte ein StatelessWidget eine Schaltfläche oder einen Textbereich darstellen.
Ein StatelessWidget wird erstellt, indem die Klasse StatelessWidget implementiert wird und die Methode build überschrieben wird. Die build-Methode gibt ein Widget-Objekt zurück, das die Benutzeroberfläche des StatelessWidget darstellt.
Im Vergleich zu StatefulWidgets sind StatelessWidgets einfacher zu verstehen und zu implementieren, da sie keine dynamische Verhaltensänderungen aufweisen. Außerdem sind sie schneller zu rendern, da ihr Zustand nicht geprüft werden muss.


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

Statefull Widgets

In Flutter sind StatefulWidgets Widgets, die einen Zustand haben, d.h. sie können sich ändern und reagieren auf Benutzereingaben oder andere Systemereignisse.
StatefulWidget werden normalerweise verwendet, um Teile der Benutzeroberfläche darzustellen, die dynamisch sind und auf Benutzerinteraktionen oder andere äußere Ereignisse reagieren müssen. Zum Beispiel könnte ein StatefulWidget ein Textfeld sein, das den Benutzertext anzeigt und aktualisiert, wenn der Benutzer Text eingibt.
Ein StatefulWidget wird in zwei Teilen implementiert: als StatefulWidget-Klasse und als Zustandsklasse. Die StatefulWidget-Klasse implementiert das äußere Aussehen und Verhalten des Widgets, während die Zustandsklasse den internen Zustand des Widgets verwaltet.
Wenn sich der Zustand eines StatefulWidget ändert, wird die Methode build der Zustandsklasse aufgerufen, um eine neue Darstellung des Widgets zu erstellen. Diese Methode gibt ein Widget-Objekt zurück, das die Benutzeroberfläche des StatefulWidget darstellt.
Im Vergleich zu StatelessWidgets sind StatefulWidgets komplexer zu verstehen und zu implementieren, da sie einen Zustand haben und auf Benutzereingaben oder andere Systemereignisse reagieren können. Sie können jedoch auch mehr Interaktivität und Dynamik in die Benutzeroberfläche einer App bringen.

Installation Flutter – Entwicklungsumgebung

Möchten Sie eine Entwicklungsumgebung für Flutter – Googles Cross-Plattform UI Framework installieren dann finden Sie hier eine Anleitung für Windows 10 und das Android Studio.

Übersicht

Aller Anfang ist schwer, auch wenn es darum geht, etwas Neues zu lernen. Um mit der Entwicklung von Anwendungen, Apps, Web- bzw. Desktop-Anwendungen mit Flutter zu beginnen, brauchen Sie erst einmal eine Entwicklungsumgebung. In diesem Tutorial geht es darum Flutter und als IDE das Android Studio unter Windows 10 einzurichten, so dass Sie Apps für Android entwickeln können. Die Entwicklungsumgebung für andere Zielplattformen fit zu machen, bleibt anderen (noch folgenden) Tutorials überlassen.

Es ist aber auch möglich Flutter und das Android Studio unter Linux oder macOS zu verwenden. Auch andere IDEs, wie z.B. Microsofts Visual Studio Code oder IntelliJ IDEA, sind möglich.

Um nun eine lauffähige Entwicklungslandschaft unter Windows 10 aufzusetzen, sind folgende Schritte durchzuführen.

  • Systemvorraussetzugen prüfen und gegebenenfalls herstellen
  • Flutter SDK installieren
  • Flutter doctor
  • Android Studio installieren

Generell finden Sie die originale Dokumentation und auch die benotigten Download-Links zu Flutter unter https://flutter.dev .

Abbildung 01: Flutter dev – Get started

Folgen Sie dem Button “Get started” und wählen Sie dann Windows aus.

Systemvoraussetzungen

Als Mindestvoraussetzungen für diese Entwicklungsumgebung benötigen Sie mindestens Win 7 SP1 (64bit) oder später mit mindestens PowerShell 5.0. Bei Windows 10 sollte diese Voraussetzung von Haus aus erfüllt sein.

Dann brauen Sie noch Git für Windows in der minimalen Version 2.0.

Sollten Sie Git noch nicht installiert haben, finden Sie den zugehörige Version hier.

Abbildung 02: Download Git for Windows

Starten Sie einfach den Installer. Achten Sie dabei bitte darauf, dass Sie die Git Bash mit installieren und dass Sie die Option “Git from the command line and also from 3rd-party software.” aktivieren.

Flutter SDK installieren

https://flutter.dev/docs/get-started/install/windowsIn diesem Schritt geht es darum das Flutter SDK auf Ihrem Rechner zu installieren. Wenn Sie sich, wie eingangs beschrieben für die https://flutter.dev zur Installationsanleitung durchgehangelt haben, finden Sie den Download-Link im Abschnitt “Get the Flutter SDK”. Ansonsten folgen Sie diesem Link.

Laden Sie die aktuelle Version von Flutter als Zip -Archiv herunter und entpacken Sie es unter c:\src\flutter. Da Flutter auf der Programmiersprach dart basiert, benötigen Sie auch diese. Allerdings müssen Sie sich in diesem Fall nicht darum kümmern, da die kompatible dart Version bereits in dem SDK enthalten ist.

Jetzt müssen Sie noch den Pfad C:\src\flutter\bin in die Path – Variable aufnehmen.

Abbildung 03: Windows 10 Systemumgebungsvariablen

Über die Suche nach env und dann Umgebungsvariablen für dieses Konto bearbeiten öffnen Sie den notwendigen Dialog.

Abbildung 04: Set Path

In der Liste der Benutzervariablen selektieren Sie jetzt die Variable Path, klicken auf Bearbeiten und ergänzen dort den Eintrag C:\src\flutter\bin.

Flutter doctor

Flutter bringt von Haus aus den flutter doctor mit. Mit diesem Tool können Sie Ihre Flutter-Umgebung und deren Abhängigkeiten prüfen. Geben Sie in einer Konsole folgenden Befehl ein.

C:\>flutter doctor
Abbildung 05: flutter doctor

Je nach Umgebung kann die Ausgabe von dem hier in Abbildung 05 gezeigtem Beispiel abweichen. In diesem Fall erkennen Sie, dass Sie die Android – Lizenzbedingungen noch nicht akzeptiert haben. und dass das Android Studio noch nicht installiert wurde.

Um nun die Lizenzen zu aktivieren starten Sie flutter doctor mit der Option — android-licenses und folgen dann der Ausgabe in der Konsole.

C:>flutter doctor --android-licenses

Das Ergebnis sieht danach wie in Abbildung 06 aus.

Abbildung 06: Lizenzen

HINWEIS: Flutter verwendet intern Google Analytics. Um zu verhindern, dass Daten an Google gesendet werden, können Sie dieses Feature abschalten.

c:\>flutter config --no-analytics

Android Studio installieren

Nach diesem Schritt geht es noch an die Einrichtung des Android Studion. Den Download finden Sie hier.

Folgen Sie einfach dem Installation-Wizzard. Zu Begin werden Sie gefragt, ob Sie den Android-Emulator einrichten möchten. Lassen Sie diese Option ausgewählt.

Starten Sie nach der Installation das Android Studio. Dort finden Sie etwas versteckt das Context-Menü Configure.

Abbildung 07: Settings

In der Version 3.6.3 müssen Sie noch diese Option aktivieren.

Abbildung 08: Google AdMob Ads SDK (Obsolet)

Android Studio : Flutter PlugIn einrichten

In dem letzte Schritt der Installation fügen Sie jetzt noch das Flutter PlugIn im Android Studio hinzu. Dazu öffnen Sie wieder das Configure-Context-Menü.

Abbildung: 09: Flutter PlugIn

Wählen Sie das Flutter – PlugIn aus und installieren es. Anschließend ist noch ein Neustart des Android Studios notwendig.

Fertig!