BLoC

BLoC

Der BLoC (Business Logic Component) selbst ist eine Klasse oder ein Objekt, das die Logik Ihrer Anwendung enthält. Es kann die Datenverarbeitung, Validierung, API-Aufrufe und andere relevante Logik umfassen.

BLoCs verwenden normalerweise Streams, um Daten zu verwalten. Ein Stream ist eine Sequenz von Ereignissen oder Datenwerten im Laufe der Zeit. Der BLoC stellt einen Stream für die UI bereit, und die UI kann auf Änderungen des Streams reagieren.

Die UI interagiert mit dem BLoC durch das Senden von Ereignissen (Events) an den BLoC. Der BLoC verarbeitet diese Ereignisse und gibt den aktuellen Zustand (State) zurück. Die UI reagiert auf State-Änderungen und aktualisiert sich entsprechend.

Normalerweise wird Provider-Paket verwendet, um BLoCs zu verwalten. Der Provider hilft, Abhängigkeiten zu injizieren und den Zugriff auf den BLoC in der Anwendung zu organisieren.

..weiter so eine 8-Kseislauf:

  1. BLoC -> Async Request zu Data (oben)
  2. Async Responce zurück zum BLoC
  3. dann sendet BLoC  State zu UI (oben)
  4. von UI kommen Events wiederum zum BLoC

Ein Beispiel für BLoC von Chat-GPT:

// BLoC
class CounterBloc {​
  final _counterController = StreamController<int>.broadcast();
  int _counter = 0;

  Stream<int> get counterStream => _counterController.stream;

  void increment() {​
    _counter++;
    _counterController.add(_counter);
  }​

  void dispose() {​
    _counterController.close();
  }​
}​

// UI
class CounterApp extends StatelessWidget {​
  @override
  Widget build(BuildContext context) {​
    final CounterBloc counterBloc = Provider.of<CounterBloc>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(‚BLoC Beispiel‘),
      ),
      body: StreamBuilder<int>(
        stream: counterBloc.counterStream,
        builder: (context, snapshot) {​
          return Center(
            child: Text(‚Counter: ${​snapshot.data}​‘),
          );
        }​,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {​
          counterBloc.increment();
        }​,
        child: Icon(Icons.add),
      ),
    );
  }​
}​
 

In diesem Beispiel wird ein einfacher Zähler-BLoC erstellt und in der Benutzeroberfläche verwendet. Der BLoC erhöht den Zählerwert und informiert die Benutzeroberfläche über den aktualisierten Wert.

Redux

Redux

In Flutter gibt es nicht direkt „Redux“, wie es in der JavaScript-Welt der Fall ist.
Redux ist ein Konzept für die State-Management, das oft mit React-Anwendungen und anderen JavaScript-Frameworks verwendet wird.
In Flutter gibt es jedoch ein vergleichbares Konzept für die State-Management —> Provider.

Bild

Hier sind die drei Grundsätze von Redux in der JavaScript-Welt.

  1. Single source of truth: Der gesamte Anwendungsstatus wird in einem einzigen zentralen Speicher, dem sogenannten „Store“, gespeichert. Dadurch wird die Datenverwaltung vereinfacht und die Konsistenz erleichtert.
  2. State is read-only (Der Zustand ist schreibgeschützt): Der Zustand kann nicht direkt von Komponenten oder anderen Teilen der Anwendung geändert werden. Änderungen am Zustand erfolgen stattdessen durch „Actions“, einfache JavaScript-Objekte, die die Absicht anzeigen, den Zustand zu ändern.
  3. Changes are made with pure functions (Änderungen werden mit reinen Funktionen vorgenommen): Um Änderungen am Zustand vorzunehmen, werden „Reducer“ verwendet, die reine Funktionen sind. Reducer erhalten den aktuellen Zustand und eine Aktion als Parameter und geben einen neuen Zustand zurück, ohne den vorhandenen Zustand zu ändern.

23 Layout-Widgets

23 Layout-Widgets

  1. Container: Ein rechteckiger Bereich mit Anpassungsoptionen wie Breite, Höhe, Farbe und mehr.
  2. Row: Ordnet seine Kinder in einer horizontalen Zeile an.
  3. Column: Ordnet seine Kinder in einer vertikalen Spalte an.
  4. Stack: Stapelt Kinder-Widgets übereinander.
  5. Expanded: Weist einem Kind-Widget in einer Flex-Widget-Hierarchie den verbleibenden verfügbaren Platz zu.
  6. Flexible: Steuert die Flexibilität von Kind-Widgets in einer Flex-Widget-Hierarchie.
  7. ListView: Zeigt eine scrollbare Liste von Widgets an.
  8. GridView: Zeigt eine scrollbare Rasteranordnung von Widgets an.
  9. Card: Zeigt Informationen in einer Karte mit abgerundeten Ecken und Schatten an.
  10. SizedBox: Erstellt ein festes Höhe-Breite-Layout.
  11. Padding: Fügt Polsterung zu seinen Kindern hinzu.
  12. Align: Positioniert sein Kind innerhalb des übergeordneten Widgets.
  13. Wrap: Ordnet seine Kinder in einer Zeile oder Spalte an und kann automatisch umbrechen.
  14. Positioned: Positioniert ein Kind-Widget in einem Stack an einer bestimmten Position.
  15. AspectRatio: Setzt das Verhältnis von Breite zu Höhe für ein Widget.
  16. ListView.builder: Erstellt dynamisch eine Liste von Kindern basierend auf einem Generator.
  17. GridView.builder: Erstellt dynamisch ein Raster von Kindern basierend auf einem Generator.
  18. Spacer: Erzeugt in einer Flex-Widget-Hierarchie leeren Raum.
  19. Divider: Erstellt eine horizontale oder vertikale Trennlinie zwischen Elementen.
  20. FittedBox: Passt ein Kind in die verfügbare Größe, indem es es proportional oder nicht proportional verkleinert oder vergrößert.
  21. ConstrainedBox: Beschränkt die Größe seines Kindes auf eine bestimmte Mindest- oder Höchstgröße.
  22. IntrinsicHeight und IntrinsicWidth: Passen die Höhe bzw. Breite ihrer Kinder an, um ihre intrinsischen Größen beizubehalten.
  23. Flow: Ordnet Kinder in einer nicht einschränkenden Weise an.

Projekt als Web auf GitHub publizieren

Projekt als Web auf GitHub publizieren

  1. ein Repo auf GitHub erstellen (public und mit READ.ME)
  2. Lokal, in den 2build“-Ordner des Flutter-Projektes navigieren:
    % cd build
  3. Ein Ordner im Flutter-Projekt mit Namen „repo.name“ erstellen und dorthin Inhalt vom Repo auf GitHub kopieren:
    % git clone https://github.com/username/repo.name
  4. Inhalte mit aus Projekt App mit web-Version in den erstellten Ordner kopieren
  5. Zum erstellten „repo.name“-Ordner navigieren:
    % cd repo.name

In weiteren drei Schritten Inhalt des lokalen „repo.name“ auf dem „repo.name“ auf GitHub synchronisieren:

  1. % git add –all
  2. % git commit -m ‚initial commit‘
  3. % git push -u origin master

Auf GitHub –> Repo / Settings / Pages / Branch –> master –> save

Git Befehle

git cheat sheet als PDF

https://education.github.com/git-cheat-sheet-education.pdf

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
% git clone https://github.com/your-ount-name/reopo_name.io.git

% git add --all
% git commit -m 'initial commit'
% git push -u origin master


% git init // neues Repositorium
% git status //aktuellen Status prüfen
% rm -rf .git // lokanes Repo löschen
% rm -rf .git*

% git config --global user.name
% git reset
% git reset --hard
% git remote -v
% git remote set-url origin https://github.com/your-ount-name/reopo_name.io.git

%rm -rf drhuva.io
% git init
% git remote add origin https://github.com/your-ount-name/reopo_name.io.git
% git pull origin master

% git status //aktuellen Status prüfen
% git add .// alle Dateien einfügen
% git add index.html // index.html einfügen
% git add /logs //Ordner "log" einfügen
% git rm --caсhed <Deiteiname>

Navigation

Die Flutter Anwendungen zeigen ihre Inhalte in einer Art „Fullscreen-Containers“ auf einem Bildschirm – pages (oder screens, oder views).
Diese pages und screens werden in Flutter als Routs (Routen) bezeichnet.
In Android werden diese pages/screens als Activity bezeichnet, und in iOS als ViewController. Aber im Flatter sind die Routen auch Widgets.
Ein einzelnes Widget kann Route sein, wenn er einen vollständigen Layout darstellt.

Eine Route (ein Bildschirm) kann in Dart – im Sinne des OOP-Konzeptes – als eine „Klasse“ beschrieben werden.
Deswegen kann jede Route – als eine separate Klasse – über eigene Inhalte und eine eigene UI (Benutzeroberfläche) verfügen.

Möglichkeiten für Navigation in Flutter:
(A) einfache Navigation zwischen zwei Routen (push & pop)
(B) Navigation zwischen zwei benannten Routen (named Routs)
(C) Navigation zwischen zwei Routen mit onGenerateRoute()
(D) Navigation mit weichen Übergang zwischen zwei Routen (animiert)
(E) deep Links

Link zu offizieller Documentation –> über Navigation in Flutter
Link zum thematischen Artikel —> Navigation System in Flutter

(A) einfache Navigation zwischen zwei Routen:
1. Erstellen Sie zwei Routen.
2. Navigieren Sie mit der Methode Navigator.push() zur zweiten Route.

1
2
3
4
5
6
7
8
onPressed: () {
    Navigator.of(context).push(
            context,
            MaterialPageRoute(
                builder: (context) => SecondScreen();
            ),
    ),
}

3. Kehren Sie mit der Methode Navigator.pop() zur ersten Route zurück.

1
onPressed: () => Navigator.pop(context)

Ein weiteres Beispiel für Verwendung des Navigator-Widgets ist hier: https://www.geeksforgeeks.org/routes-and-navigator-in-flutter/?ref=rp

(B) Navigation zwischen zwei benannten Routen:
1. Erstellen Sie zwei Routen.
2. Die Eigenschaft home des Widgets MaterialApp mit der Eigenschaft initialRoute (mit dem Wert ‚/‘) ersetzen . Darunter eine weitere Eigenschaft route mit Wert verwenden:

1
2
3
4
5
6
//alternativ:
initialRoute: 'A',
    routes: {
      'A': (context) => const FirstScreen(),
      'B': (context) => const SecondScreen(),
    },

3. Im Navigator mit benannten Routen rufen wir MaterialPageRoute nicht mehr auf, sondern verwenden direkt die Methode .pushNamed(context, ‚route‘).

onPressed: () => Navigator.pushNamed(context, ‚/second‘),
// alternativ: Navigator.of(context).pushNamed(‚B‘);

4. Und wie bei einfachen Navigator mit Navigator.pop() zur ersten Route zurückkehren.

onPressed: () => Navigator.pop(context),

 

 

comming soon:

(C) Navigation zwischen zwei Routen mit onGenerateRoute()
(D) Navigation mit weichen Übergang zwischen zwei Routen (animiert)
(E) deep Links