Deslizar para actualizar

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

En un teléfono, las personas deslizan una lista hacia abajo para volver a cargarla. Un indicador giratorio aparece desde la parte superior y los datos se actualizan. El widget de Flutter para esto es RefreshIndicator:

RefreshIndicator(
  onRefresh: refresh,
  child: ListView(
    children: [ ... ],
  ),
)

onRefresh es una función que devuelve un Future. El indicador giratorio permanece hasta que se completa ese futuro, así que usa await para esperar los datos nuevos dentro de la función:

Future<void> refresh() async {
  setState(() {
    _tip = fetch('/tip');
  });
  await _tip;
}

El gesto de deslizar hacia abajo solo funciona en algo que se desplaza. Pon el contenido en un ListView, incluso cuando sea un solo elemento: siempre se puede deslizar hacia abajo en un ListView. El indicador giratorio ya muestra que la aplicación está trabajando, así que el constructor puede conservar el consejo anterior con una comprobación de hasData.

Desafío

Intermedio

Haz que el consejo se vuelva a cargar al deslizar la pantalla hacia abajo:

añade un método refresh que establezca un nuevo _tip en setState y espere a que se complete
envuelve el cuerpo en un RefreshIndicator con onRefresh: refresh
coloca el FutureBuilder dentro de un ListView

En la vista previa, arrastra la pantalla hacia abajo con el ratón.

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