JSON Okuma

Coddy'nin Flutter Journey'sinin Veri ve Ağ bölümünün bir parçası. Ders 15 / 27.

Sunucular nadiren düz bir cümleyle yanıt verir. JSON gönderirler: verileri içeren, adları tırnak içinde ve değerleri iki noktadan sonra gelen metin. Deneme API'sindeki /user şu yanıtı verir:

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

Uygulaman için bu, uzun bir String'dir. Dart'ın dart:convert kütüphanesindeki jsonDecode, bu metni Dart değerlerine dönüştürür. Süslü parantezler bir Map olur: adlar, bu haritanın anahtarlarıdır.

import 'dart:convert';

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

Anahtarlar her zaman dizelerdir. Değerler metin, sayılar, true veya false, listeler ya da başka haritalar olabilir; bu nedenle türleri dynamic'dir: "herhangi bir tür, uygulama çalışırken belirlenir". Anahtarlar birebir eşleşir: user['Name'], user['name'] ile aynı değildir ve eksik bir anahtar null verir.

Ekranın kullanıma hazır veriler alması için yanıtı, veriyi aldığın yerde, kendi işlevinde çözümle.

Görev

Orta

Profil ekranı ham JSON verisini gösteriyor. Bunun yerine kişiyi göster:

loadUser, bir Future<Map<String, dynamic>> döndürür: fetch('/user') çağrısını bekler ve gövdenin jsonDecode sonucunu döndürür (dart:convert içe aktar)
_user ve FutureBuilder da aynı türü kullanır
veri geldiğinde, user['name'] (boyut 28, kalın) ve altında user['email'] bulunan bir Column göster

Kendin dene

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