Flutter 101

Projektentwicklung mit Flutter

Wer bin ich?

• Name: Dominik Schumann
• Job: Software Engineer
• Arbeitgeber: Maibornwolff
• Abschluss: Bachelor of Science @ HWR

Wichtige Links

		Material Design
Flutter Documentation	Our Repo	Material Design

Kontakt

e_schumannd@doz.hwr-berlin.de

Quick Recap

• Was ist letztes Mal geschehen
• Tempo Einschätzung

BuildContext

• kurz gequatscht
• noch tieferer Einblick now

Was ist die Flutter Widget Hirarchie?

Das funktioniert:

class MyContent extends StatelessWidget{
    //...
    Widget build(BuildContext context) {
        return Text(BlocProvider.of<Bloc>(context).state.count);
    }
}

Das nicht:

FloatingActionButton(
  child: Text(BlocProvider.of<Bloc>(context).state.count),
)

Dart Null Awareness

• zwei Arten von DatenTypen:

final String? name; //nullable
final String appName; //non-nullable

final String test = name; //Error

Dart Null Awareness

• zwei Arten von DatenTypen:

final String? name; //nullable
final String appName; //non-nullable

final String test = name; //Error

• neue Operatoren, ?., ??:

final String test = name ?? appName; // default value
final int? length = name?.length; // name = null -> return null

Important Keywords

• final - nach initialisierung immutable
• late - vor Nutzung definiert, immutable
• const - sofort initialisieren, immutable
• var - mutable

3. Aufgabe

Baut ein Text Field in eure Applikation ein. Lasst in diesem einen Namen eingeben, der in der App Bar angezeigt wird. Gebt ansonsten einen Standard Namen an.

Helpful Widgets: TextField, AppBar, TextBar.onSubmitted

4. Aufgabe

Baut eine BottomNavigationBar in eure Applikation ein. Nutzt diese um mehrere Seiten anzeigen zu lassen.

Helpful Widgets: BottomNavigationBar, BottomNavigationBarItem

Netzwerk Funktionen

Meistens brauchen Apps Möglichkeiten um

• externe Daten zu laden
• Daten zu bearbeiten und extern zu speichern
• Kommunikation mit anderen Nutzern

Was brauchen wir?

• externe Server Kommunikation
• Daten Serialisierung

HTTP

Hypertext Transfer Protocol

Was ist HTTP?

• request-response protocol
• sind teil des client-server models
• client (App) sendet request an einen Server

Aufgaben

Client (App)

zeigt Daten an, schickt aktualisierte Daten

Server

Haushaltet Daten, bestenfalls steuert App Inhalt

Request Methoden

• GET: nur Daten anfragen
• POST: Daten schicken, Daten erhalten auf dessen Grundlage
• PUT: Daten schicken mit dem intent, dass diese gespeichert werden
• DELETE: Daten löschen

JSON

JavaScript Object Notation

• Ist eine Art um Daten zu übertragen
• gutes Format um Objekte zu übertragen

Beispiel

{
  "foo": "bar",
  "array": [1, 2, 3, 4],
  "object": {
    "test": "test"
  }
}

HTTP package

Package hinzufügen

flutter pub add http

Daten anfragen

var response = await http.get(Uri.https('dummyjson.com', 'todos'));
var todos = jsonDecode(response.body) as Map<String, dynamic>;

5. Aufgabe

Nutzt das http package, um eine Schnittstelle von https://dummyjson.com anzusprechen und zeigt die Daten in eurer App an.

Helpful Widgets: FutureBuilder, CircularProgressIndicator, Card, SingleChildScrollView