Hi all, thanks for taking the time to read this
I'm facing a problem in flutter. I want to implement an interaction where contentArea#1 is in view port when Tab#1 is active and as the user scrolls along the page, it switches to Tab#2 and contentArea#2 becomes visible in the viewport while the previous contentArea slides up out of the view port.
All this is included in an already scrolling page. Cant seem to figure it out, any help is appreciated.
SizedBox( width: 1400, height: MediaQuery.of(context).size.height * 2, child: NestedScrollView( controller: _scrollController, headerSliverBuilder: (_, __) { return [ SliverPersistentHeader( pinned: true, delegate: _StickyHeaderDelegate( minHeight: 60, maxHeight: 60, child: tabs(), ), ), const SliverToBoxAdapter( child: SizedBox(height: 16), ), ]; }, body: body(), ),)`class _StickyHeaderDelegate extends SliverPersistentHeaderDelegate { final double minHeight; final double maxHeight; final Widget child; _StickyHeaderDelegate({ required this.minHeight, required this.maxHeight, required this.child, }); @override double get minExtent => minHeight; @override double get maxExtent => maxHeight; @override Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) { return SizedBox.expand(child: child); } @override bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) { return true; }}
This is what i have tried to implement