Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

Flutter: Minimum height on horizontal list view

I'm trying to create a horizontal scrolling list of items in Flutter, and I want that list to only take up the necessary height based on its children. By design "ListView tries to expand to fit the space available in its cross-direction" (from the Flutter docs), which I also notice in that it takes up the whole height of the viewport, but is there a way to make it not do this? Ideally something similar to this (which obviously doesn't work):

new ListView(
 scrollDirection: Axis.horizontal,
 crossAxisSize: CrossAxisSize.min,
 children: <Widget>[
 new ListItem(),
 new ListItem(),
 // ...
 ],
);

I realize that one way to do this is by wrapping the ListView in a Container with a fixed height. However, I don't necessarily know the height of the items:

new Container(
 height: 97.0,
 child: new ListView(
 scrollDirection: Axis.horizontal,
 children: <Widget>[
 new ListItem(),
 new ListItem(),
 // ...
 ],
 ),
);

I was able to hack together a "solution" by nesting a Row in a SingleChildScrollView in a Column with a mainAxisSize: MainAxisSize.min. However, this doesn't feel like a solution, to me:

new Column(
 mainAxisSize: MainAxisSize.min,
 children: <Widget>[
 new SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child: new Row(
 children: <Widget>[
 new ListItem(),
 new ListItem(),
 // ...
 ],
 ),
 ),
 ],
);

Answer*

I figured out a way to do **dynamic sizing** for a horizontally scrolling `ListView`. The list can have infinite items, but each item should have the same height.

(If you only have a few items, or if your items must have different heights, see [this answer][1] instead.)

**Key point:**

The idea is to measure one item, let's call it a "prototype". And based on the assumption that all items are the same height, we then set the height of the `ListView` to match the prototype item.

This way, we can avoid having to hardcode any values, and the list can automatically resize when, for example, the user sets a larger font in the system and caused the cards to expand.

**Demo:**

[![a demo gif of infinite items scrolling][2]][2]

**Code:**

I made a custom widget, called `PrototypeHeight` (name inspired from `IntrinsicHeight`). To use it, simply pass in a `Widget` as a "prototype", then pass in a horizontally scrolling `ListView`, for example:

```
PrototypeHeight(
 prototype: MyItem(),
 listView: ListView.builder(
 scrollDirection: Axis.horizontal,
 itemBuilder: (_, index) => MyItem(),
 ),
)
```

And the implementation of `PrototypeHeight` is as follows (you can just paste it somewhere and start using it, or modify it as you need):

```
class PrototypeHeight extends StatelessWidget {
 final Widget prototype;
 final ListView listView;

 const PrototypeHeight({
 Key? key,
 required this.prototype,
 required this.listView,
 }) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return Stack(
 children: [
 IgnorePointer(
 child: Opacity(
 opacity: 0.0,
 child: prototype,
 ),
 ),
 SizedBox(width: double.infinity),
 Positioned.fill(child: listView),
 ],
 );
 }
}
```

**Explaination:**

Let me briefly explain how this works.

Simply put, the size of a `Stack` widget, depends on all of its "non-positioned" children. Basically, if a `Stack` has 3 children, but 2 of which are `Positioned`, then the `Stack` will simply match the remaining "non-positioned" child.

In this case, I'm using the "prototype item" as one of the non-positioned children, to help the `Stack` decide its height (which will be the same height as the prototype). Then I'm using a very wide `SizedBox` to help the `Stack` decide its width (which will be the same width as the parent's width, typically the device's screen width, because remember: *[constraints go down, size go up.][3]*). I'm also adding an `Opacity` widget to hide the prototype (this also increases performance by skipping parts of the rendering pipeline), and an `IgnorePointer` widget to prevent user interactions, in case there are buttons on the prototype item.

Next, I'm using a `Positioned.fill` to make its child (the `ListView`) match the size of the `Stack`, which in turn, would match the height of the prototype item, and match the width of the parent. This will be the constraint passed to the `ListView`, so the `ListView` will create a "viewport" of that size, which is exactly what we wanted to achieve.

This actually covers quite a few concepts in Flutter. I plan to make a video tutorial in a bit.

 [1]: https://stackoverflow.com/a/71070356/1032613
 [2]: https://i.sstatic.net/AZxwe.gif
 [3]: https://docs.flutter.dev/development/ui/layout/constraints

Draft saved

Draft discarded

Edit Summary*

Cancel

I am using this workaround. I don't know why we don't have a way to provide a prototypeItem that applies to the crossAxis. The one we have only applies to the main axis. This would make everything much easier.

Mateus Felipe
– Mateus Felipe

2022年10月05日 21:02:58 +00:00
Commented Oct 5, 2022 at 21:02
Or, at least, have a native PrototypeConstraints widget. I think I am going to make a package that implements something like this so we don't have to rely on Stack.

Mateus Felipe
– Mateus Felipe

2022年10月05日 21:03:58 +00:00
Commented Oct 5, 2022 at 21:03
1

Here it is, still in non-stable version: pub.dev/packages/prototype_constrained_box

Mateus Felipe
– Mateus Felipe

2022年10月13日 23:45:10 +00:00
Commented Oct 13, 2022 at 23:45
This also has lazily build compatibility?

Hayyaun
– Hayyaun

2023年11月10日 02:01:50 +00:00
Commented Nov 10, 2023 at 2:01
1

@Hayyaun Yes, the list can have infinite items because it's dynamically loaded.

WSBT
– WSBT

2023年11月10日 05:31:26 +00:00
Commented Nov 10, 2023 at 5:31

| Show 1 more comment

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

lang-dart

CollectivesTM on Stack Overflow

Flutter: Minimum height on horizontal list view

Answer*