CODEWITHSUNDEEP
flutterscrollable
William Terrill
William Terrill

Reputation: 3744

flutter How to vertically scroll a tall row

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?

Upvotes: 0

Views: 589

Answers (1)

Henok
Henok

Reputation: 3393

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"),
                          ],
                        )
                     )
                 ),

Upvotes: 1

Related Questions