I'm using SliverAppBar and SliverLsit that's wrapped in a CustomScrollView. I am trying to build a widget with sliver list but nothing renders, my screen shows completely in blank.
The goal is to have a search bar until the middle of the screen and the other middle will be occupied by a List View Builder (inside a FutureBuilder).
When I switch to debug it throws an uncaught exception:
The ParentDataWidget Positioned(left: 39.3, top: 78.1, width: 314.2) wants to apply ParentData of type StackParentData to a RenderObject, which has been set up to accept ParentData of incompatible type FlexParentData.
Usually, this means that the Positioned widget has the wrong ancestor RenderObjectWidget. Typically, Positioned widgets are placed directly inside Stack widgets.
The offending Positioned is currently placed inside a Column widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
SizedBox ← Positioned ← Column ← Container ← SliverToBoxAdapter ← ShrinkWrappingViewport ← IgnorePointer-[GlobalKey#44b45] ← Semantics ← Listener ← _GestureSemantics ← ⋯
When the exception was thrown, this was the stack
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
key: _scaffoldKey,
body: SingleChildScrollView(
child: Column(
children: [
Container(
child: CustomScrollView(
shrinkWrap: true,
slivers: [
SliverToBoxAdapter(
child: Container(
child: Column(
children: [
SizedBox(
child: ClipPath(
clipper: BackgroundWaveClipper(),
child: Container(
width: MediaQuery.of(context).size.width,
height:
MediaQuery.of(context).size.height * 0.1,
),),
),
//this is the search bar part
Positioned(
child: SizedBox(
child: TextFormField(
controller: textController,
decoration: InputDecoration(
hintText: 'Breed search...',
onChanged: (value) {
setState(() {
filter = value;
});
},
),
),
),
],
),
),
),
SliverList(
delegate: SliverChildListDelegate([
Column(
children: [
Container(
margin: const EdgeInsets.only(top: 5, bottom: 5),
padding: const EdgeInsets.only(left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Center(
child: Container(
width: MediaQuery.of(context).size.width -
(MediaQuery.of(context).size.width / 3.5),
height: 0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
Dimensions.radius20),
color: Colors.white),
),
),
],
),
),
Expanded(
child: FutureBuilder(
future: futureData,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: _filteredBreedList.isEmpty
? BreedList.length
: _filteredBreedList.length,
itemBuilder:
(BuildContext context, int index) {
return SingleChildScrollView(
child:
BookPageBody(
breedlist: BreedList,
index: index,
)
);
});
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return const Center(
child: GFLoader(),
);
})),
],
),
]),
)
]),
),
],
),
),
SingleChildScrollView and you can remove shrinkWrap: true, while it is expensive. return Scaffold(
backgroundColor: Colors.white,
body: CustomScrollView(
// shrinkWrap: true,
slivers: [
Positioned widget inside Column, you can use it inside stack.If you need to align, use Align widget in this case//this is the search bar part
SizedBox(
child: TextFormField(
CustomScrollView you don't need other scrollable widget, else wrap with SizedBox, Also Don't use Expanded because scrollable widget have infinite height.),
SliverList(
delegate: SliverChildListDelegate(
[
Column(
children: [
//...
FutureBuilder(
future: Future.delayed(Duration.zero),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: List.generate(
4, (index) => Text("item $index")),
)
And you are good to go. More about CustomScrollView
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body:
// SingleChildScrollView(
// child: Container(
// child:
CustomScrollView(
// shrinkWrap: true,
slivers: [
SliverToBoxAdapter(
child: Container(
child: Column(
children: [
SizedBox(
child: ClipPath(
child: Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
),
),
),
//this is the search bar part
Align(
child: SizedBox(
child: TextFormField(
decoration: InputDecoration(
hintText: 'Breed search...',
),
),
))
],
),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
Column(
children: [
//...
FutureBuilder(
future: Future.delayed(Duration.zero),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: List.generate(
4, (index) => Text("item $index")),
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return Center(
child: Container(),
);
})
],
),
],
),
)
],
),
// ),
// ),
);
}