Flutter – Implementando Pull to Refresh

La función tirar para actualizar o (deslizar para actualizar) permite al usuario desplegar para obtener más datos. La función de extracción para actualizar se puede ver en muchas aplicaciones modernas. La característica pull-to-refresh se puede implementar en aquellos componentes que son desplazables .

En este artículo, vamos a implementar esta función en Flutter. Si no está familiarizado con flutter, visite flutter.dev antes de profundizar en este artículo. Flutter se trata de widgets, todo en flutter no es más que widgets. Flutter también proporciona un widget para implementar esta función, así como, por ejemplo, RefreshIndicator.

RefreshIndicator: cuando el descendiente desplazable del niño se desplaza demasiado , aparece un indicador de progreso circular animado. Cuando finaliza el desplazamiento, si el indicador se ha arrastrado lo suficiente como para volverse completamente opaco, se llama a la devolución de llamada onRefresh . Se espera que la devolución de llamada actualice el contenido del desplazable y luego complete el futuro que devuelve. El indicador de actualización desaparece después de que se haya completado el futuro de la devolución de llamada.

Para crear una aplicación flutter, abra el comando/terminal y ejecute el siguiente comando:

flutter create app_name
// app_name should be the name of your app

Example:
flutter create demo_app

Después de ejecutar este comando, debería tener una carpeta con el nombre de aplicación especificado . Navegue a esa carpeta y abra el archivo lib/main.dart .

Note: In order to implement pull-to-refresh feature we are not going to use any other dependencies.

Para crear un RefreshIndicator use la siguiente sintaxis:

RefreshIndicator(
  child: ...
  onRefresh: ...
)

These are required fields.
child: Should be a scrollable widget
onRefresh: A function that should return a future. 
       Future is a type in dart.

Vamos a implementar esto paso a paso.

Paso 1 : como se discutió anteriormente para que RefreshIndicator funcione, vamos a necesitar un componente desplazable. Entonces, para eso, vamos a usar ListView. En este paso, vamos a definir algunos datos de demostración para nuestra aplicación.

// Local State to display items in listview
List<String> _demoData;
 
// This method will run once widget is loaded
// i.e when widget is mounting
@override
void initState() {
  // initializing state / demo data
  _demoData = [
    "Flutter",
    "React Native",
    "Cordova/ PhoneGap",
    "Native Script"
  ];
  super.initState();
}

Paso 2 : Vamos a crear nuestro ListView con ListItem y AlwaysScrollingPhysics.

... some code
 
ListView.builder(
  itemBuilder: (ctx, idx) {
    // List Item
    return Card(
      child: ListTile(
        title: Text(_demoData[idx]),
      ),
    );
  },
 
  // Length of the list
  itemCount: _demoData.length,
 
  // To make listView scrollable
  // even if there is only a single item.
  physics: const AlwaysScrollableScrollPhysics(),
)
   
... some code

Paso 3 : Finalmente, envuelva ListView en RefreshIndicator para usar la función de extracción para actualizar.

... some code
 
RefreshIndicator(
  child: ListView.builder(
    itemBuilder: (ctx, idx) {
      // List Item
      return Card(
        child: ListTile(
          title: Text(_demoData[idx]),
        ),
      );
    },
 
    // Length of the list
    itemCount: _demoData.length,
 
    // To make listView scrollable
    // even if there is only a single item.
    physics: const AlwaysScrollableScrollPhysics(),
  ),
  // Function that will be called when
  // user pulls the ListView downward
  onRefresh: () {
    return Future.delayed(
      Duration(seconds: 1),
      () {
        /// adding elements in list after [1 seconds] delay
        /// to mimic network call
        ///
        /// Remember: setState is necessary so that
        /// build method will run again otherwise
        /// list will not show all elements
        setState(() {
          _demoData.addAll(["Ionic", "Xamarin"]);
        });
         
        // showing snackbar
        _scaffoldKey.currentState.showSnackBar(
          SnackBar(
            content: const Text('Page Refreshed'),
          ),
        );
      },
    );
  },
)
   
... some code

Código fuente completo:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
 
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
 
/// [StatefulWidget] so that we can change
/// internal state to show proper working
/// of [PULL TO REFRESH] feature
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  // ScaffoldKey object. This is required
  // to show snackbar
  // This is optional. This is not required always
  GlobalKey<ScaffoldState> _scaffoldKey;
 
  // Local State to display items in listview
  List<String> _demoData;
 
  // This method will run once widget is loaded
  // i.e when widget is mounting
  @override
  void initState() {
    // initializing states
    _demoData = [
      "Flutter",
      "React Native",
      "Cordova/ PhoneGap",
      "Native Script"
    ];
    _scaffoldKey = GlobalKey();
    super.initState();
  }
 
  // This method will run when widget is unmounting
  @override
  void dispose() {
    // disposing states
    _scaffoldKey?.currentState?.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
        ),
        // Widget to show RefreshIndicator
        body: RefreshIndicator(
          child: ListView.builder(
            itemBuilder: (ctx, idx) {
              // List Item
              return Card(
                child: ListTile(
                  title: Text(_demoData[idx]),
                ),
              );
            },
 
            // Length of the list
            itemCount: _demoData.length,
 
            // To make listView scrollable
            // even if there is only a single item.
            physics: const AlwaysScrollableScrollPhysics(),
          ),
          // Function that will be called when
          // user pulls the ListView downward
          onRefresh: () {
            return Future.delayed(
              Duration(seconds: 1),
              () {
                /// adding elements in list after [1 seconds] delay
                /// to mimic network call
                ///
                /// Remember: [setState] is necessary so that
                /// build method will run again otherwise
                /// list will not show all elements
                setState(() {
                  _demoData.addAll(["Ionic", "Xamarin"]);
                });
 
                // showing snackbar
                _scaffoldKey.currentState.showSnackBar(
                  SnackBar(
                    content: const Text('Page Refreshed'),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Note: In some cases, you will notice that the refresh indicator is not showing.
      To make it visible all the time please use physics: In Flutter all the scrollable
      widgets have physics properties.

Lo siguiente permitirá el desplazamiento incluso si solo hay unos pocos elementos en la lista.

ListView(
  physics: const AlwaysScrollableScrollPhysics(),
  ...
)

Salida :