RefreshIndicator breaks when the ListView has a ScrollController

[tevjef]

Steps to Reproduce

import 'package:flutter/material.dart';

import 'dart:async';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new TodosPage(),
    );
  }
}


class TodosPage extends StatefulWidget {
  TodosPage({Key key}) : super(key: key);
  @override
  _TodosPageState createState() => new _TodosPageState();
}

class _TodosPageState extends State<TodosPage> {
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
      new GlobalKey<RefreshIndicatorState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(title: new Text("My Todos")),
      body: new RefreshIndicator(
        key: _refreshIndicatorKey,
          child: new ListView.builder(
            itemCount: 5, // Change to 50 and rebuild
            controller: ScrollController(), // Removing this makes pull to refresh work in both cases.
            itemBuilder: _itemBuilder,
          ),
        onRefresh: _onRefresh,
      ),
    );
  }

  // simulate a http request
  Future<Null> _onRefresh() {
    Completer<Null> completer = new Completer<Null>();

    new Timer(new Duration(seconds: 3), () {
      print("timer complete");
      completer.complete();
    });

    return completer.future;
  }

  Widget _itemBuilder(BuildContext context, int index) {
    return new ListTile(title: Text("Todo $index"));
  }
}

When using a ScrollController one ListView, OverscrollNotifications are not sent to RefreshIndicator when all list items fit on screen. As such you cannot pull to refresh.

Comments in the code indicate what you need to do to replicate this bug.

[✓] Flutter (Channel beta, v0.8.2, on Mac OS X 10.13.6 17G65, locale en-US)
    • Flutter version 0.8.2 at /Users/tevjef/Desktop/Development/flutter
    • Framework revision 5ab9e70727 (2 weeks ago), 2018-09-07 12:33:05 -0700
    • Engine revision 58a1894a1c
    • Dart version 2.1.0-dev.3.1.flutter-760a9690c2

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.2)
    • Android SDK at /usr/local/share/android-sdk
    • Android NDK at /usr/local/share/android-sdk/ndk-bundle
    • Platform android-28, build-tools 28.0.2
    • ANDROID_HOME = /usr/local/share/android-sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.4.1, Build version 9F2000
    • ios-deploy 1.9.2
    • CocoaPods version 1.5.0

[✓] Android Studio
    • Android Studio at /Applications/Android Studio 3.2 Preview.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

[✓] Android Studio
    • Android Studio at /Applications/Android Studio 3.3 Preview.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

[✓] Android Studio (version 3.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 28.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[✓] IntelliJ IDEA Ultimate Edition (version 2018.2.3)
    • IntelliJ at /Users/tevjef/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 28.0.4
    • Dart plugin version 182.4323.44

[!] VS Code (version 1.27.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected devices (1 available)
    • iPhone X • ED4365D3-5EA2-4556-8CDC-88E7A3C87FB1 • ios • iOS 11.4 (simulator)

! Doctor found issues in 1 category.

[sdabbo]

+1

[zoechi]

@sdabbo Using "add reaction" on the initial comment would increase priority while +1 comments are rather pointless and cause lots of people to get notified for no reason.
To get notified use the [Subscribe] button to the top right instead.

[txthinking]

I found a similar problem, if make ListView.builder inside SingleChildScrollView, onRefresh does not work.

A piece of code:

RefreshIndicator(
  onRefresh: ...
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: ListView.builder(),
  ),
)

[yk3372]

@tevjef
I find a way to solve it.

body: RefreshIndicator(
        onRefresh: _refresh,
        child: ListView.builder(
          controller: _controller,
          physics: const AlwaysScrollableScrollPhysics(),
          itemCount: items.length,
          itemBuilder: (context, index) => ListTile(
                title: Text('Item ${items[index]}'),
              ),
        ),
      )

The core code is : physics: const AlwaysScrollableScrollPhysics(). This is works for me.

[arok]

Moreover in the case ScrollController breaks behaviour of SliverAppBar and CupertinoSliverNavigationBar. I mean behaviour when AppBar scrolls with a content. The issue looks what I mean #31898

[Smartiiez]

I had the same issue, but in my ListView Builder, I forget to remove shrinkWrap: true

[tsx1453]

@tevjef
I find a way to solve it.

body: RefreshIndicator(
        onRefresh: _refresh,
        child: ListView.builder(
          controller: _controller,
          physics: const AlwaysScrollableScrollPhysics(),
          itemCount: items.length,
          itemBuilder: (context, index) => ListTile(
                title: Text('Item ${items[index]}'),
              ),
        ),
      )

The core code is : physics: const AlwaysScrollableScrollPhysics(). This is works for me.

I had the same issue too,and i want to listen the listView scroll,but i found the scrollController dont'work

[ankitshah1910]

tsx1453's code also worked for me.

[serkanince]

When using scrollDirection: Axis.horizontal on ListView, RefreshIndicator is don't working :/

[Tumbler0809]

ScrollController doesn't work when ListView is not full screen

[perclasson]

As said above the solution is to set the physics property to AlwaysScrollableScrollPhysics(). For the RefreshIndicator widget to to get the scroll notifications, the child widget must always be scrollable.

The child widget is not scrollable when the ScrollController is provided as it will set the ScrollView.primary property to false. From the documentation:
“Furthermore, if primary is false, then the user cannot scroll if there is insufficient content to scroll, while if primary is true, they can always attempt to scroll.”

To make it more clear that the child is required to be scrollable, we should update the documentation. See PR: #50345

[jefferyleo]

@yk3372 <= His code is working for me, thanks and appreciate the flutter community.

[ibyet05]

The solution does not work with the below code.

SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
width: 2000,
child: RefreshIndicator(
onRefresh: () {
return Future.delayed(Duration(seconds: 2));
},
child: ListView.builder(
itemCount: 100,
physics: const AlwaysScrollableScrollPhysics(),
itemBuilder: (context, i) => ListTile(
title: Text("Text $i"),
),
),
),
))

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.