Scorri per aggiornare

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

Su un telefono, le persone trascinano un elenco verso il basso per ricaricarlo. Uno spinner scende dall’alto e i dati si aggiornano. Il widget di Flutter per farlo è RefreshIndicator:

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

onRefresh è una funzione che restituisce un Future. Lo spinner di caricamento resta visibile finché quel future non è completato, quindi usa await per attendere i nuovi dati al suo interno:

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

Il trascinamento funziona solo su qualcosa che scorre. Inserisci il contenuto in un ListView, anche quando è un singolo elemento: un ListView può sempre essere trascinato. Lo spinner di caricamento indica già che l’app sta lavorando, quindi il builder può mantenere il suggerimento precedente con un controllo hasData.

Sfida

Medio

Fai ricaricare il suggerimento quando trascini lo schermo verso il basso:

aggiungi un metodo refresh che imposta un nuovo _tip in setState e lo attende
racchiudi il body in un RefreshIndicator con onRefresh: refresh
inserisci il FutureBuilder in un ListView al suo interno

Nell'anteprima, trascina lo schermo verso il basso con il mouse.

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

Mettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Dati e rete

Esercitati da solo: Compilatore Flutter online