Valores JSON y as

Parte de la sección Datos y red del Journey de Flutter de Coddy. Lección 16 de 27.

Un valor de un mapa JSON es dynamic. Dart no sabe qué es, así que no comprueba qué haces con él y el editor no puede ayudarte. Sabes qué envía el servidor: age es un número, isPro es true o false. Indícalo con as:

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

as comprueba el valor en ese mismo lugar. A partir de ahí, age es un int y isPro es un bool, y Dart los trata como tales. Si el servidor envió otra cosa, la aplicación falla en esa línea con un mensaje que indica ambos tipos, en lugar de fallar en algún lugar lejano.

Los valores JSON se corresponden con los tipos de Dart de esta manera: el texto entre comillas es un String, un número entero es un int, un número con punto decimal es un double y true o false es un bool. Ten en cuenta que true no lleva comillas: es un bool, no el texto 'true'.

Desafío

Intermedio

Muestra más información del perfil. En el constructor, lee cada valor con as: name y email como String, age como int, isPro como bool. Después, debajo del correo electrónico, añade:

28 years old, creado a partir de age
Pro member cuando isPro es true, y Free plan cuando no lo es

Pruébalo tú mismo

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

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Datos y red

Practica por tu cuenta: Compilador de Flutter online