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 {
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 [
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: [
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