CODEWITHSUNDEEP
flutterscrollviewnestedscrollviewsliverappbar
Riccardo Montagnin
Riccardo Montagnin

Reputation: 111

Flutter - SliverAppBar with snapping toolbar and nested scroll view

I'm trying to reproduce a UX design in which we have the following components:

  1. A top bar which contains the text "Desmos"
  2. A main post content, which is composed of
    • A header (user icon, user name, post date, options button)
    • The post message
    • Any post image that might be present
  3. A tab bar, which allows the user to show either the Comments list or the Reactions list.

The peculiarity of this UX is that when the user scrools the list of Comments or Reactions (based on which he is currently viewing), the vertical scroll list snaps to the tab bar.

From there, the user will be able to either scroll down the list of comments or, with an additional scroll, showing again the post. Please note that the original post should be placed so that for the user to show it again, a higher amount of scroll force is required.

I have put together a video that you can see here to better understand how this should work:

Wanted UX

I've already realized a widget called PostContent that contains all the above mentioned main content of a post. I've also already tried coding something for the wanted UX that looks like the following: 

Scaffold(
  body: SafeArea(
    child: NestedScrollView(
      headerSliverBuilder: (context, _) {
        return [
          SliverAppBar(
            backgroundColor: Colors.white,
            expandedHeight: 310,
            pinned: true,
            primary: true,
            flexibleSpace: PostContent(post: post),
          )
        ];
      },
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Text(index.toString());
        },
      ),
    ),
  ),
);

The result can be seen by clicking on the following preview:

Created UX

The problems with this implementation are the following:

  1. As the PostContent is a Column, how can I get its height so that I don't have to specify a fixed value inside SliverAppBar's expandedHeight attribute?
  2. How can I avoid that when scrolling up the ListView, the scrolling stops when it reaches the AppBar without scrolling further up?

Upvotes: 2

Views: 1549

Answers (0)

Related Questions