+- 0Day Forums (https://0day.red)
+-- Forum: Coding (https://0day.red/Forum-Coding)
+--- Forum: Flutter & Dart (https://0day.red/Forum-Flutter-Dart)
+--- Thread: Horizontal ListView flutter WITHOUT explicit height (/Thread-Horizontal-ListView-flutter-WITHOUT-explicit-height)
Horizontal ListView flutter WITHOUT explicit height - bullom76406 - 07-21-2023
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 (
[To see links please register here]
).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` (
[To see links please register here]
) 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**:
**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:**
Notice the added space inside the card when using flexible (this actually renders worse on different devices)
RE: Horizontal ListView flutter WITHOUT explicit height - Sirembrowned28 - 07-21-2023
The Flutter framework can only know the height of a widget once it's been built.
If you're building `ListView` children dynamically, it can't calculate the required height of the `ListView` until all it's children have been built, which might never happen (infinite `ListView`).
You can either give the `ListView` a fixed height and build its children dynamically or have the `ListView's` height depend on it's children, in which case you'd need to build all it's children upfront.
RE: Horizontal ListView flutter WITHOUT explicit height - neenak - 07-21-2023
*Posting answer for OP who edited their answer into their question*
Solved the problem by creating a custom builder method like so:
```dart
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.