Add dynamic height horizontal list-view inside vertical list in Flutter

Question

I am adding horizontal listview inside the vertical list.its not showing any content

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: new ListView.builder(
            itemCount: 3,
            scrollDirection: Axis.vertical,
            itemBuilder: (context, position) {
              if (position == 0) {
                return Container(
                  child: Text("First rwo"),
                );
              } else if (position == 1) {
                return Container(
                  child: Text("second  rwo"),
                );
              } else if (position == 2) {
                return Container(
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: 4,
                        shrinkWrap: true,
                        itemBuilder: (context, pos) {
                          return Text("List ");
                        }));
              }
            }));
  }

when I add the height attribute to position 2 container it works. but I want dynamic height.

SingleChildScrollView is another option but it won't be suitable for an infinite list.

Solution

Switch to a Row inside a SingleChildScrollview:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new ListView.builder(
        itemCount: 3,
        scrollDirection: Axis.vertical,
        itemBuilder: (context, position) {
          if (position == 0) {
            return Container(
              child: Text("First rwo"),
            );
          } else if (position == 1) {
            return Container(
              child: Text("second  rwo"),
            );
          } else if (position == 2) {
            return SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [Text("List"), Text("List"), Text("List"), Text("List")],
              ),
            );
          }
        },
      ),
    );
  }

Comments

[Rahul Devanavar]

But SingleChildScrollView not suitable for infinite horizontal list .

[Jordan Davies]

But there's no way for the Flutter framework to calculate the height without building every child. So you either have infinite horizontal scrollview with a fixed height or dynamic height horizontal scrollview with a fixed length, you can't have it both ways.

[Phan Sinh]

This solution will be very laggy if you have a lot of item (large list). :((