CODEWITHSUNDEEP
flutter
Arash
Arash

Reputation: 12425

Flutter Sliver pull to refresh

I have a Sliver grid inside a CustomScrollView, I want to refresh the content when the grid is pulled down.

I digged in the widgets, but it seems it is not easily possible. It seems it is not closely related to sliver actually, but list view.

I tried adding a GestureDetector, but somehow couldn't make that work either. I also came across https://github.com/peng8350/flutter_pulltorefresh. Even though it is very impressive, but the restrictions it applies to the widget structure, and the "hack" it had to use to make it work somehow seemed too much.

Is there any more humane way to tap into the pull down gesture when the sliver is at the top, and essentially doesn't do much?

Upvotes: 5

Views: 7396

Answers (2)

Anggrayudi H
Anggrayudi H

Reputation: 15155

You can use CupertinoSliverRefreshControl to put refresh indicator between app bar and the list:

    CustomScrollView(
      physics: const BouncingScrollPhysics(),
      slivers: [
        const SliverAppBar(
          title: Text("Toolbar Title"),
        ),
        CupertinoSliverRefreshControl(
          onRefresh: () async {
            await Future.delayed(const Duration(seconds: 2));
          },
          builder: (
            BuildContext context,
            RefreshIndicatorMode refreshState,
            double pulledExtent,
            double refreshTriggerPullDistance,
            double refreshIndicatorExtent,
          ) {
            // You can also use custom widget/animation for the refresh indicator
            return const Placeholder(fallbackHeight: 10);
          },
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return const Placeholder(fallbackHeight: 30);
            },
          ),
        ),
      ],
    );

Credits to Rabi Roshan in his GitHub Gists.

Upvotes: 0

Sumeet.Jain
Sumeet.Jain

Reputation: 1609

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
          child: CustomScrollView(
             slivers: yourSilverGrid(),
           ),
          onRefresh: () => swipeDownRefresh(),
      ),
    ); 
}

RefreshIndicator seems appropriate for your use case.

Upvotes: 12

Related Questions