使用 RefreshIndicator 从 Web 服务刷新列表视图

问题描述

我不明白 Flutter 中 Refreshindicator 的使用。 我有一个诊所的患者列表。患者列表在应用中显示后可能会发生变化，其他应用用户可以添加新患者或删除现有患者。

我需要的是实现一种在需要时刷新患者列表的方法。

这是我显示列表项的代码：

//LISTA DE PACIENTES
            Expanded(
              child: Consumer(
                builder: (context,watch,child) {
                  var value = watch(clinicaIdStateProvider).state;

                  return Container(
                    child: FutureBuilder(
                      future: fetchPacientes(value),builder: (context,snapshot) {

                        if (snapshot.hasData) {
                          var filteredList = snapshot.data;
                          print("a minusculas:"+_controller.text.toLowerCase());
                          filteredList = filteredList.where((element) => (
                              element.nombre_completo.toLowerCase().contains(_controller.text.toLowerCase()) ||
                                  element.NHC.toLowerCase().contains(_controller.text.toLowerCase()) ||
                                  element.apellidos.toLowerCase().contains(_controller.text.toLowerCase())
                          )).toList();

                          print("texto filTrado="+_controller.text.toLowerCase());


                          return ListView.builder(
                            itemCount: filteredList.length,shrinkWrap: true,itemBuilder: (BuildContext context,index) {
                              Paciente paciente = filteredList[index];
                              return new GestureDetector(
                                onTap: () {
                                  print("paciente seleccionada nbre: " +
                                      '${paciente.nombre_completo}');
                                },child: new Card(

                                  elevation: 6,child: new Container(

                                    child: Column(
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(4.0),child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,children: [
                                              Padding(
                                                padding:
                                                    const EdgeInsets.all(4.0),child: Text(
                                                  "${paciente.apellidos}" +
                                                      "," +
                                                      "${paciente.nombre_completo}",style:
                                                      TextStyle(fontSize: 18),),Column(
                                                children: [
                                                  Container(
                                                    decoration: Boxdecoration(
                                                        color:
                                                            AppColors.azulCapenergy,border: Border.all(
                                                          color: AppColors
                                                              .azulCapenergy,borderRadius:
                                                            BorderRadius.all(
                                                                Radius.circular(
                                                                    12))),child: Padding(
                                                      padding:
                                                          const EdgeInsets.all(4.0),child: Text(
                                                        "NHC: ${paciente.NHC}",style: TextStyle(
                                                            color: AppColors
                                                                .blancoCapenergy,fontSize: 16),SizedBox(height: 3,FlatButton(
                                                    onpressed: (){
                                                      print("boton agenda pulsado de ${paciente.nombre_completo}");
                                                    },child: Container(
                                                      decoration: Boxdecoration(
                                                          color:
                                                          Colors.transparent,border: Border.all(
                                                            color: AppColors
                                                                .azulCapenergy,borderRadius:
                                                          BorderRadius.all(
                                                              Radius.circular(
                                                                  15))),child: Padding(
                                                        padding:
                                                        const EdgeInsets.all(8.0),child: Image.network(
                                                          'https://.../agenda.png',height: 25,],);
                            },);
                        }

                        return Image.asset(
                          "assets/images/vacio.png",fit: BoxFit.contain,);
                      },);
                },

在 FutureBuilder 子节点中，我正在调用填充列表视图的方法：

fetchPacientes(value)

在我当前的应用中实现 Refreshindicator 的最佳方式是什么？

解决方法

我就是这样做的..

您必须为您的 StatefulWidget 创建一个单独的 ListView.Builder

class XYZ extends StatefulWidget {
  final filteredList;

  const XYZ(this.filteredList);
  @override
  _XYZState createState() => _XYZState();
}

class _XYZState extends State<XYZ> {
  var refreshfilteredList;

  @override
  Widget build(BuildContext context) {
    var filteredList = refreshfilteredList ?? widget.filteredList;

    return RefreshIndicator(
        onRefresh: () async {
          refreshfilteredList = await fetchPacientes(value);

          refreshfilteredList = refreshfilteredList
              .where((element) => (element.nombre_completo
                      .toLowerCase()
                      .contains(_controller.text.toLowerCase()) ||
                  element.NHC
                      .toLowerCase()
                      .contains(_controller.text.toLowerCase()) ||
                  element.apellidos
                      .toLowerCase()
                      .contains(_controller.text.toLowerCase())))
              .toList();
          setState(() {});
        },child: ListView.builder());
  }
}

实施

 Expanded(
              child: Consumer(
                builder: (context,watch,child) {
                  var value = watch(clinicaIdStateProvider).state;

                  return Container(
                    child: FutureBuilder(
                      future: fetchPacientes(value),builder: (context,snapshot) {

                        if (snapshot.hasData) {
                          var filteredList = snapshot.data;
                          print("a minusculas:"+_controller.text.toLowerCase());
                          filteredList = filteredList.where((element) => (
                              element.nombre_completo.toLowerCase().contains(_controller.text.toLowerCase()) ||
                                  element.NHC.toLowerCase().contains(_controller.text.toLowerCase()) ||
                                  element.apellidos.toLowerCase().contains(_controller.text.toLowerCase())
                          )).toList();

                          print("texto filtrado="+_controller.text.toLowerCase());


                          return XYZ(filteredList)