I'm trying to create a Horizontal scrolling listview.builder()
with no pre-set height.
I've tried setting shrinkwrap
to true and wrapping it inside an Expanded/Flexible.
The only way (that i have found) to currently achieve the desired effect is to wrap a row inside a singlechildscrollview
inside a column, as per this answer (Flutter: Minimum height on horizontal list view).
The problem with that method is that there is no builder method to load dynamic data into the Cards inside the singlechildscrollview
.
My question is how do i create a Horizontal listview
that that generates the output by the row
nested inside the singlechildscrollview
(Flutter: Minimum height on horizontal list view) but with a builder method?
With Flexible
Scaffold(
body: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return FeaturedCard();
},
),
),
Flexible(
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return FeaturedCard();
},
),
),
],
),
),
)
Result: https://i.sstatic.net/XKiWo.jpg
With nested row
inside singlechildscrollview
(The method that works)
Container(
padding: EdgeInsets.only(top: 16, bottom: 8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
FeaturedCard(),
FeaturedCard(),
],
),
),
],
),
)
Result: https://i.sstatic.net/va3TY.jpg
Notice the added space inside the card when using flexible (this actually renders worse on different devices)
Posting answer for OP who edited their answer into their question
Solved the problem by creating a custom builder method like so:
Widget _buildFeaturedCards(List<Product> product) {
final cards = <Widget>[];
Widget FeautredCards;
if (product.length > 0) {
for (int i = 0; i < product.length; i++) {
cards.add(FeaturedCard(product[i]));
print(product.length);
}
FeautredCards = Container(
padding: EdgeInsets.only(top: 16, bottom: 8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(children: cards),
),
],
),
);
} else {
FeautredCards = Container();
}
return FeautredCards;
}
This creates the necessary scrolling widgets upfront instead of lazily like ListView.builder
would.