Recargar datos con un botón

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

Para cargar datos actualizados, dale a FutureBuilder un futuro nuevo. Créalo en setState para que la pantalla se reconstruya con él:

IconButton(
  icon: const Icon(Icons.refresh),
  onPressed: () {
    setState(() {
      _tip = fetch('/tip');
    });
  },
)

El nuevo consejo llega 2 segundos después. Mientras se carga, snapshot.hasData sigue siendo true: el constructor conserva los datos antiguos hasta que los nuevos los reemplazan. Con una comprobación de hasData, el consejo antiguo permanece en la pantalla y nada indica que la aplicación esté funcionando.

Para volver a mostrar el indicador de carga, consulta snapshot.connectionState, que indica en qué estado se encuentra el futuro. Su valor es ConnectionState.waiting mientras se ejecuta un futuro y ConnectionState.done cuando ha terminado:

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
return Text(snapshot.data!);

Cuando ha terminado, los datos están ahí, así que snapshot.data! es seguro.

Desafío

Intermedio

Añade un botón de actualización que cargue el siguiente consejo:

un IconButton con Icons.refresh en actions de la barra superior
al pulsarlo, se asigna un nuevo fetch('/tip') a _tip dentro de setState
el indicador de carga se muestra mientras se carga el nuevo consejo: comprueba snapshot.connectionState

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

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

  @override
  State<TipScreen> createState() => _TipScreenState();
}

class _TipScreenState extends State<TipScreen> {
  late Future<String> _tip;

  @override
  void initState() {
    super.initState();
    _tip = fetch('/tip');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tip of the Day'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: FutureBuilder<String>(
              future: _tip,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    snapshot.data!,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 24),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),
        ),
      ),
    );
  }
}

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