Horizontal ListView inside a Vertical ScrollView in Flutter

Question

I am trying to achieve a very common behavior nowadays which is to have a horizontal List within another widget that is at the same time scrollable. Think something like the home screen of the IMDb app:

So I want to have a widget that scrolls vertically with few items on them. At the top of it, there should be a horizontal ListView, followed up with some items called motivationCard. There are some headers in between the list and the cards as well.

I got something like this on my Widget:

@override
  Widget build(BuildContext context) => BlocBuilder<HomeEvent, HomeState>(
        bloc: _homeBloc,
        builder: (BuildContext context, HomeState state) => Scaffold(
              appBar: AppBar(),
              body: Column(
                children: <Widget>[
                  Text(
                    Strings.dailyTasks,
                  ),
                  ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: tasks.length,
                    itemBuilder: (BuildContext context, int index) =>
                        taskCard(
                          taskNumber: index + 1,
                          taskTotal: tasks.length,
                          task: tasks[index],
                        ),
                  ),
                  Text(
                    Strings.motivations,
                  ),
                  motivationCard(
                    motivation: Motivation(
                        title: 'Motivation 1',
                        description:
                        'this is a description of the motivation'),
                  ),
                  motivationCard(
                    motivation: Motivation(
                        title: 'Motivation 2',
                        description:
                        'this is a description of the motivation'),
                  ),
                  motivationCard(
                    motivation: Motivation(
                        title: 'Motivation 3',
                        description:
                        'this is a description of the motivation'),
                  ),
                ],
              ),
            ),
      );

this is the error I get:

I/flutter (23780): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (23780): The following assertion was thrown during performResize():
I/flutter (23780): Horizontal viewport was given unbounded height.
I/flutter (23780): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter (23780): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter (23780): vertical space in which to expand.

I have tried:

Wrapping the ListView with an Expanded widget
Wrapping the Column with SingleChildScrollView > ConstrainedBox > IntrinsicHeight
Having CustomScrollView as a parent, with a SliverList and the List within a SliverChildListDelegate

None of these work and I continue getting the same kind of error. This is a very common thing and shouldn't be any hard, somehow I just cannot get it to work :(

Any help would be much appreciated, thanks!

Edit:

I thought this could help me but it didn't.

There is no vertical ListView. I want the whole screen to be scrollable. Think of a column but scrollable. Then within that Column I would like to have a ListView which scrolls horizontally. The rest of the children in the column will be different items, i.e. headers, cards and other. — Javier Mendonça, Feb 04 '19 at 08:58

score 134 · Accepted Answer · edited May 05 '19 at 22:51

Well, Your Code Work Fine with wrapping your- ListView.builder with Expanded Widget & setting mainAxisSize: MainAxisSize.min, of Column Widget.

E.x Code of what you Have.

 body: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            'Headline',
            style: TextStyle(fontSize: 18),
          ),
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemCount: 15,
              itemBuilder: (BuildContext context, int index) => Card(
                    child: Center(child: Text('Dummy Card Text')),
                  ),
            ),
          ),
          Text(
            'Demo Headline 2',
            style: TextStyle(fontSize: 18),
          ),
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemBuilder: (ctx,int){
                return Card(
                  child: ListTile(
                      title: Text('Motivation $int'),
                      subtitle: Text('this is a description of the motivation')),
                );
              },
            ),
          ),
        ],
      ),

Update:

Whole page Is Scroll-able with - SingleChildScrollView.

body: SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Text(
        'Headline',
        style: TextStyle(fontSize: 18),
      ),
      SizedBox(
        height: 200.0,
        child: ListView.builder(
          physics: ClampingScrollPhysics(),
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: 15,
          itemBuilder: (BuildContext context, int index) => Card(
                child: Center(child: Text('Dummy Card Text')),
              ),
        ),
      ),
      Text(
        'Demo Headline 2',
        style: TextStyle(fontSize: 18),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
      Card(
        child: ListTile(title: Text('Motivation $int'), subtitle: Text('this is a description of the motivation')),
      ),
    ],
  ),
),

Thanks for your fast reply! I achieved that as well but it's not exactly what I need. I want the Motivation items not to be in a list so that the whole screen scrolls down so the horizontal list would go out of the screen if you scroll enough. Any ideas for on how to achieve that? — Javier Mendonça, Feb 04 '19 at 08:56
Awesome, that was exactly was I was looking for. It was indeed not complicated, thank you!! — Javier Mendonça, Feb 04 '19 at 09:59
This comment added on behalf of [Roman Matroskin](https://stackoverflow.com/users/5532417/roman-matroskin): What if the height of horizontal scrollable items can be different? — Adrian Mole, Jan 19 '20 at 18:19
I am trying to not set the size of the list fixed with a SizedBox, why does the `shrinkWrap: true` does not work when you have a scroll as a parent? — Daniel Gomez Rico, Oct 15 '20 at 20:58
I wasted several hours trying to get this to work, until I found this complete sample here, It did not take long after finding this post. The real problem for me was that scrolling does not work on linux desktop which is my preferred testing platform for speed. — Bhikkhu Subhuti, Aug 05 '22 at 15:09

score 54 · Answer 2 · answered Feb 29 '20 at 08:10

Screenshot:

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 7,
        itemBuilder: (_, i) {
          if (i < 2)
            return _buildBox(color: Colors.blue);
          else if (i == 3)
            return _horizontalListView();
          else
            return _buildBox(color: Colors.blue);
        },
      ),
    );
  }

  Widget _horizontalListView() {
    return SizedBox(
      height: 120,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (_, __) => _buildBox(color: Colors.orange),
      ),
    );
  }

  Widget _buildBox({Color color}) => Container(margin: EdgeInsets.all(12), height: 100, width: 200, color: color);
}

Is it possible to use horizontal listview without static height? — Balaji, Jan 29 '21 at 14:53
@BalajiRamadoss see my answer here https://stackoverflow.com/a/67556125/578309 — thanhbinh84, May 16 '21 at 11:28

score 9 · Answer 3 · answered May 16 '21 at 11:27

9

We have to use SingleScrollView inside another SingleScrollView, using ListView will require fixed height

SingleChildScrollView(
   child: Column(
      children: <Widget>[
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
          children: [Text('H1'), Text('H2'), Text('H3')])),
        Text('V1'),
        Text('V2'),
        Text('V3')]))

answered May 16 '21 at 11:27

thanhbinh84

17,876
6
62
69

1

this is not the solution. – Rishabh Deep Singh Jul 29 '21 at 12:07
@RishabhDeepSingh reasons? I used it in my app, lower performance than ListView but more flexible with dynamic height. – thanhbinh84 Jul 30 '21 at 00:34
1

but items are not dynamic – Rishabh Deep Singh Jul 30 '21 at 06:08
@RishabhDeepSingh you can create a list of text widget and pass it as the children of Row that is similar with ListView. The only thing is that the view is not recycle that's why ListView has better performance. I just provide another choice. – thanhbinh84 Jul 30 '21 at 06:16

score 4 · Answer 4 · edited Sep 27 '21 at 08:03

If someone gets the renderview port was exceeded error. warp your ListView in a Container widget and give it the height and width property to fix the issue

Column(
      children: <Widget>[
        Text(
          Strings.dailyTasks,
        ),
      Container(
       height: 60,
       width: double.infinity,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: tasks.length,
          itemBuilder: (BuildContext context, int index) =>
            taskCard(
              taskNumber: index + 1,
              taskTotal: tasks.length,
              task: tasks[index],
             ),
         ),
       )
      ]
)

score 4 · Answer 5 · answered Apr 22 '22 at 10:29

I tried in this code and I fixed my problem I hope solved your want it.

       SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              item(),
              item(),
              item(),
              item(),
            ],
          ),
        ),

Golden Lion · Answer 6 · 2022-03-22T20:09:21.483

for Web Chome you have to add MaterialScrollBehavior for horizontal scrolling to work. see(Horizontal listview not scrolling on web but scrolling on mobile) I demonstrate how to use the scrollcontroller to animate the list both left and right.

import 'package:flutter/gestures.dart';
class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

return MaterialApp(
      title: 'Flutter Demo',
      scrollBehavior: MyCustomScrollBehavior(),
)


class TestHorizontalListView extends StatefulWidget {
  TestHorizontalListView({Key? key}) : super(key: key);


  @override
  State<TestHorizontalListView> createState() => _TestHorizontalListViewState();
}

class _TestHorizontalListViewState extends State<TestHorizontalListView> {
  List<String> lstData=['A','B','C','D','E','F','G'];
  
  final ScrollController _scrollcontroller = ScrollController();

_buildCard(String value)
{
  return Expanded(child:Container(
    margin: const EdgeInsets.symmetric(vertical: 20.0),
    width:300,height:400,child:Card(child: Expanded(child:Text(value,textAlign: TextAlign.center, style:TextStyle(fontSize:30))),)));
}

void _scrollRight() {
    _scrollcontroller.animateTo(
      _scrollcontroller.position.maxScrollExtent,
      duration: Duration(seconds: 1),
      curve: Curves.fastOutSlowIn,
    );
  }

void _scrollLeft() {
    _scrollcontroller.animateTo(
      0,
      duration: Duration(seconds: 1),
      curve: Curves.fastOutSlowIn,
    );
  }
_segment1()
{
  return     SingleChildScrollView(child:
    Expanded(child:
        Container(height:300,
          width:MediaQuery.of(context).size.width,
          child:Row(children: [
          FloatingActionButton.small(onPressed: _scrollRight, child: const Icon(Icons.arrow_right),),
          Expanded(child:Scrollbar(child:ListView.builder(
            itemCount: lstData.length,
            controller: _scrollcontroller,
            scrollDirection: Axis.horizontal,
            itemBuilder:(context,index)
            {
              return _buildCard(lstData[index]);
            })
          ,),
        ),
        FloatingActionButton.small(onPressed: _scrollLeft, child: const Icon(Icons.arrow_left),),
    ]))
    ,
    )
    );

}
@override
  void initState() {
    //   TODO: implement initState
    super.initState();

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text("horizontal listview",)),body: 
    segment1(),
);
  }
}

score 0 · Answer 7 · answered Sep 17 '22 at 20:19

You just have to fix your height of your Listview (by wrapping it in a SizedBox for example).

This is because the content of your listview can't be known before the frame is drawn. Just imagine a list of hundreds of items.. There is no way to directly know the maximum height among all of them.

score 0 · Answer 8 · answered Oct 19 '22 at 06:30

Horizontal ListView inside Vertical ListView using Builder

None of the answers proved to solve my issue, which was to have a horizontal ListView inside a Vertical ListView while still using ListBuilder (which is more performant than simply rendering all child elements at once).

Turned out it was rather simple. Simply wrap your vertical list child inside a Column, and check if index is 0 (or index % 3 == 0) then render the horizontal list.

Seems to work fine:

final verticalListItems = [];
final horizontalListItems = [];

ListView.builder(
  shrinkWrap: true,
  itemCount: verticalListItems.length,
  itemBuilder: (context, vIndex) {
    final Chat chat = verticalListItems[vIndex];

    return Column( // Wrap your child inside this column
      children: [
        // And then conditionally render your Horizontal list
        if (vIndex == 0) ListView.builder(itemCount: horizontalListItems.length itemBuilder: (context, hIndex) => Text('Horizontal List $hIndex')),

        // Vertical list
        Text('Item No. $vIndex')
      ],
    );
  },
),

score 0 · Answer 9 · edited May 15 '23 at 08:46

0

Try using physics: BouncingScrollPhysics()

If you are using a ListView - horizontal scroll inside a ListView - vertical scroll this might create a problem of overscrolling for the child Listview. In this case what worked for me was I used physics: BouncingScrollPhysics() for the child ListView, it gave a good bouncing scrolling effect and resolved my error

edited May 15 '23 at 08:46

developerjamiu

590
8
19

answered May 12 '23 at 12:40

Gaurav Shrisunder

1
1

nashihu · Answer 10 · 2023-07-03T13:59:13.803

hardcoding the height of horizontal list would be unpredictable for some cases.

below is horizontal list that resize itself based on first child

usage:

SelfSizedHorizontalList(
  childBuilder: (i) => itemWidget(list[i]),
  itemCount: list.length,
),

source code:

class SelfSizedHorizontalList extends StatefulWidget {
  final Widget Function(int) childBuilder;
  final int itemCount;
  final double gapSize;
  const SelfSizedHorizontalList({
    super.key,
    required this.childBuilder,
    required this.itemCount,
    this.gapSize = 8,
  });

  @override
  State<SelfSizedHorizontalList> createState() => _SelfSizedHorizontalListState();
}

class _SelfSizedHorizontalListState extends State<SelfSizedHorizontalList> {
  final infoKey = GlobalKey();

  double? prevHeight;
  double? get height {
    if (prevHeight != null) return prevHeight;
    prevHeight = infoKey.globalPaintBounds?.height;
    return prevHeight;
  }

  bool get isInit => height == null;

  @override
  Widget build(BuildContext context) {

    if (height == null) {
      WidgetsBinding.instance.addPostFrameCallback((v) => setState(() {}));
    }
    if (widget.itemCount == 0) return const SizedBox();
    if (isInit) return Container(key: infoKey, child: widget.childBuilder(1));

    return SizedBox(
      height: height,
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        itemCount: widget.itemCount,
        itemBuilder: (c, i) => widget.childBuilder.call(i),
        separatorBuilder: (c, i) => SizedBox(width: widget.gapSize),
      ),
    );
  }
}

extension GlobalKeyExtension on GlobalKey {
  Rect? get globalPaintBounds {
    final renderObject = currentContext?.findRenderObject();
    final translation = renderObject?.getTransformTo(null).getTranslation();
    if (translation != null && renderObject?.paintBounds != null) {
      final offset = Offset(translation.x, translation.y);
      return renderObject!.paintBounds.shift(offset);
    } else {
      return null;
    }
  }
}

Horizontal ListView inside a Vertical ScrollView in Flutter

10 Answers10

Horizontal ListView inside Vertical ListView using Builder

Try using physics: BouncingScrollPhysics()

Linked