How to prevent overflow when using a Column in SliverFillRemaining

Question

I am facing an issue implementing a CustomScrollView. Check out this DartPad to see the problem I am facing (works best on wide screens). The behaviour is exactly as I want it to be, but I do not know how to fix the overflow issues.

The UI that I am trying to go for is very similar to this example using the NestedScrollView, with some sort of collapsing FlexibleSpace and a TabBar. However, I want some content (purple in the DartPad) above the TabBar that remains in view even once the FlexibleSpace is collapsed entirely, and I cannot use the SliverAppBar widget because the 'bottom' parameter should implement PreferredSizeWidget and my purple content does not have a fixed size. I cannot change my Column to a ListView either because then I can't use the Flexible for the text content.

Any advice is much appreciated!

Answer 1

First I recommend you use this package ExtendedNestedScrollView: Since there is a TabBarView that contains another scroll on each Tab, so you can't use CustomScrollView if you need a RefreshIndicator to refresh the content in each tab. If you use CustomScrollView you can only put one RefreshIndicator globally to refresh all Tab. The package I referenced will make you more customizable to add the RefreshIndicator to each TabBarView.

About the purple content, that pinned and dynamically height. You can try to look into this

Is there a way to achieve a dynamic height in bottom widget of SliverAppBar

How can I get the height of a widget?

There is no simple way to achieve the dynamic pinned sliver. There are several answers there that might help you