Layout-Widgets

Layout widgets

Der Grundgerüst der Layout in Flutter befindet sich im Scaffold-Widget. Das Ganze besteht aus nebeneinander stehenden oder in einander verschachtelten Widgets.

Multi-Child Widgets: Column(), Row(), Stack(), Wrap(), GridView() …

Single-Child Widgets: Center(), Align(), Baseline(), ConstrainedBox(), Container() …

Strukturieren:

SafeArea()
Wrap()

Container()
Column()
Row()

Expanded()
Flexible()

Stack(), 
IndexedStack()

Ausrichtung & Abstände:

Center()
Align()
Positioned()
BaseLine()
Padding()

Spacer()
SizedBox()

Scrollen:

ListView()
ListView.builder()
GridView()
GridView.builder()
SingleChildScrollView()
Scrollbar()
PageView()
Slivers (AppBar(), List Grid() …)

Asynchronous Programming / EN

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.

Dart (Konzepte)

grundlegenden Konzepte der Dart als Programmiersprache

Dart ist eine von Google entwickelte Programmiersprache, die sich besonders für die Entwicklung von Web-, Desktop- und mobilen Anwendungen eignet. Hier sind einige der Grundlagen von Dart:

Typisierung: Dart ist eine stark typisierte Programmiersprache, was bedeutet, dass jede Variable und jeder Ausdruck einen spezifischen Datentyp hat. Es unterstützt sowohl statische Typisierung als auch Typinferenz.
Variablen und Datentypen: Dart bietet verschiedene Datentypen wie int, double, String, bool, List, Set, Map usw. Du kannst Variablen mit dem var-Schlüsselwort deklarieren, oder den Datentyp explizit angeben.

Funktionen: Funktionen in Dart werden mit dem functionName(parameters) => expression; Syntax definiert. Dart unterstützt auch benannte Parameter und Default-Parameterwerte.

Klassen und Objekte: Dart ist eine objektorientierte Programmiersprache. Du kannst Klassen mit Methoden und Eigenschaften definieren. Die Konstruktoren können überladen werden, und die Vererbung wird ebenfalls unterstützt.
Kontrollstrukturen: Dart bietet Kontrollstrukturen wie if, else, switch, while, for, usw., um den Programmfluss zu steuern.

Packages und Imports: Dart ermöglicht die Verwendung von Paketen, die Funktionen und Klassen aus wiederverwendbarem Code enthalten. Du kannst Pakete über die import-Anweisung in deinem Code einbinden.

Async/Await: Dart unterstützt asynchrone Programmierung mithilfe von async und await. Dadurch können asynchrone Aufgaben wie Netzwerkanfragen ohne blockierenden Code ausgeführt werden.

Schnittstellen für verschiedene Plattformen: Dart kann für die Entwicklung von Webanwendungen mit dem „Dart Web“ SDK, für mobile Apps mit dem „Flutter“ Framework und für serverseitige Anwendungen mit dem „Dart VM“ verwendet werden.

Null-Sicherheit: Dart hat eine Option für Null-Sicherheit eingeführt, um Fehler durch null-Werte (Null-Referenzen) zur Laufzeit zu verhindern. Dies hilft bei der Erstellung robusterer und fehlerfreier Codebasis.

Entwicklungsumgebungen: Dart kann in verschiedenen Entwicklungsumgebungen wie dem Dart SDK, Visual Studio Code mit der Dart-Erweiterung und anderen IDEs entwickelt werden.

Dart-Projekt in der Konsole

#Command-line and server apps
dart консольный проект
после инсталляции dart-sdk в zsh:

==> Caveats
Please note the path to the Dart SDK:
/usr/local/opt/dart/libexec
==> Summary
🍺 /usr/local/Cellar/dart/2.19.6: 1,040 files, 639.9MB, built in 29 seconds
==> Running `brew cleanup dart`…
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

https://dart.dev/tutorials/server/get-started

Dart: Variablen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// DART-SPIELWIESE (Listing 1.1)

void main() {  // main(): Einstiegspunkt einer Dart-Anwendung
 
  print('Hallo Dart');
  // Info: es gibt in Dart KEINE char wie Java für einzelne Zeichen
  // alles ist quasi ein String wenn Anführungszeichen benutzt werden
 
  // einzeiliger Kommentar
 
  /*
   *
   *  mehrzeiliger Kommentar
   *
  */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// DART-SPIELWIESE (Listing 1.1)

void main() {  // main(): Einstiegspunkt einer Dart-Anwendung
 
  print('Hallo Dart');
  // Info: es gibt in Dart KEINE char wie Java für einzelne Zeichen
  // alles ist quasi ein String wenn Anführungszeichen benutzt werden
 
  // einzeiliger Kommentar
 
  /*
   *
   *  mehrzeiliger Kommentar
   *
  */
 
  //
  // VARIABLEN (Container um Daten bzw. Werte abzulegen)
  //
  // in Dart werden Variablen mit dem Schlüsselwort var deklariert
 
  // Hinweis: wenn wir keinen Wert zuweisen
  // dann entscheidet Dart für uns bzw. machen die Variable "dynamic"
 
  var x;  // noch keinen Wert zugewiesen
  print(x);  // null (Variable OHNE Wert)
  // jederzeit den aktuellen Datenytyp einer Variable zur Laufzeit ausgeben
  print(x.runtimeType);  // Null (kein Datentyp festgelegt)
 
  // einer Variable einen Wert zuweisen: also initialisieren
  // Beispiel: y mit Wert 42 (also Ganzzahl bzw. int)
  var y = 42;  // int-Objekt
  print(y.runtimeType);  // int
 
  //print(z);  // undefined, also Error weil z vorher nicht definiert wurde
 
  // direkte Werte ausgeben an Konsole OHNE Zwischenweg über Variablen
  print(42);
  print('42');
 
  // Datentyp String
  // Beispiel Variable erzeugen namens "vorname" mit Wert "Peter"
  var vorname = 'Peter';
  print(vorname);
 
  // Spezialfall "dynamic" (Vorteil: Flexibilität)
  dynamic z;  // ohne Wertzuweisung
  z = 5;
  z = "Hugo";
  print(z);
  print(z.runtimeType);
  // per dynamic zur Laufzeit zB statt eines int-Wert einen String-Wert zuweisen
 
  // Hinweis: warum wird Datentyp "int" klein geschrieben
  // Historische Gründe, d.h. int ist zwar KEIN primitiver Datentyp
  // sondern ein Objekt der Klasse int, aber in Java nutzt man auch diese Schreibweise für int, double,...
 
  //int zahl = 7;
 
  //
  // DATENTYPEN
  //
 
  /*
   *  int       Ganzzahl                      5, -13, 0
   *  double    Fließkommazahl                3.14, -18.0, 13.999
   *  num       Numerisch                     3.14, 5
   *  (Kombi aus Ganz-und Kommazahl)
   *  bool      Boolean / Wahrheitswert       true, false
   *  String    Zeichenkette                  'Bob', "Pete"
   *  List      Liste mit mehren Elementen bzw. Array        ['Berlin', 'Hamburg', 55]
   *  Map       Schlüssel/Werte-Paare (key/value)     {'x':8, 'y':16}
   *  dynamic   jeder Typ (flexibel)
   *
  */
 
  // Beispiel mit num:
  num zahl = 5;
  zahl = 3.14;
  print(zahl);
 
  //double a;
 
  // leere Variablen erzeugen zu den jew. oben genannten Datentypen
  int alter;
  double gewicht;
  bool istOnline;  // camelCase-Schreibweise
  String name;
  List hobbies;
  Map json;
 
  dynamic ort = 'Hamburg';
  ort = 100;
 
}