API di esercitazione di Coddy

Fa parte della sezione Dati e rete del percorso Flutter di Coddy. Lezione 4 di 27.

La maggior parte delle app riceve i dati da un server su Internet. In queste lezioni i controlli non possono raggiungere Internet, quindi il server è all'interno della tua app: lib/api.dart, l'API di esercitazione di Coddy. Aprilo nell'elenco dei file e leggilo. Non puoi modificarlo.

La parte che chiami è una funzione, fetch. Le passi un percorso, la parte di un indirizzo web dopo il dominio, e 2 secondi dopo ti restituisce la risposta del server come String:

import 'api.dart';

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

Una vera app fa lo stesso con il pacchetto http. Invia una richiesta e attende il corpo della risposta, il testo inviato dal server:

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

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

Il codice che lo circonda è lo stesso: una funzione async, un await, poi setState con il risultato. Tutto ciò che costruisci qui funziona allo stesso modo con un vero server.

Sfida

Facile

Toccando Carica messaggio viene visualizzato Loading... e tutto si ferma lì. Completa loadMessage: recupera il testo dal percorso /message con fetch, poi visualizzalo al posto di Loading....

Provalo tu

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