Flutter und JSON Part 3 Automatisation

Vor kurzer Zeit habe ich zwei Post zum Thema Flutter und JSON online gestellt. Dieser Post ist eine Fortsetzung zu diesen Artikeln.


Wir werden in diesem Post zwei neue Librarys benutzen, beide im pubspec.yaml File eintragen, diesmal in  der Rubrik
dev_dependencies:

build_runner: und json_serializable:





Noch einmal zur Erinnerung ein Code Ausschnitt:

class Message{

  final String subject;
  final String body;

  Message(this.subject, this.body);

  Message.fromJason(Map<String,dynamic>json)
  : subject = json['subject'],
    body = json['body'];
}

Unsere Klasse ist einfach Sie weist den Klassen Variablen die entsprechenden JSON Inhalte zu. Bei JSON Daten mit wenigen Feldern kann man das von Hand machen, also wie im Fall oben. Bei einer grösseren Anzahl an Feldern kann man diesen Vorgang aber auch automatisieren. So sieht meine Ordner Struktur aus, bevor wir das automatisieren:

Die Folge dieses Automatisieren wird sein, das ein neues File generiert wird. Das File mit unserer Klasse ergänzen wir zuerst um einen neuen Import:

import 'package:json_annotation/json_annotation.dart';

Dieser Import gibt uns Zugriff auf eine Annotation , welche wir in unsern Code einfügen:

@JsonSerializable()

Wir erinnern uns an @override, die wir in Flutter sehr häufig benutzen.
Mit @JsonSerializable() zeigen wir an, das die folgende Klasse serialisiert werden kann. Was ist Serialisierung nun genau ? Das zu erklären fällt mir nicht einfach. Am besten dem Wikipedia Link folgen... . Die etwas langatmige Erklärung: Dart / Flutter können mit Hilfe von Library's mit JSON umgehen, JSON selbst ist aber kein Teil der Sprache Dart. Die Serialiserung wandelt einen JSON Datensatz um in einen Datensatz der mit Mitteln der Sprache Dart konstruiert ist, in unserem Fall eine Klasse.






Natürlich müssen wir auch festlegen, wie das File das generiert wird heisst. Das geschieht mit:

part 'Message.g.dart';

Man beachte die Schreibweise. Schauen wir uns jetzt den Code an, bevor wir die Generation starten:

import 'package:json_annotation/json_annotation.dart';

part 'Message.g.dart';

@JsonSerializable()
class Message{

  final String subject;
  final String body;

  Message(this.subject, this.body);

  Message.fromJason(Map<String,dynamic>json)
  : subject = json['subject'],
    body = json['body'];
}

Man sollte sich nicht durch Fehlermeldungen des Editors irritieren lassen. Wenn der Code so im File steht, wird einzig Message.g.dart noch eine Reaktion des Editors erzeugen, welche nach der Generation verschwindet. Diese wird im Terminal mit folgendem Befehl gestartet:

flutter packages pub run build_runner build

Nach Generation

Es dauert einen Moment lang, je nach System, bis dieser Vorgang abgeschlossen ist. Die Ordner Struktur sieht anschliessend, in diesem Beispiel, wie auf dem Bild rechts aus.

Was jetzt bleibt, ist den Code so anzupassen, das er mit dem generierten File zusammen arbeitet.


Die Klasse sieht jetzt neu so aus:

import 'package:json_annotation/json_annotation.dart';

part 'Message.g.dart';

@JsonSerializable()
class Message{

  final String subject;
  final String body;

  Message(this.subject, this.body);

  factory Message.fromJason(Map<String,dynamic>json)
  => _$MessageFromJson(json);
}

Wenn wir das so umgesetzt haben, können wir zum Beispiel auch ein neues Feld integrieren. Im Moment hat unser File subject und body als key's. Wenn wir einen dritten hinzufügen, der natürlich auch im JSON Datensatz seine Entsprechung finden muss, können wir die Klasse ergänzen und müssen dann anschliessend nur das File Message.g.dart neu generieren lassen. Das geschieht in dem wir wieder

flutter packages pub run build_runner build

aufrufen.

Dieses Beispiel hat eine sehr einfaches JSON File, keine weiteren Verschachtelungen etc. Darum muss man um komplexere Situation umsetzen zu können, sicher noch tiefer in die Materie eintauchen. Den kompletten Code findet ihr hier auf GitHub. Bis bald !