I'm trying to reproduce a UX design in which we have the following components:
- A top bar which contains the text "Desmos"
- 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
- 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:
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:
The problems with this implementation are the following:
- As the
PostContent
is aColumn
, how can I get its height so that I don't have to specify a fixed value insideSliverAppBar
'sexpandedHeight
attribute? - How can I avoid that when scrolling up the
ListView
, the scrolling stops when it reaches theAppBar
without scrolling further up?