flutter How to vertically scroll a tall row

Question

I want to make the following Row scrollable:

Row(
     children: [
       Expanded(
         flex: 1,
         child: timeColumn, // list of times
       ),
       dayColumn("Monday", "03-09-2002"), // monday info, etc.
       dayColumn("Tuesday", "03-10-2002"),
       dayColumn("Wednesday", "03-11-2002"),
       dayColumn("Thursday", "03-12-2002"),
       dayColumn("Friday", "03-13-2002"),
       dayColumn("Saturday", "03-14-2002"),
       dayColumn("Sunday", "03-15-2002"),
     ],
   )

and I created a dartpad that show this code in action: https://dartpad.dev/16547cbb0f37ac52299c1dd1d11c262e

To see the overflow issue, you can set this part of the code to be "too large" which results in an overflow at the bottom:

  ///////////////////////////////////////////////////////////
  double rowHeight = 50;  // <-- Change this to set rowHeight
  ///////////////////////////////////////////////////////////

I am using a row widget because the date and scheduling information is going to be contained in one object per day, so I'd like to keep the data as a row of columns. (so, listView is out of the question, I think)

I tried using SingleChildScrollView( child: Row( .... but, I get still get an overflow condition. I feel like this is a good time to use LayoutBuilder + BoxConstraints + ConstrainedBox as indicated here: How to scroll page in flutter

So, what is the best way to make a "Tall Row" scrollable?

Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/210993/discussion-on-question-by-william-terrill-flutter-how-to-vertically-scroll-a-tal). — Samuel Liew, Apr 05 '20 at 13:12

score 1 · Accepted Answer · answered Apr 02 '20 at 04:08

I just shortened the height of the row by putting it inside a limited height container to check how it performs and put the row inside SingleChildScrollView and it is scrolling smoothly.

           Container(
                height:50,
                child: SingleChildScrollView(
                   child : Row(
                        children: [
                            Expanded(
                              flex: 1,
                              child: timeColumn,
                            ),
                            dayColumn("Monday", "03-09-2002"),
                            dayColumn("Tuesday", "03-10-2002"),
                            dayColumn("Wednesday", "03-11-2002"),
                            dayColumn("Thursday", "03-12-2002"),
                            dayColumn("Friday", "03-13-2002"),
                            dayColumn("Saturday", "03-14-2002"),
                            dayColumn("Sunday", "03-15-2002"),
                          ],
                        )
                     )
                 ),

Well, crap. I was hoping to get something that wasn't hard coded, but I guess I didn't actually put that in the question. However, this hint actually gets me ahead of where I was. Thanks! — William Terrill, Apr 02 '20 at 04:58

flutter How to vertically scroll a tall row

1 Answers1