[proposal] Allow Horizontal ListView with Vertical ListView Children Without Fixed Height #73786

TahaTesser · 2021-01-12T13:44:28Z

Recreated from #16564

Currently, it's not possible to have Vertical listviews wrapped in horizontal Listview without giving a fixed height.
It should be possible to let the content decide the height instead of hard coding a specific height. This is already achievable in native Android development.

Steps to reproduce

Run this code sample on any Flutter channel which has a fixed height of 500, it is suitable for one type of content but totally oversized for another type of content. If I change the height to 200, it matches the other content but not the earlier one
Click on FAB to switch content (which simulates a dynamic content app Something like a shopping app/ a news app).

code sample

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String dash = "https://i.imgur.com/QCNbOAo.png";
  String interact = "https://i.imgur.com/Miut7UP.png";
  bool switchContent = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: ListView.builder(
          itemCount: 3,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              height: 500,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 20,
                itemBuilder: (BuildContext context, int index) {
                  return switchContent
                      ? Container(
                          height: 200,
                          width: 200,
                          child: Image.network(dash, fit: BoxFit.cover),
                        )
                      : Container(
                          height: 500,
                          width: 900,
                          child: Image.network(
                            interact,
                            fit: BoxFit.cover,
                          ),
                        );
                },
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        label: Text('Change Content'),
        icon: Icon(Icons.swap_horiz),
        onPressed: () {
          setState(() {
            switchContent = !switchContent;
          });
        },
      ),
    );
  }
}

Expected Results

Without having to specify/modify container height

Content 1	Content 2

Actual Results

If the container height is `500`

Content 1	Content 2

If the container height is `200`

Content 1	Content 2

Note:
If the fixed height is omitted, there is no layout rendered (WAD)

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.5, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.22.5 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 7891006299 (5 weeks ago), 2020-12-10 11:54:40 -0800
    • Engine revision ae90085a84
    • Dart version 2.10.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (2 available)
    • Android SDK built for x86 (mobile) • emulator-5554             • android-x86 • Android 10 (API 29) (emulator)
    • Taha’s iPad (mobile)               • 00008020-000255113EE8402E • ios         • iOS 14.3

! Doctor found issues in 1 category.

[✓] Flutter (Channel beta, 1.25.0-8.2.pre, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.25.0-8.2.pre at /Users/tahatesser/Code/flutter_beta
    • Framework revision b0a2299859 (7 days ago), 2021-01-05 12:34:13 -0800
    • Engine revision 92ae191c17
    • Dart version 2.12.0 (build 2.12.0-133.2.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (3 available)
    • Android SDK built for x86 (mobile) • emulator-5554             • android-x86    • Android 10 (API 29) (emulator)
    • Taha’s iPad (mobile)               • 00008020-000255113EE8402E • ios            • iOS 14.3
    • Chrome (web)                       • chrome                    • web-javascript • Google Chrome 87.0.4280.141

• No issues found!

[✓] Flutter (Channel dev, 1.26.0-1.0.pre, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-1.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision 63062a6443 (4 weeks ago), 2020-12-13 23:19:13 +0800
    • Engine revision 4797b06652
    • Dart version 2.12.0 (build 2.12.0-141.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (4 available)
    • Android SDK built for x86 (mobile) • emulator-5554             • android-x86    • Android 10 (API 29) (emulator)
    • Taha’s iPad (mobile)               • 00008020-000255113EE8402E • ios            • iOS 14.3
    • macOS (desktop)                    • macos                     • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)                       • chrome                    • web-javascript • Google Chrome 87.0.4280.141

• No issues found!

[✓] Flutter (Channel master, 1.26.0-2.0.pre.296, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-2.0.pre.296 at /Users/tahatesser/Code/flutter_master
    • Framework revision 737496e8db (6 hours ago), 2021-01-12 02:54:03 -0500
    • Engine revision 10cee6abcb
    • Dart version 2.12.0 (build 2.12.0-214.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.52.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (4 available)
    • Android SDK built for x86 (mobile) • emulator-5554             • android-x86    • Android 10 (API 29) (emulator)
    • Taha’s iPad (mobile)               • 00008020-000255113EE8402E • ios            • iOS 14.3
    • macOS (desktop)                    • macos                     • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)                       • chrome                    • web-javascript • Google Chrome 87.0.4280.141

• No issues found!

Thank you

The text was updated successfully, but these errors were encountered:

adnanjpg · 2021-07-27T07:08:55Z

this is a very critical issue, it is ridiculous to see the flutter team focusing on expanding to a variety of platforms while there are such critical issues.

cassiosousa · 2021-09-03T18:29:12Z

I have the same problem, when I have many horizontal LisView like this screents

The workaround is not good and doesn't perform very well. The shrinkWrap: true doesn't works.

 Container(
            height: getHeight(widget.productResult),
            child: ListView.builder(
             padding: EdgeInsets.zero,
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
            ....

double getHeight(ProductResult productResult) {
    if (productResult.hasOneElementWithDoublePromotionAndTreeLinesInTitle) {
      return 295;
    } else if (productResult.hasOneElementWithDoublePromotion) {
      return 285;
    } else {
      var initialHeight = 235.0;
      if (productResult.hasPromotionExt) {
        initialHeight += 45;
      }
      if (productResult.hasMamboplusPriceExt) {
        initialHeight += 30;
      }
      return initialHeight;
    }
  }

Please fix that.

sinhpn92 · 2021-11-25T03:22:16Z

I have same issue. Anyone have solution to fix?

max16150 · 2022-04-25T03:38:37Z

Same here ☹️

mhbdev · 2022-11-05T10:01:46Z

No workaround?

a1573595 · 2023-03-01T00:48:02Z

Same need.

bensonarafat · 2023-12-12T15:38:14Z

any work around yet?

Keetz · 2024-02-06T13:50:03Z

Still very relevant.

Impossible to use a horizontal ListView inside a scrollable widget and let it be sized by its childrens height, it has to have a SizedBox or something around it.

Any status on this at all?

Trung15010802 · 2024-03-12T02:01:29Z

2021 -> 2024 nothing happen :3

diego-tread · 2024-03-14T20:39:38Z

Can someone from the flutter team please comment about progress here or any temporary workarounds?

RubenCesario · 2024-04-03T14:55:48Z

I'm here to keep this thread alive

Trung15010802 · 2024-04-05T14:48:28Z

Ping !!!

bharatbudhori · 2024-04-16T15:35:23Z

This bug should be the highest priority, it's a frustrating one.

philipprobin · 2024-04-24T11:13:24Z

same problem here

pedromassangocode added f: scrolling Viewports, list views, slivers, etc. framework flutter/packages/flutter repository. See also f: labels. passed first triage c: proposal A detailed proposal for a change to Flutter c: new feature Nothing broken; request for a new capability labels Jan 12, 2021

TahaTesser changed the title ~~[proposal] Horizontal ListView with Vertical ListView Children Without Fixed Height~~ [proposal] Allow Horizontal ListView with Vertical ListView Children Without Fixed Height Jan 12, 2021

TahaTesser mentioned this issue Feb 5, 2021

pageview in Singlechildscrollview #75323

Closed

TahaTesser mentioned this issue Mar 24, 2021

Horizontal viewport was given unbounded height. #78958

Closed

Piinks added the P3 Issues that are less important to the Flutter project label Jun 16, 2022

yakagami mentioned this issue Feb 16, 2023

Add cross axis to SliverPrototypeExtentList #120896

Closed

flutter-triage-bot bot added team-framework Owned by Framework team triaged-framework Triaged by Framework team labels Jul 8, 2023

Hixie removed the passed first triage label Jul 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[proposal] Allow Horizontal ListView with Vertical ListView Children Without Fixed Height #73786

[proposal] Allow Horizontal ListView with Vertical ListView Children Without Fixed Height #73786

TahaTesser commented Jan 12, 2021 •

edited

adnanjpg commented Jul 27, 2021

cassiosousa commented Sep 3, 2021

sinhpn92 commented Nov 25, 2021

max16150 commented Apr 25, 2022

mhbdev commented Nov 5, 2022

a1573595 commented Mar 1, 2023

bensonarafat commented Dec 12, 2023

Keetz commented Feb 6, 2024

Trung15010802 commented Mar 12, 2024

diego-tread commented Mar 14, 2024 •

edited

RubenCesario commented Apr 3, 2024

Trung15010802 commented Apr 5, 2024

bharatbudhori commented Apr 16, 2024

philipprobin commented Apr 24, 2024

[proposal] Allow Horizontal ListView with Vertical ListView Children Without Fixed Height #73786

[proposal] Allow Horizontal ListView with Vertical ListView Children Without Fixed Height #73786

Comments

TahaTesser commented Jan 12, 2021 • edited

Steps to reproduce

Expected Results

Without having to specify/modify container height

Actual Results

If the container height is 500

If the container height is 200

adnanjpg commented Jul 27, 2021

cassiosousa commented Sep 3, 2021

sinhpn92 commented Nov 25, 2021

max16150 commented Apr 25, 2022

mhbdev commented Nov 5, 2022

a1573595 commented Mar 1, 2023

bensonarafat commented Dec 12, 2023

Keetz commented Feb 6, 2024

Trung15010802 commented Mar 12, 2024

diego-tread commented Mar 14, 2024 • edited

RubenCesario commented Apr 3, 2024

Trung15010802 commented Apr 5, 2024

bharatbudhori commented Apr 16, 2024

philipprobin commented Apr 24, 2024

TahaTesser commented Jan 12, 2021 •

edited

If the container height is `500`

If the container height is `200`

diego-tread commented Mar 14, 2024 •

edited