ערכי JSON ו-as

חלק מהיחידה נתונים ורשת במסלול ה-Flutter של Coddy. שיעור 16 מתוך 27.

ערך ממפת JSON הוא dynamic. Dart לא יודע מהו, ולכן הוא לא בודק מה עושים איתו, והעורך לא יכול לעזור לך. אתה יודע מה השרת שולח: age הוא מספר, ו-isPro הוא true או false. ציין זאת באמצעות as:

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

as בודק את הערך בדיוק במקום הזה. מכאן ואילך age הוא int ו-isPro הוא bool, ו-Dart מתייחס אליהם בהתאם. אם השרת שלח משהו אחר, האפליקציה נכשלת בשורה הזאת עם הודעה שמציינת את שני הטיפוסים, במקום כלשהו רחוק משם.

ערכי JSON ממופים לטיפוסי Dart כך: טקסט במרכאות הוא String, מספר שלם הוא int, מספר עם נקודה הוא double, ו-true או false הוא bool. שים לב של-true אין מרכאות: הוא bool, ולא הטקסט 'true'.

אתגר

בינוני

הציגו פרטים נוספים בפרופיל. ב־builder, קראו כל ערך בעזרת as: את name ואת email בתור String, את age בתור int, ואת isPro בתור bool. לאחר מכן, מתחת לכתובת האימייל, הוסיפו:

28 years old, שנבנה מתוך age
Pro member כאשר isPro הוא true, ו־Free plan כאשר לא

נסו בעצמכם

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