In my Flutter app, I have a CustomScrollView
with various slivers. I need to insert two widgets at the top of the list that would behave in a manner similar to views in Android's native AppBarLayout
with scroll|snap|enterAlways
and noScroll
flags respectively.
This means that
- the first widget 1) snaps (it has no intermediate scroll position and is either entirely visible or entirely hidden) and 2) reveals itself on any downward scroll regardless of the current scroll position (in fact, this is the effect I'm most interesed in);
- the second widget doesn't scroll and acts more like a sticky header.
Below is a visualization and a sketch of the layout in native XML, with irrelevant properties left out:
<?xml version="1.0" encoding="utf-8"?>
<CoordinatorLayout>
<AppBarLayout>
<TextView
app:layout_scrollFlags="scroll|snap|enterAlways" />
<TextView
app:layout_scrollFlags="noScroll" />
</AppBarLayout>
<RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</CoordinatorLayout>
I know there is a SliverAppBar
but I'm not sure I can apply it to my use case. Documentation says that this widget is
An app bar [that] consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.
First of all I don't have a toolbar, and secondly SliverAppBar
in general doesn't seem like a direct counterpart of AppBarLayout
.
Is there a built-in way to achieve the desired behavior in Flutter with CustomScrollView
?
Thanks