API de prática da Coddy

Parte da seção Dados e rede do Journey de Flutter da Coddy. Lição 4 de 27.

A maioria dos aplicativos obtém seus dados de um servidor na internet. Nestas lições, as verificações não conseguem acessar a internet, então o servidor fica dentro do seu aplicativo: lib/api.dart, a API de prática da Coddy. Abra-o na lista de arquivos e leia-o. Você não pode alterá-lo.

A parte que você chama é uma função, fetch. Você fornece um caminho, a parte de um endereço da web que vem depois do domínio, e ela fornece a resposta do servidor como uma String, 2 segundos depois:

import 'api.dart';

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

Um aplicativo real faz o mesmo com o pacote http. Ele envia uma solicitação e aguarda o corpo da resposta, o texto que o servidor enviou de volta:

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

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

O código ao redor é o mesmo: uma função async, um await e, em seguida, setState com o resultado. Tudo o que você criar aqui funcionará da mesma maneira com um servidor real.

Desafio

Fácil

Ao tocar em Load message, aparece Loading... e nada mais acontece. Conclua loadMessage: obtenha o texto do caminho /message com fetch e, em seguida, exiba-o no lugar de Loading....

Experimente você mesmo

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')),
          ],
        ),
      ),
    );
  }
}