Refresh Indicator Not Working on Scroll in Flutter

In this example, you will learn how to solve if RefreshIndicator() is not working on scroll when the ListView() or SingleChildScrollView() is not fully filled to its height. See the simple configuration on ScrollView to perfectly work Refresh Indicator.

When scrollable widgets like ListView() or SingleChildScrollView() are not filled fully to their height, the scrolling is disabled, and therefore, the RefreshIndicator() will also not work.

To solve, this issue, your scrollable widget must scroll even if it hasn't taken full of its height.

RefreshIndicator(
  onRefresh: () async{
      await Future.delayed(Duration(seconds: 3));
  },
  child:SingleChildScrollView(
    physics: AlwaysScrollableScrollPhysics(),
  )
)

You have to add always scrollable physics to SingleChildScrollView() or ListView():

ListView(
   physics: AlwaysScrollableScrollPhysics()
)

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar( 
          title: Text("Refresh Indicator"),
          backgroundColor: Colors.deepPurpleAccent,
      ),
      body: RefreshIndicator(
          onRefresh: () async{
              await Future.delayed(Duration(seconds: 3));
          },
          child:SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(),
            child:Column(
                children: [
                  for(int x = 1; x <=4;x++)...[
                      Container(
                        height: 100,
                        color: Colors.redAccent,
                      )
                  ] 
                ]
            ),
         )
      ),
    );
  }
}

In this way, you can solve refresh indicator not working issue when scrollable widget won't fulfill its height. 

No any Comments on this Article


Please Wait...