fluttermobilepage-refreshflutter-pageview

Flutter Refresh indicator over PageVIew


In Flutter I would use a refreshIndicator to refresh a list made by an horrizontal pageview (a list of scrollable cards), but it seems that refreshIndicator works only with listView / gridView.

Has anyone faced this problem?


Solution

  • So i tried this custom_refresh_indicator: ^3.1.0, and it works for your case, you can try running below code

    class ApiWidget extends StatefulWidget {
      const ApiWidget({Key? key}) : super(key: key);
    
      @override
      State<ApiWidget> createState() => _ApiWidgetState();
    }
    
    class _ApiWidgetState extends State<ApiWidget> {
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: CustomMaterialIndicator(
            onRefresh: () async {}, // Your refresh logic
            indicatorBuilder:
                (BuildContext context, IndicatorController controller) {
              return const Icon(
                Icons.ac_unit,
                color: Colors.blue,
                size: 30,
              );
            },
            child: PageView.builder(
              itemBuilder: (ctx, index) {
                return Center(
                  child: Text(
                    index.toString(),
                    style: const TextStyle(fontSize: 17),
                  ),
                );
              },
              itemCount: 12,
            ),
          ),
        );
      }
    }