flutter: получение JSON по HTTP и парсинг ответа

04.12.2018 at 09:12

Для работы с http в dart нужно подключить пакет http. Для этого в файл pubspec.yaml в секцию dependencies добавляем строчку

http: ^0.12.0

После этого загружаем пакет командой

flutter packages get

В файле подключаем импорты

import 'package:http/http.dart' as http;
import 'dart:convert';

Второй импорт нужен будет для парсинга JSON из строки ответа.

Создаем класс с данными (в примере это данные пользователя)

class User {
  final int id;
  final String name;
  final String email;

  User({this.id, this.name, this.email});

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

В классе User сделана фабрика для создания пользователя из JSON.

Добавляем в стейт виджета поле с данными пользователя

User _user;

Работа с HTTP происходит с помощью функций пакета http. Эти функции возвращают Future

void _updateData() {
  http.get('https://jsonplaceholder.typicode.com/users/1')
    .then(_processResponse);
}

void _processResponse(http.Response response) {
  if (response.statusCode == 200) {
    setState(() {
      _user = User.fromJson(json.decode(response.body));
    });
  }
}

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

Осталось добавить виджеты для отображения

Text(
  _user?.id?.toString() ?? '',
),
Text(
  _user?.name ?? '',
),
Text(
  _user?.email ?? '',
),

...

floatingActionButton: FloatingActionButton(
  onPressed: _updateData,
  child: Icon(Icons.add),
),

Все, теперь по нажатию на кнопку в виджет загружаются данные пользователя