Menu
CoddyTech

Конструктор fromJson

Часть раздела Данные и сеть путешествия по Flutter на Coddy. Урок 17 из 27.

Читать user['name'] as String по всему приложению неудобно, а одна опечатка в ключе приводит к ошибке. Обычно для решения этой проблемы создают класс для данных с одним конструктором, который знает, как работать с JSON. Он называется fromJson:

class User {
  User({required this.name, required this.age});

  final String name;
  final int age;

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: json['name'] as String,
      age: json['age'] as int,
    );
  }
}

User.fromJson — это именованный конструктор, второй способ создать User. Слово factory позволяет конструктору выполнять код и return созданный им объект. Обычный конструктор не может ничего return.

Теперь JSON читается в одном месте. Остальная часть приложения получает настоящий User, у которого user.name — это String, а опечатка приведёт к ошибке компиляции вместо null:

final body = await fetch('/user');
return User.fromJson(jsonDecode(body));

Почти в каждом приложении, которое взаимодействует с сервером, есть fromJson для каждого вида получаемых данных.

challenge icon

Задание

Сложно

В профиле указано Unknown: loadUser игнорирует JSON. Добавь в User фабричный конструктор factory User.fromJson(Map<String, dynamic> json), который считывает name, email и age, и сделай так, чтобы loadUser возвращал User.fromJson(jsonDecode(body)). Импортируй 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<User> _user;

  @override
  void initState() {
    super.initState();
    _user = loadUser();
  }

  Future<User> loadUser() async {
    final body = await fetch('/user');
    print(body);
    return User(name: 'Unknown', email: 'unknown', age: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: Center(
        child: FutureBuilder<User>(
          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)),
                  const SizedBox(height: 8),
                  Text('${user.age} years old'),
                ],
              );
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

class User {
  User({required this.name, required this.email, required this.age});

  final String name;
  final String email;
  final int age;
}
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Данные и сеть

Потренируйтесь самостоятельно: Онлайн-компилятор Flutter