قيم 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'.

التحدي

متوسط

اعرض المزيد من معلومات الملف الشخصي. في أداة البناء، اقرأ كل قيمة باستخدام as: اقرأ name وemail على أنهما String، وage على أنه int، وisPro على أنه bool. ثم أضف أسفل البريد الإلكتروني:

28 years old، مُنشأة من age
Pro member عندما تكون isPro صحيحة، و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();
          },
        ),
      ),
    );
  }
}