Reputation: 4478
I am working on app that displays products. The app has 4 blocks in a listview. Each block showcases the product image with its information, and can be scrolled horizontally to get more data.
I have following sample code
class Home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return HomeState();
}
}
class HomeState extends State<Home> {
//------- other codes
@override
void initState() {
bloc.fetchNewProperties(0);
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
drawer: CustomDrawer(),
backgroundColor: Constants.scaffoldColor,
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 216,
floating: false,
titleSpacing: 0.0,
pinned: true,
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Constants.gradientStart, Constants.gradientEnd]),
),
child: FlexibleSpaceBar(
centerTitle: true,
background: Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.asset(
tempBannerImages[index],
fit: BoxFit.fill,
);
},
itemCount: 2,
pagination: new SwiperPagination(),
autoplay: true,
autoplayDelay: 8000,
autoplayDisableOnInteraction: true,
),
),
),
),
];
},
body: ListView(
padding: EdgeInsets.only(
left: size.getSizePx(10), right: size.getSizePx(10)),
children: <Widget>[
newProductsBlock(),
newProductsBlock(),
newProductsBlock(),
newProductsBlock(),
newProductsBlock(), //have added widget multiple times to make stuff scrollable
],
),
),
);
}
Widget newProductsBlock() {
print("---This gets called just once---");
return Column(
children: <Widget>[
Text("New Products"),
Container(
height: 230,
child: StreamBuilder(
stream: bloc.allNewProps,
builder: (context, AsyncSnapshot<ProductsModel> snapshot) {
print("--this gets called multiple times.---");
if (snapshot.hasData) {
return buildNewPropListSwipe(snapshot);
} else if (snapshot.hasError) {
return Text(snapshot.error.toString());
}
return showCirularLoadingIndicator();
},
),
)
],
);
}
}
Problem The products are loaded successfully in these blocks. But when I scrolled all the way down and back to top. The circularloading indicator gets visible, in the first block, instead of already loaded items. When I checked i found that Streambuilder is called multiple times as I scroll down and back again up.
Can anybody help me on this, i am quite new to flutter.
Thanks
Upvotes: 2
Views: 1319
Reputation: 4478
For anybody who stumble upon same issue,
i changed Parent Listview
to ScrollSingleChildView
and wrapped widgets into Column and it seems to get fixed now
Upvotes: 2