La API de práctica de Coddy

Parte de la sección Datos y red del Journey de Flutter de Coddy. Lección 4 de 27.

La mayoría de las aplicaciones obtienen sus datos de un servidor en internet. En estas lecciones, las comprobaciones no pueden acceder a internet, así que el servidor está dentro de tu aplicación: lib/api.dart, la API de práctica de Coddy. Ábrelo en la lista de archivos y léelo. No puedes cambiarlo.

La parte que llamas es una función, fetch. Le das una ruta, la parte de una dirección web que va después del dominio, y te devuelve la respuesta del servidor como un String, 2 segundos después:

import 'api.dart';

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

Una aplicación real hace lo mismo con el paquete http. Envía una solicitud y espera el cuerpo de la respuesta, el texto que devuelve el servidor:

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

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

El código que lo rodea es el mismo: una función async, un await y después setState con el resultado. Todo lo que construyas aquí funciona de la misma manera con un servidor real.

Desafío

Fácil

Al tocar Cargar mensaje, aparece Loading... y ahí se queda. Termina loadMessage: obtén el texto de la ruta /message con fetch y después muéstralo en lugar de Loading....

Pruébalo tú mismo

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

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Datos y red

Practica por tu cuenta: Compilador de Flutter online