Flutter adding NestedScrollView into SliverChildListDelegate and getting RenderFlex error - flutter

Question

in my application i have a CustomScrollView which with that i can have a auto Hide AppBar
UPDATE
SAMPLE CODE ADDED
CustomScrollView(
controller: _scrollController,
physics: const ClampingScrollPhysics(),
slivers: <Widget>[
SliverFeedsList(),
],
);
inside SliverFeedsList i want to have another SliverList and SliverPersistentHeader.
when i'm adding them i get this error:
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children
(using Flexible rather than Expanded).
This will allow the flexible children to size themselves to
less than the infinite remaining space they would otherwise be forced to take,
and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.
SliverFeedsList partial content:
Column(
children: [
Expanded(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return Column(
children: <Widget>[
Container(
color: Colors.pink,
height: 50.0,
),
Container(
color: Colors.yellow,
height: 50.0,
)
],
);
}, childCount: 1),
),
SliverPersistentHeader(
pinned: true,
floating: true,
delegate: CustomTabHeader(
Container(
color: Colors.pink,
height: 50.0,
)
),
),
];
},
body: ListView.builder(
itemCount: 10,
padding: const EdgeInsets.only(top: 8),
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return Container(height: 36.0, child: Text('aaa'));
},
),
),
),
],
)
sample code for text and troubleshooting that
void main() => runApp(NestedSliverContainer());
class NestedSliverContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Nested Sliver',
home: MyNestedSliverContainerApp(),
);
}
}
class MyNestedSliverContainerApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: CustomScrollView(
physics: const ClampingScrollPhysics(),
slivers: <Widget>[
SliverPadding(
padding: const EdgeInsets.all(0),
sliver: SliverList(
delegate: SliverChildListDelegate([
Column(
children: [
Expanded(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return Column(
children: <Widget>[
Container(
color: Colors.pink,
height: 50.0,
),
Container(
color: Colors.yellow,
height: 50.0,
)
],
);
}, childCount: 1),
),
SliverPersistentHeader(
pinned: true,
floating: true,
delegate: CustomTabHeader(Container(
color: Colors.pink,
height: 50.0,
)),
),
];
},
body: ListView.builder(
itemCount: 10,
padding: const EdgeInsets.only(top: 8),
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return Container(height: 36.0, child: Text('test'));
},
),
),
),
],
)
]),
),
)
],
),
),
);
}
}
class CustomTabHeader extends SliverPersistentHeaderDelegate {
CustomTabHeader(
this.searchUI,
);
final Widget searchUI;
#override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return searchUI;
}
#override
double get maxExtent => 52.0;
#override
double get minExtent => 52.0;
#override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}

Answer 1

I guess, it doesn't need to be nested . Keep it flat.
import 'package:flutter/material.dart';
void main() => runApp(NestedSliverContainer());
class NestedSliverContainer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Nested Sliver',
home: MyNestedSliverContainerApp(),
);
}
}
class MyNestedSliverContainerApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Column(
children: <Widget>[
Container(
color: Colors.pink,
height: 50.0,
),
Container(
color: Colors.yellow,
height: 50.0,
)
],
);
}, childCount: 1),
),
SliverPersistentHeader(
pinned: true,
floating: true,
delegate: CustomTabHeader(Container(
color: Colors.pink,
height: 50.0,
)),
),
];
},
body: ListView.builder(
itemCount: 10,
padding: const EdgeInsets.only(top: 8),
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return Container(height: 36.0, child: Text('test'));
},
),
),
),
);
}
}
class CustomTabHeader extends SliverPersistentHeaderDelegate {
CustomTabHeader(
this.searchUI,
);
final Widget searchUI;
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return searchUI;
}
#override
double get maxExtent => 52.0;
#override
double get minExtent => 52.0;
#override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}