Nilai JSON dan as

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

Nilai dari map JSON bertipe dynamic. Dart tidak tahu apa tipenya, jadi Dart tidak memeriksa apa yang kamu lakukan dengannya, dan editor tidak bisa membantumu. Kamu tahu apa yang dikirim server: age adalah angka, isPro bernilai true atau false. Nyatakan tipe tersebut dengan as:

final age = user['age'] as int;
final isPro = user['isPro'] as bool;

as memeriksa nilai itu langsung di sana. Setelah itu, age bertipe int dan isPro bertipe bool, dan Dart memperlakukannya demikian. Jika server mengirim tipe lain, aplikasi gagal pada baris itu dengan pesan yang menyebutkan kedua tipe tersebut, bukan di tempat yang jauh.

Nilai JSON dipetakan ke tipe Dart seperti ini: teks di dalam tanda kutip adalah String, bilangan bulat adalah int, angka dengan titik desimal adalah double, dan true atau false adalah bool. Perhatikan bahwa true tidak memakai tanda kutip: nilainya bertipe bool, bukan teks 'true'.

Tantangan

Sedang

Tampilkan lebih banyak informasi profil. Di builder, baca setiap nilai dengan as: name dan email sebagai String, age sebagai int, isPro sebagai bool. Lalu, tambahkan di bawah email:

28 years old, dibuat dari age
Pro member jika isPro bernilai true, dan Free plan jika tidak

Coba sendiri

import 'dart:convert';

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<Map<String, dynamic>> _user;

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

  Future<Map<String, dynamic>> loadUser() async {
    final body = await fetch('/user');
    return jsonDecode(body);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: FutureBuilder<Map<String, dynamic>>(
          future: _user,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Could not load: ${snapshot.error}');
            }
            if (snapshot.hasData) {
              final user = snapshot.data!;
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    user['name'],
                    style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 8),
                  Text(user['email'], style: const TextStyle(fontSize: 18)),
                ],
              );
            }
            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