How to Enable RefreshIndicator for Non-Scrollable Widgets in Flutter
Introduction
When building apps with Flutter, RefreshIndicator is commonly used to update resources with a pull-to-refresh action. However, for this to work, the child widget needs to be scrollable.
Sometimes, though, you may want to display a non-scrollable element, like an EmptyState, when the list is empty. A common workaround for this is to wrap the widget in a SingleChildScrollView with physics: AlwaysScrollableScrollPhysics(). But this approach makes it difficult to center the child widget on the screen.
In this post, I’ll introduce a solution for displaying non-scrollable widgets centered on the screen while also enabling RefreshIndicator.
Solution
You can achieve this using CustomScrollView and SliverFillRemaining.
RefreshIndicator(
onRefresh: () {},
child: const CustomScrollView(
slivers: [
SliverFillRemaining(
child: Center(
child: TargetWidget(),
),
),
],
),
);By using CustomScrollView, you create a scrollable container. Inside it, SliverFillRemaining is used to expand the widget to fill the available space, which allows you to center the widget and still enable RefreshIndicator.
Conclusion
This was my first time using CustomScrollView, and although I knew about Sliver, I didn’t realize there were so many types to use.
There are so many widgets in Flutter, and not knowing about some of them can lead to problems that are hard to solve. However, I don’t intend to memorize all of them, nor do I think it’s possible. I’ll just keep learning them gradually as needed.
