Odczytywanie JSON

Część sekcji Dane i sieć ścieżki Flutter w Coddy. Lekcja 15 z 27.

Serwery rzadko odpowiadają zwykłym zdaniem. Wysyłają JSON: tekst zawierający dane, z nazwami ujętymi w cudzysłowy i wartościami występującymi po dwukropku. API do ćwiczeń zwraca z punktu końcowego /user taką odpowiedź:

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

Dla Twojej aplikacji jest to jeden długi ciąg znaków typu String. jsonDecode z biblioteki dart:convert w Dart zamienia ten tekst na wartości języka Dart. Nawiasy klamrowe stają się strukturą Map: nazwy są jej kluczami.

import 'dart:convert';

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

Klucze są zawsze ciągami znaków. Wartości mogą być tekstem, liczbami, true lub false, listami albo kolejnymi mapami, dlatego ich typ to dynamic: „dowolny typ, ustalany podczas działania aplikacji”. Klucze muszą dokładnie pasować: user['Name'] to nie user['name'], a brakujący klucz daje wartość null.

Odszyfruj odpowiedź w miejscu, w którym ją pobierasz, we własnej funkcji, aby ekran otrzymał gotowe do użycia dane.

Wyzwanie

Średni

Ekran profilu wyświetla surowy JSON. Wyświetl dane osoby:

loadUser zwraca Future<Map<String, dynamic>>: oczekuje na fetch('/user') i zwraca wynik jsonDecode dla treści odpowiedzi (zaimportuj dart:convert)
_user i FutureBuilder również używają tego typu
gdy dane dotrą, wyświetl Column z user['name'] (rozmiar 28, pogrubienie), a pod nim user['email']

Spróbuj swoich sił

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();
          },
        ),
      ),
    );
  }
}