0

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:

enter image description here

<?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

SqueezyMo
  • 1,606
  • 2
  • 21
  • 34

0 Answers0