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.stack.imgur.com/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.stack.imgur.com/va3TY.jpg
Notice the added space inside the card when using flexible (this actually renders worse on different devices)
See Question&Answers more detail:
os