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(),
);
})),
],
),
]),
)
]),
),
],
),
),
CodePudding user response：
- Firstly, you don't need to use
SingleChildScrollViewand you can removeshrinkWrap: true,while it is expensive.
return Scaffold(
backgroundColor: Colors.white,
body: CustomScrollView(
// shrinkWrap: true,
slivers: [
- Don't use
Positionedwidget 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(
- Inside
CustomScrollViewyou don't need other scrollable widget, else wrap with SizedBox, Also Don't useExpandedbecause 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(),
);
})
],
),
],
),
)
],
),
// ),
// ),
);
}