Практический API Coddy

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

Большинство приложений получают данные с сервера в интернете. В этих уроках проверки не могут подключиться к интернету, поэтому сервер находится внутри вашего приложения: lib/api.dart, тренировочный API Coddy. Откройте его в списке файлов и прочитайте. Вы не можете его изменить.

Вызываемая вами часть — это одна функция, fetch. Вы передаёте ей путь — часть веб-адреса после домена, а она возвращает ответ сервера в виде String через 2 секунды:

import 'api.dart';

final text = await fetch('/message');

Настоящее приложение делает то же самое с пакетом http. Оно отправляет запрос и ждёт тело ответа — текст, который вернул сервер:

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

final response = await http.get(Uri.parse('https://example.com/message'));
final text = response.body;

Код вокруг него остаётся таким же: функция async, await, затем setState с результатом. Всё, что вы здесь создадите, будет работать так же и с настоящим сервером.

Задание

Легко

При нажатии Load message появляется Loading..., и на этом всё. Заверши loadMessage: получи текст по пути /message с помощью fetch, затем покажи его вместо Loading....

Попробуйте сами

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

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  String message = 'No message yet';

  Future<void> loadMessage() async {
    setState(() {
      message = 'Loading...';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: loadMessage, child: const Text('Load message')),
          ],
        ),
      ),
    );
  }
}