Giá trị JSON và as

Thuộc phần Dữ liệu và mạng trong hành trình Flutter của Coddy. Bài học 16 trên 27.

Một giá trị trong map JSON có kiểu dynamic. Dart không biết giá trị đó là gì, nên không kiểm tra cách bạn sử dụng nó, và trình chỉnh sửa cũng không thể giúp bạn. Bạn biết máy chủ gửi gì: age là một số, isPro là true hoặc false. Hãy khai báo kiểu đó bằng as:

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

as kiểm tra giá trị ngay tại đó. Từ đó trở đi, age là một int và isPro là một bool, Dart sẽ xử lý chúng theo các kiểu đó. Nếu máy chủ gửi một giá trị khác, ứng dụng sẽ lỗi ngay tại dòng đó và thông báo sẽ nêu tên cả hai kiểu, thay vì báo lỗi ở một nơi nào đó rất xa.

Các giá trị JSON tương ứng với những kiểu Dart như sau: văn bản đặt trong dấu ngoặc kép là String, số nguyên là int, số có dấu chấm là double, còn true hoặc false là bool. Lưu ý rằng true không có dấu ngoặc kép: đó là bool, không phải văn bản 'true'.

Thử thách

Trung bình

Hiển thị thêm thông tin hồ sơ. Trong builder, đọc từng giá trị bằng as: name và email dưới dạng String, age dưới dạng int, isPro dưới dạng bool. Sau đó, thêm bên dưới email:

28 years old, tạo từ age
Pro member khi isPro là true và Free plan khi không phải

Tự làm thử

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