Membaca JSON

Termasuk bagian Data dan Jaringan dalam perjalanan Flutter di Coddy. Pelajaran 15 dari 27.

Server jarang menjawab dengan kalimat biasa. Server mengirim JSON: teks yang memuat data, dengan nama di dalam tanda kutip dan nilai setelah titik dua. API latihan menjawab permintaan /user seperti ini:

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

Bagi aplikasimu, isinya adalah satu String panjang. jsonDecode, dari library dart:convert milik Dart, mengubah teks itu menjadi nilai Dart. Kurung kurawal menjadi Map: nama-nama tersebut adalah kuncinya.

import 'dart:convert';

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

Kuncinya selalu berupa string. Nilainya bisa berupa teks, angka, true atau false, list atau map lainnya, jadi tipenya adalah dynamic: "tipe apa saja, ditentukan saat aplikasi berjalan". Kunci harus sama persis: user['Name'] tidak sama dengan user['name'], dan kunci yang tidak ada menghasilkan null.

Decode jawabannya di tempat kamu mengambilnya, dalam fungsi tersendiri, agar layar menerima data yang siap digunakan.

Tantangan

Sedang

Layar profil menampilkan JSON mentah. Tampilkan orangnya:

loadUser mengembalikan Future<Map<String, dynamic>>: fungsi ini menunggu fetch('/user') lalu mengembalikan hasil jsonDecode dari body (impor dart:convert)
_user dan FutureBuilder juga menggunakan tipe tersebut
saat data tiba, tampilkan Column dengan user['name'] (ukuran 28, tebal) dan user['email'] di bawahnya

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Data dan Jaringan

Latihan sendiri: Compiler Flutter online