Flutter: How to use RefreshIndicator with SliverAppBar

Question

I'm trying to add RefreshIndicator to CustomScrollView. Is it possible to do? Here is the code sample:

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('POSTAPP'),
      centerTitle: true,
      floating: true,
      pinned: false,
    ),
    SliverList(
        delegate: SliverChildBuilderDelegate(
          _createPostItem,
          childCount: postRepo.posts.length,
      ),
    ),
  ],
);

Did you try to just place your `CustomScrollView` within `RefreshIndicator`? — tomwyr, Sep 26 '18 at 13:20
Yes, but in that case the refresh indicator will wrap whole content, including app bar and list view , I want to position it between appBar and listview — Robert Apikyan, Sep 26 '18 at 13:31
i am facing the same issue, were you able to find a workaround for this case? I can't use NestedScrollView with my current setup. — kapil, Jan 15 '20 at 10:29
Check Andrey Turkovsky's answer https://stackoverflow.com/a/52518878/8153664 — Robert Apikyan, Jan 15 '20 at 11:43

score 27 · Answer 1 · answered Sep 26 '18 at 13:25

27

Only like this:

RefreshIndicator(child: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('POSTAPP'),
            centerTitle: true,
            floating: true,
            pinned: false,
          ),
          SliverList(
              delegate: SliverChildBuilderDelegate(_createPostItem,
                  childCount: postRepo.posts.length))
        ],
      ), onRefresh: () => Future.value(true));

SliverList isn't scrollable, so you can't wrap it in RefreshIndicator

answered Sep 26 '18 at 13:25

Andrii Turkovskyi

27,554
16
95
105

5

Is there any option to position RefreshIndicator between SliverAppBar and SliverList ? – Robert Apikyan Sep 26 '18 at 13:32
RefreshIndicator(displacement: ...) - by default displacement = 40.0. You can set it the same as expandedHeight of SliverAppBar and it'll be shown exactly below appbar. P.S. But it'll slide from up to down through appbar – Andrii Turkovskyi Sep 26 '18 at 13:51
1

I need to make it comes out under the app bar – Robert Apikyan Sep 26 '18 at 14:14
Afraid you can't – Andrii Turkovskyi Sep 26 '18 at 14:40
4

@RobertApikyan You can try using CupertinoSliverRefreshControl() and modifying its build method to display your custom refreshIndicator as needed. Happy Coding Example:https://gist.github.com/RabiRoshan/6ac289c26c2c726b145a69fa521e3c3d – Rabi Roshan Apr 28 '20 at 12:45

score 26 · Accepted Answer · answered Sep 26 '18 at 15:11

26

If you're not necessarily restricted to use CustomScrollView, you could achieve what you ask for with NestedScrollView:

@override
Widget build(BuildContext context) {
  return NestedScrollView(
    headerSliverBuilder: (context, innerBoxScrolled) => [
          SliverAppBar(
            title: Text('POSTAPP'),
            centerTitle: true,
            floating: true,
            pinned: false,
          ),
        ],
    body: RefreshIndicator(
      onRefresh: _loadMorePosts,
      child: ListView.builder(
        itemBuilder: _createPostItem,
        itemCount: _postsCount,
      ),
    ),
  );
}

answered Sep 26 '18 at 15:11

tomwyr

1,351
2
16
21

1

I tried this and it seems to prevent app bar show/hide on scroll behavior. What might cause that to happen? – SacWebDeveloper Feb 16 '20 at 08:55
@SacWebDeveloper experiencing same issue, but only with an 'expandable' SliverAppBar (one that has `FlexibleSpaceBar()` inside). – Jago Apr 20 '20 at 15:55
Doesn't work correctly with SliverAppBar with flexibleSpace. body remains scrollable even if it is empty – Nazarii Kahaniak Feb 01 '23 at 12:10

score 6 · Answer 3 · answered Jan 06 '22 at 22:22

For anyone circling back to this question, I have found a solution that works using the package pull_to_refresh.

final RefreshController _refreshController = RefreshController();

Future<void> _onRefresh() async {
  await Future<void>.delayed(const Duration(milliseconds: 1000));
  _refreshController.refreshCompleted();
}

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      SliverAppBar(
        title: Text('Title'),
        centerTitle: true,
        floating: true,
        pinned: false,
      ),
      SliverFillRemaining(
        child: SmartRefresher(
          controller: _refreshController,
          onRefresh: _onRefresh,
          // ListView, CustomScrollView, etc. here
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  height: 200,
                  color: Colors.red,
                ),
                Container(
                  height: 200,
                  color: Colors.blue,
                ),
                Container(
                  height: 200,
                  color: Colors.yellow,
                ),
              ],
            ),
          ),
        ),
      ),
    ],
  );
}

thank you for your solution. There is just on issue -> You have to use a singlechildscrollview, it doesn't work with a listview, which would be desirable for performance improvements — Gonçalo Gaspar, May 19 '22 at 13:41
@GonçaloGaspar I haven't worked with `Flutter` for a while, but when I originally tested this, it worked with `ListView`. Thanks for update. — Sam Doggett, May 19 '22 at 13:45

score 4 · Answer 4 · answered Dec 26 '22 at 01:45

You can use CupertinoSliverRefreshControl inside the slivers list, you need to apply physics: BouncingScrollPhysics() to your CustomScrollView.

example:

    return Scaffold(
      body: CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverAppBar(),
          CupertinoSliverRefreshControl(
            onRefresh: () => refreshList(),
          ),
          SliverList(delegate: delegate),
        ],
      ),
    );

in the example above, it will show RefreshIndicator in between the AppBar and the ListView.

score 3 · Answer 5 · answered Apr 21 '22 at 20:57

 This is the answer

    RefreshIndicator(
    onRefresh: () async {
      return await Future.delayed(const Duration(seconds: 2));
    },
    edgeOffset: 100,   // ANY NUMBER SO THE REFRESH APPEARS ANYWHERE YOU WANT.
    child: CustomScrollView(
        slivers: <Widget>[
            SliverAppBar(
                title: Text('POSTAPP'),
                centerTitle: true,
                floating: true,
                pinned: false,
            ),
            SliverList(
                delegate: SliverChildBuilderDelegate(
                    _createPostItem,
                    childCount: postRepo.posts.length,
                ),
            ),
        ],
     ),
);

score 1 · Answer 6 · answered Apr 23 '21 at 17:01

I managed to do by create a custom widget that folk from flutter/lib/src/material/refresh_indicator.dart. and modify the following code (p.s i only added the variable initialDisplacement)

double initialDisplacement = 100.0;
return Stack(
  children: <Widget>[
    child,
    if (_mode != null) Positioned(
      top: _isIndicatorAtTop ? initialDisplacement : null,
      bottom: !_isIndicatorAtTop ? 0.0 : null,
      left: 0.0,
      right: 0.0,
      child: SizeTransition(
        axisAlignment: _isIndicatorAtTop ? 1.0 : -1.0,
        sizeFactor: _positionFactor, // this is what brings it down
        child: Container(
          padding: _isIndicatorAtTop
            ? EdgeInsets.only(top: widget.displacement)
            : EdgeInsets.only(bottom: widget.displacement),
          alignment: _isIndicatorAtTop
            ? Alignment.topCenter
            : Alignment.bottomCenter,
          child: ScaleTransition(
            scale: _scaleFactor,
            child: AnimatedBuilder(
              animation: _positionController,
              builder: (BuildContext context, Widget child) {
                return RefreshProgressIndicator(
                  semanticsLabel: widget.semanticsLabel ?? MaterialLocalizations.of(context).refreshIndicatorSemanticLabel,
                  semanticsValue: widget.semanticsValue,
                  value: showIndeterminateIndicator ? null : _value.value,
                  valueColor: _valueColor,
                  backgroundColor: widget.backgroundColor,
                  strokeWidth: widget.strokeWidth,
                );
              },
            ),
          ),
        ),
      ),
    ),
  ],
);

Flutter: How to use RefreshIndicator with SliverAppBar

6 Answers6