문제 설명
RenderViewport는 RenderSliver 유형의 하위를 예상했지만 RenderErrorBox 유형의 하위를 수신했습니다. (A RenderViewport expected a child of type RenderSliver but received a child of type RenderErrorBox)
SliverStaggeredGrid.countBuilder를 사용하여 Firestore에서 가져온 데이터를 문제 없이 표시하고 있습니다. listview.builder로 내 데이터를 보여주고 싶습니다.
내 일반 코드는 이렇습니다. 필터링할 수 있도록 변경하고 싶었습니다.
body: CustomScrollView(
slivers: [
StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection(widget.title)
.orderBy("id", descending: true)
.snapshots(),
builder: (context, dataSnapshot) {
return !dataSnapshot.hasData
? SliverPadding(
sliver: SliverToBoxAdapter(
child: ColorLoader(
dotOneColor: Colors.white,
dotTwoColor: Colors.white,
dotThreeColor: Colors.white,
),
),
padding: EdgeInsets.all(0),
)
: SliverPadding(
sliver: SliverStaggeredGrid.countBuilder(
crossAxisCount: 1,
staggeredTileBuilder: (_) => StaggeredTile.fit(1),
itemBuilder: (context, index) {
DataModel model = DataModel.fromJson(
dataSnapshot.data!.docs[index].data()
as Map<String, dynamic>);
return sourceInfo(model, context);
},
itemCount: dataSnapshot.data!.docs.length),
padding: EdgeInsets.all(0),
);
},
),
],
),
내 코드를 다음과 함께 사용할 때 listview.builder in sliver, 화면에 데이터가 표시되지 않습니다.
body: CustomScrollView(
slivers: [
StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('posts')
.orderBy("id", descending: true)
.snapshots(),
builder: (BuildContext context,
AsyncSnapshot<QuerySnapshot> dataSnapshot) {
return !dataSnapshot.hasData
? SliverPadding(
sliver: SliverToBoxAdapter(
child: ColorLoader(
dotOneColor: Colors.white,
dotTwoColor: Colors.white,
dotThreeColor: Colors.white,
),
),
padding: EdgeInsets.all(0),
)
: ListView.builder(
itemCount: dataSnapshot.data!.docs.length,
itemBuilder: (context, index) {
DataModel model = DataModel.fromJson(
dataSnapshot.data!.docs[index].data()
as Map<String, dynamic>);
return sourceInfo(model, context);
},
);
},
),
],
),
이 상황에서 어떻게 해야 하나요?
참조 솔루션
방법 1:
Flutter has two protocols to draw widgets. Sliver and Box protocol. StreamBuilder originally is a StatefulWidget and it uses a Box protocol. Which is something does not work with CustomScrollView.
You can wrap your StreamBuilder with SliverToBoxAdapter to keep it as it is. Also remove the SliverPadding inside the StreamBuilder to have a box protocol widget.
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('posts')
.orderBy("id", descending: true)
.snapshots(),
builder: (BuildContext context,
AsyncSnapshot<QuerySnapshot> dataSnapshot) {
return !dataSnapshot.hasData
? Padding(
child: ColorLoader(
dotOneColor: Colors.white,
dotTwoColor: Colors.white,
dotThreeColor: Colors.white,
),
padding: EdgeInsets.all(0),
)
: ListView.builder(
itemCount: dataSnapshot.data!.docs.length,
itemBuilder: (context, index) {
DataModel model = DataModel.fromJson(
dataSnapshot.data!.docs[index].data()
as Map<String, dynamic>);
return sourceInfo(model, context);
},
);
},
),
),
],
),
(by Semih Yılmaz、salihgueler)