Valeurs JSON et as

Fait partie de la section Données et réseau du Journey Flutter de Coddy. Leçon 16 sur 27.

Une valeur provenant d’une map JSON est dynamic. Dart ne sait pas de quoi il s’agit, donc il ne vérifie pas ce que tu en fais, et l’éditeur ne peut pas t’aider. Tu sais ce que le serveur envoie : age est un nombre, isPro est true ou false. Indique-le avec as :

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

as vérifie la valeur à cet endroit. À partir de là, age est un int et isPro est un bool, et Dart les traite comme tels. Si le serveur a envoyé autre chose, l’application échoue sur cette ligne avec un message qui nomme les deux types, plutôt qu’à un endroit éloigné.

Les valeurs JSON correspondent aux types Dart comme suit : un texte entre guillemets est une String, un nombre entier est un int, un nombre avec une virgule est un double, et true ou false est un bool. Note que true n’a pas de guillemets : c’est un bool, pas le texte 'true'.

Défi

Moyen

Affiche plus d’informations sur le profil. Dans le constructeur, lis chaque valeur avec as : name et email en tant que String, age en tant que int, isPro en tant que bool. Ensuite, sous l’adresse e-mail, ajoute :

28 years old, construit à partir de age
Pro member lorsque isPro est true, et Free plan dans le cas contraire

Essayez vous-même

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