Flutter: JSON та API — Основи та Практичні Приклади

Sehza · Квт. 01, 2025, 01:19 PM

Flutter — це популярний фреймворк від Google для створення кросплатформених додатків. Одним із ключових аспектів розробки є робота з даними, які часто надходять із зовнішніх джерел через API у форматі JSON. У цій статті ми розглянемо, що таке JSON і API, як їх використовувати у Flutter, і надамо практичні приклади коду. Цей матеріал ідеально підійде як для новачків, так і для розробників, які хочуть поглибити свої знання.

Що таке JSON та API?
JSON (JavaScript Object Notation) — це легкий формат обміну даними, який легко читається людьми та обробляється машинами. Він широко використовується для передачі даних між сервером і клієнтом. Приклад JSON:

Ко Select

{
  "id": 1,
  "name": "Продукт",
  "price": 29.99
}

API (Application Programming Interface) — це набір правил, які дозволяють додаткам взаємодіяти з зовнішніми сервісами. У контексті Flutter, ми зазвичай використовуємо REST API, щоб отримувати або надсилати дані у форматі JSON.

Як працювати з JSON та API у Flutter?
Для роботи з API у Flutter потрібні:

HTTP-запити: Бібліотека http для надсилання запитів.
Парсинг JSON: Перетворення JSON у Dart-об'єкти.
Асинхронність: Використання async/await для обробки запитів.

Нижче розглянемо покроковий процес із прикладами.

Крок 1: Додавання залежностей
Додайте бібліотеку http у файл pubspec.yaml:

Ко Select

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0

Запустіть flutter pub get, щоб встановити залежність.

Крок 2: Створення моделі для JSON
Припустимо, ми отримуємо дані про користувача у такому форматі:

Ко Select

{
  "id": 1,
  "name": "Олександр",
  "email": "[email protected]"
}

Створимо модель у Dart:

Ко Select

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

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

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

Метод fromJson дозволяє перетворити JSON у об'єкт Dart.

Крок 3: Виконання HTTP-запиту
Тепер зробимо GET-запит до API (наприклад, до тестового сервісу jsonplaceholder.typicode.com):

Ко Select

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  User? user;
  bool isLoading = false;

  Future<void> fetchUser() async {
    setState(() {
      isLoading = true;
    });

    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users/1'));
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      setState(() {
        user = User.fromJson(data);
        isLoading = false;
      });
    } else {
      setState(() {
        isLoading = false;
      });
      throw Exception('Не вдалося завантажити дані');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchUser();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter JSON та API')),
      body: Center(
        child: isLoading
            ? CircularProgressIndicator()
            : user != null
                ? Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('ID: ${user!.id}'),
                      Text('Ім'я: ${user!.name}'),
                      Text('Email: ${user!.email}'),
                    ],
                  )
                : Text('Дані відсутні'),
      ),
    );
  }
}

У цьому прикладі:

Ми надсилаємо GET-запит до API.
Парсимо отриманий JSON у об'єкт User.
Відображаємо дані на екрані з індикатором завантаження.

Крок 4: Робота зі списком даних
Якщо API повертає список (наприклад, кілька користувачів), оновимо код:

Ко Select

class _HomeScreenState extends State<HomeScreen> {
  List<User> users = [];
  bool isLoading = false;

  Future<void> fetchUsers() async {
    setState(() {
      isLoading = true;
    });

    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
    if (response.statusCode == 200) {
      final List<dynamic> data = jsonDecode(response.body);
      setState(() {
        users = data.map((json) => User.fromJson(json)).toList();
        isLoading = false;
      });
    } else {
      setState(() {
        isLoading = false;
      });
      throw Exception('Не вдалося завантажити список');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchUsers();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Список користувачів')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(users[index].name),
                  subtitle: Text(users[index].email),
                );
              },
            ),
    );
  }
}

Тут ми використовуємо ListView.builder для відображення списку користувачів.

Поради для роботи з JSON та API у Flutter

Обробка помилок: Завжди перевіряйте статус-код відповіді та додавайте обробку винятків.
Оптимізація: Використовуйте FutureBuilder для асинхронного відображення даних.
Безпека: Для реальних додатків додавайте API-ключі та захищені з'єднання (HTTPS).
Кодогенерація: Для великих JSON-структур використовуйте інструменти, як-от json_serializable, щоб автоматично створювати моделі.

Висновок
Робота з JSON та API у Flutter — це базова навичка для створення сучасних додатків. У цій статті ми розглянули, як виконувати HTTP-запити, парсити JSON і відображати дані в інтерфейсі. Спробуйте ці приклади самостійно, адаптуйте їх під свої потреби та експериментуйте з реальними API!

Flutter: JSON та API — Основи та Практичні Приклади

Sehza