Using Scrollable List TabView inside Nested ScrollView.

[muneebahmad0600]

Hello There, I am using this library inside a nestedListView. I am creating a FlexibleSpaceBar() to show image. Also I am using SliverOverlapAbsorber() and SliverOverlapInjector so that the body of my nested scroll view doesnt hide behind the appbar. NestedScrollView() body takes a column (Container & ScrollableListTabview()). If i scroll the from container, the flexible appbar collapses but it doesnt collapse when i scroll from the ScrollableListTabview(). I hope you understand the scenario I ll attach the code and image of what i am trying to achieve.

`class ShopScreen extends StatefulWidget { final Shop shop;

const ShopScreen({ Key key, @required this.shop, }) : assert(shop != null), super(key: key); @override _ShopScreenState createState() => _ShopScreenState(); }

class _ShopScreenState extends State<ShopScreen> { var top = 0.0; ScrollController _scrollController; Color _theme; Shop _shop; String _selectedCategory;

@override void initState() { super.initState(); _selectedCategory = _shop.categories[0].id; _theme = Colors.white; _scrollController = ScrollController() ..addListener( () => !_isAppBarCollapsed() ? _theme != Colors.white ? setState( () { _theme = Colors.white; print('setState is called'); }, ) : {} : _theme != Colors.black ? setState(() { print('setState is called'); _theme = Colors.black; }) : {}, ); }

bool _isAppBarCollapsed() { if (_scrollController.hasClients) if (_scrollController.offset > (170 - kToolbarHeight)) return true; return false; }

@override Widget build(BuildContext context) { return Scaffold( body: NestedScrollView( key: PageStorageKey("NestedScrollView"), controller: _scrollController, headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverOverlapAbsorber( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), sliver: SliverAppBar( leading: Center( child: Container( padding: EdgeInsets.symmetric(horizontal: 5, vertical: 3), decoration: BoxDecoration( color: scaffoldColor, borderRadius: BorderRadius.circular(5), ), child: GestureDetector( onTap: () { AppRouter.pop(context); }, child: Icon( Icons.arrow_back, color: Colors.black, ), ), ), ), expandedHeight: 200, floating: false, pinned: true, forceElevated: innerBoxIsScrolled, actions: [ IconButton( icon: Icon(Icons.favorite_border_rounded, color: _theme), onPressed: () {}, ) ], flexibleSpace: FlexibleSpaceBar( title: Text( _shop.name, style: TextStyle(fontSize: 12.0, color: theme), ), background: Hero( tag: "shop ${shop.id} image ", child: Image.network( imageURL + shop.image, fit: BoxFit.cover, color: primaryColor.withOpacity(0.5), colorBlendMode: BlendMode.darken, errorBuilder: (ctx, obj, trace) { return Placeholder(); }, ), )), ), ), ]; }, body: Builder(builder: (ctx) { return CustomScrollView( key: PageStorageKey("CustomeScrollView"), primary: false, physics: NeverScrollableScrollPhysics(), slivers: <Widget>[ SliverOverlapInjector( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(ctx), ), SliverToBoxAdapter( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.symmetric( vertical: 8, horizontal: 16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text(shop.address1, style: TextStyle(fontSize: 16)), Pill( text: "${num.parse(shop.distance).toStringAsFixed(1)} km", color: primaryColor, ) ], ), vSpace(5), Text("Open Now daily time 9:30 am to 11:00 pm"), ], ), ), Divider( height: 20, thickness: 2, color: lightGreyColor, ), Container( height: MediaQuery.of(context).size.height * 0.84, child: ScrollableListTabView( tabHeight: 48, bodyAnimationDuration: const Duration(milliseconds: 300), tabAnimationCurve: Curves.easeOut, tabAnimationDuration: const Duration(milliseconds: 200), tabs: [ ScrollableListTab( tab: ListTab( label: Text('Vegetables'), activeBackgroundColor: primaryColor), body: ListView.builder( shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemCount: 10, itemBuilder: (, index) => ListTile( leading: Container( height: 40, width: 40, decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.grey), alignment: Alignment.center, child: Text(index.toString()), ), title: Text('Vegetables element $index'), ), )), ScrollableListTab( tab: ListTab(label: Text('Fruits')), body: ListView.builder( shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemCount: 10, itemBuilder: (, index) => ListTile( leading: Container( height: 40, width: 40, decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.grey), alignment: Alignment.center, child: Text(index.toString()), ), title: Text('Fruits element $index'), ), )), ScrollableListTab( tab: ListTab(label: Text('Meat')), body: ListView.builder( shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemCount: 10, itemBuilder: (, index) => ListTile( leading: Container( height: 40, width: 40, decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.grey), alignment: Alignment.center, child: Text(index.toString()), ), title: Text('Meat element $index'), ), )), ScrollableListTab( tab: ListTab(label: Text('Herbs&Spices')), body: GridView.builder( shrinkWrap: true, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2), physics: NeverScrollableScrollPhysics(), itemCount: 10, itemBuilder: (, index) => Card( child: Center( child: Text('Herbs&Spices element $index')), ), )), ScrollableListTab( tab: ListTab(label: Text('Egg')), body: GridView.builder( shrinkWrap: true, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2), physics: NeverScrollableScrollPhysics(), itemCount: 10, itemBuilder: (, index) => Card( child: Center(child: Text('Egg element $index')), ), )), ], ), ), ], ), ), ], ); }), ), ); } } `

and here is what i am trying to make

[muneebahmad0600]

I apologize for the code formatting. Just copy poste that into your VS Code. I need help ASAP.

[aytunch]

Is there any progress on this? I am trying to accomplish the same thing