Flutter

Syntax des StatefulWidgets

von

Syntax des StatefulWidgets

Im body eines Stateful Widgets hat es einen Konstruktor und erzeugt einen State-Objekt.

Wenn ein Widget-Obkekt erzeugt wird ( über WidgetName ),

erst wird sein Konstruktor aufgerufen, es zu initiieren.

Dann erzeugt der Stateful Widget einen State-Objekt.

Sobald ein State-Objekt erzeugt wird, bekomt unser Widget damit Eigenschaften und Methoden, mit deren wir im body des Widget-State-Objektes arbeiten können. Die wichtigsten Eigenschaften sind context und widget. Dank context sehen wir unseren Widget im Widget-Baum und können verschiedene Methoden des State-Objektes innerhalb seines body nutzen. Die Eigenschaft widget ermöglicht uns Informationen über unser Widget abzufragen.

Ein State-Objekt verfügt über mehrere Methoden, die für bestimmte Zwecke gedacht sind.

Implizit wird eine Methode initState() – immer – aufgerufen, damit der State-Objekt initiiert und einen context im Widget-Baum erhält. (Ohne context kann die Methode build() nicht funktionieren, also kein Element wird gezeichnet.)

Die Methode build() zeichnet ein Element (entsprechend unserem Widget) auf dem Bildschirm. Diese Methode muss immer im body des Stateful Widget sein, weil wir da weitere Komposition-Widgets platzieren.

Die Hauptaufgabe eines Stateful Widgets ist ein State-Objekt zu erzeugen; Es ist nur ein leeres Box, der weder Elemente zeichnen kann, noch ein State beinhaltet – das Alles kann das State-Objekt, das von Stateful Widget erzeugt wurde.

Eigenes Flutter-Widget

von

Eigenes Flutter-Widget

In der Quellcode können Sie sogar ein eigenes Widget definieren.

In diesem Beispiel habe ich ein eigenes Widget von dem „Container“-Widget geerbt, deswegen kann ich die Eigenschaften (Parameter) wie alignment oder width von „Container“-Widget benutzen.

Mein Widget soll aber bestimmte Argumente einnehmen: text und color, deswegen stehen die als Patrameter in Klammern nach dem Namen. Diese Parameter müssen in der Quellcode davor als Variablen mit entsprechenden Typ deklariert werden.

Es ist wichtig bei der Vergabe der Widget-Namen zu beachten, dass es lesbar und verständlich ist, hier ist es „buildText“, ich konnte es auch „buildColoredText“ benennen.

Nun habe ich ein Widget buildText(), mit dem ich ein Box mit farbigen Text in auf einem Screen in meiner App darstellen kann.

Anatomie des Widgets

von

Anatomie des Widgets

Jeder Widget besitzt den optionalen* Parameter key. Der „Key“ bestimmt, dass jeder erzeugter Widget eine konkrete (unique) Stelle im Elementen-Baum annimmt. 

*ein Wert an den Parameter key muss nicht explizit zuweisen werden, es wird implizit mit dem Widget erzeugt.

Widgets besitzen eigene individuelle Kombination an Parameter, z.B. hier ein „Center“-Widget hat key, widthFactor, heightFactor und child Parameter:

Einige Widgets stellen mit sich ein einzelner Fall eines Stamm-Widgets, z.B. der Widget „Center“ ererbt von seinem Parent-Widget „Align“ Dafault-Parameter „alignment“.

Syntax der Flutter-Widgets

Die Code-Snippets Oben beziehen sich auf die Quellcode für den Flutter-Framework (dort werden Klassen für alle Widgets in Dart geschrieben).

Wenn Sie die Quellcode für Ihre Flutter App in einem Editor schreiben, sieht die Syntax eines „Center“-Widgets folgendenweise aus:

Wenn mit dem Mauszeiger auf den Namen eines Widgets gehen, erscheint un einem Fensterchen über den Widgetsnamen die „Anatomie“ dieses Widgets mit aufgelisteten Parameter (Eigenschaften), die Sie für diesen Widget nehmen können.

Asynchronous Programming / EN

von

Asynchronous Programming allows your app to complete time-consuming tasks, such as retrieving an image from the web, or writing some data to a web server, while running other tasks in parallel and responding to the user input. This improves the user experience and the overall quality of your software. 

In Dart and Flutter, you can write asynchronous code leveraging Futures, and the async/await pattern: these patterns exist in most modern programming languages, but Flutter also has a very efficient way to build the user interface asynchronously using the FutureBuilder class. 

Using a Future 

When you write your code, you generally expect your instructions to run sequentially, one line after the other. For instance, let’s say you write the following: 

int x = 5; int y = x * 2; 

You expect the value of y to be equal to 10 because the instruction int x = 5 completes before the next line. In other words, the second line waits for the first instruction to complete before being executed. 

unresponsive until the task is completed 

Asynchronous operations do not stop the main line of execution, and therefore they allow the execution of other tasks before completing. 

The diagram shows how the main execution line, which deals with the user interface, can call a long-running task asynchronously without stopping to wait for results, and when the long-running task completes, it returns to the main execution line, which can handle it.

Dart is a single-threaded language, but despite this, you can use asynchronous programming patterns to create reactive apps.

to perform asynchronous operations you can use the Future class
Some use cases where an asynchronous approach is recommended include retrieving data from a web service, writing data to a database, finding a device’s coordinates, or reading data from a file on a device. Performing these tasks asynchronously will keep your app responsive.
Some use cases where an asynchronous approach is recommended include retrieving data from a web service, writing data to a database, looking up device coordinates, or reading data from a file on the device. Performing these tasks asynchronously will ensure your application is responsive.

Ein Paket installieren

von

Ein Paket installieren

Beispiel: HTTP

  1. –> https://pub.dev in der Suche-Eingabemaske das Schlüsselwort „HTTP“ eingeben
  2. auf den Titel des gewünschten Packets/Plugins klicken, dann unter „Installieren“-Menüpunkt Instruktion lesen, den Code-Stück kopieren (bzw. –> https://pub.dev/packages/http/install)
  3. Im VS Studio –> pubspec.yaml file: unter „dependencies“ http^1.12.2 eingeben
  4. Im VS Studio -> Terminal: $ pub get
  5. Im VS Studio -> Button oben links zum Download
  6. Im VS Studio -> main.dart: import ‚package:http/http.dart‘;

Version-Anzeige in pubspec.yaml

von

Die drei mit Punkt getrennte Ziffern in der Versionsangabe verstehen

Packet-Version: 0.0.0 – mit „0“ keine Angaben

Erste Ziffer:
0 = beta-Version, Update wird nötig, Bags sind möglich
Die “0”-Version = “ich bin nicht ganz fertig, aber wir können es publizieren und ausprobieren”.
1 = Alles ist ok, die App ist fertig
2= eine entscheidende Änderung in der App
3= eine weitere entscheidende Änderung—

Die zweite Ziffer:
0 = keine Änderungen
1 = die Version mit Features ergänzt
Mit jede Ergänzung erhöht sich die Zahl

die letzte Ziffer:
Das sind irgend-welche Patches, d.h. sie haben nichts an der Funktionalität geändert, aber irgendeinen Bug gefunden und beseitigt.

* eine “frische” Version herunterladen: $ flutter pub upgrade –major-versions

pubspec.yaml

von

pubspec.yaml

YAML ist ein rekursiver Akronym: Yet (Another) Ain’t Markup Language
Hier wird beschreiben, welche Daten sind in unserem Projekt verwendet werden.

Projekt-Konfiguration:
Haupteinstellungen
Projekt-Dependencies
Information über “assets”

Das ist eine Alternative zur Kombination von XML und JASON.
In yaml-Syntax sind Einrückungen sehr wichtig!

Dokument-Struktur:

  • name
  • description
  • publish_to
  • version
  • environment
  • dependencies
  • dev_dependencies
  • assets

name – der Name des Projekts (wird bei Projekterstellung gegeben)

description – hier haben Sie eine Möglichkeit ihr App-Projekt kurz zu beschreiben (sehr empfehlenswert)

publish_to – Standars-Wert ist hier „false“, Sie wechseln zu „true“ nur, wenn sie den Projekt auf „pub.dev“ publizieren wollen.

version – das ist die Version Ihres App-Projektes; besteht aus drei Ziffern mit Punkt getrennt, z.B. 1.0.0+1

enviroment sdk – das ist Dart-Version (aktuelle Version nachschlagen –> https://dartcode.org/releases)

dependences = das sind Bibliotheken, die wir von pab.dev herunterladen werden und sie werden dann zu unserem App angebunden.

 

 

 

dev_dependencies– sie “arbeiten” während sie ein App entwickeln, sie helfen, z.B. die App testen etc.

assets: in dieser Sektion können Sie z.B. Bilder oder Fonts anbinden