flutter scrollview and SingleChildScrollView throws bottom overflow and is not scrolling

Question

The widgets inside the child scroll view doesn't scroll and throws bottom overflow exception on the screen when there are more widgets in that list view. I am not sure where I am doing a mistake.

home: Scaffold(
      body: Column(
          children: [
              APPbar(),
              Container(
                 color: Colors.grey[200],
                 child: Expanded(
                     child: Column(
                         children: [
                            searchBar(),
                            Row(children: casewidgets),
                         ], 
                     )
                 ),
              )
            
             SingleChildScrollView(
                child:Column(
                   children: [
                       Text("a new column"),
                       Text("a new column"),
                       Text("a new column"),
                       Text("a new column"),
                   ],
               )
             ),
        ]
)),

score 1 · Accepted Answer · answered Aug 23 '22 at 18:53

1

You can use Expanded on SingleChildScollView to get aviable height, and remove column's Expanded.

home: Scaffold(
    body: Column(children: [
  // APPbar(),
  Container(
    color: Colors.grey[200],
    child: Column(
      children: [
        // searchBar(),
        Row(children: []),
      ],
    ),
  ),
  Expanded(
    child: SingleChildScrollView(
        child: Column(
      children: [
        for (int i = 0; i < 33; i++) Text("a new column"),
      ],
    )),
  ),
])),

answered Aug 23 '22 at 18:53

Md. Yeasin Sheikh

54,221
7
29
56

perfect. Didn't know that C syntax will work inside a widget. First day in flutter. – Faisal Aug 23 '22 at 19:01
you mean looping, you can think as expression, it returns single item on every loop, forgot the exact name, btw there are many action can be perform like this, find more on inline function/ anonymous function – Md. Yeasin Sheikh Aug 23 '22 at 19:04

score 1 · Answer 2 · answered Aug 24 '22 at 06:07

You cannot use expand when using a singlechildscrollview in appropriate way. First you need to understand that expand covers the maximum height and width on the screen or the specific section in which you use expand.

Instead of using SingleChildScrollView, It's easier to use CustomScrollView with a SliverFillRemaining. and it's works work's great.

    CustomScrollView(
            slivers: [
              SliverFillRemaining(
                hasScrollBody: false,
                child: Column(
                  children: <Widget>[
                    const Text('TextData'),
                    Expanded(
                      child: Container(
                        color: Colors.green,
                        child: Text("Your Text Data",),
                      ),
                    ),
                    const Text('Add Other Widgets'),
                  ],
                ),
              ),
            ],
          ),

flutter scrollview and SingleChildScrollView throws bottom overflow and is not scrolling

2 Answers2