JSON lesen

Teil des Abschnitts Daten und Netzwerk der Flutter-Journey von Coddy. Lektion 15 von 27.

Server antworten selten mit einem einfachen Satz. Sie senden JSON: Text, der Daten enthält, mit Namen in Anführungszeichen und Werten nach einem Doppelpunkt. Die Übungs-API unter /user antwortet so:

{
  "name": "Maya Chen",
  "email": "maya@example.com",
  "age": 28,
  "isPro": true
}

Für deine App ist das ein langer String. jsonDecode aus der Dart-Bibliothek dart:convert wandelt diesen Text in Dart-Werte um. Geschweifte Klammern werden zu einer Map: Die Namen sind ihre Schlüssel.

import 'dart:convert';

final Map<String, dynamic> user = jsonDecode(body);
print(user['name']);   // Maya Chen

Die Schlüssel sind immer Zeichenfolgen. Die Werte können Text, Zahlen, true oder false, Listen oder weitere Maps sein. Deshalb ist ihr Typ dynamic: „jeder Typ, der während der Ausführung der App festgelegt wird“. Schlüssel müssen genau übereinstimmen: user['Name'] ist nicht user['name'], und ein fehlender Schlüssel ergibt null.

Wandle die Antwort dort um, wo du sie abrufst, und zwar in einer eigenen Funktion, damit der Bildschirm sofort verwendbare Daten erhält.

Aufgabe

Mittel

Der Profilbildschirm zeigt das rohe JSON. Zeige stattdessen die Person an:

loadUser gibt ein Future<Map<String, dynamic>> zurück: Es wartet auf fetch('/user') und gibt jsonDecode des Bodys zurück (importiere dart:convert)
_user und der FutureBuilder verwenden ebenfalls diesen Typ
wenn die Daten eintreffen, zeige eine Column mit user['name'] (Größe 28, fett) und darunter user['email']

Probier es selbst

import 'package:flutter/material.dart';

import 'api.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfileScreen(),
    );
  }
}

class ProfileScreen extends StatefulWidget {
  const ProfileScreen({super.key});

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  late Future<String> _user;

  @override
  void initState() {
    super.initState();
    _user = loadUser();
  }

  Future<String> loadUser() async {
    return fetch('/user');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: FutureBuilder<String>(
          future: _user,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Could not load: ${snapshot.error}');
            }
            if (snapshot.hasData) {
              return Text(snapshot.data!);
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Daten und Netzwerk

Übe selbstständig: Online-Flutter-Compiler