Quantcast
Channel: Active questions tagged header - Stack Overflow
Viewing all articles
Browse latest Browse all 701

In Flutter- How to make elements in a already scrolling page sticky and appear on scroll and then scroll away when the scroll ends somewhere

$
0
0

Page I want to build

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


Viewing all articles
Browse latest Browse all 701

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>