Flutter SingleChildScrollView not scrolling

Question

My singleChildScollView won't scroll vertically. I've checked similar questions regarding this problem but none of them sem to work for me. The page fills up with the items, and the homepage button is placed at the bottom...

...so it looks correct, it just doesn't let me scroll. Can anyone help? [ EDIT - please note in the example code below I have simplified the original widget tree and removed the homepage button]...

Scaffold(
    body: SingleChildScrollView(
               child: ListView.builder(
                           scrollDirection: Axis.vertical,
                           shrinkWrap: true,
                           itemBuilder: (ctx, index) {
                                  ...list of items here...
                           }
                      ),
          ),
)

Answer 1

There is two steps you can do to use SingleChildScrollView in a Column widget

1. Wrap it in a SizedBox
2. Set a height to the SizedBox widget

Try this out:

Scaffold(
  body:
    child: Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                 SizedBox(
                     //set a height
                     height : MediaQuery.of(context).size.height/5,
                     child: SingleChildScrollView(
                               child: Column(
                                         mainAxisSize: MainAxisSize.max,
                                         children: [
                                             ListView.builder(
                                                scrollDirection: Axis.vertical,
                                                shrinkWrap: true,
                                                itemBuilder: (ctx, index) {
                                                  ...list of items here...
                                                }
                                             ),
                                         ],
                               ),
                     ),
                 ),
                 Center(
                        child: ElevatedButton(
                                onPressed: () {Navigator.pop(context);},
                                child: Text('Homepage'),
                        ),
                ),

              ],
    ),
)

Answer 2

@james please check it

Scaffold(
      body: Stack(
      children: [
        SingleChildScrollView(
          child: ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              physics: ScrollPhysics(),
              itemCount: 30,
              itemBuilder: (ctx, index) {
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                  child: Text("index $index"),
                );
              }
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: ElevatedButton(
            onPressed: () {Navigator.pop(context);},
            child: Text('Homepage'),
          ),
        ),

      ],
    ),
    )

Answer 3

thanks for the help, expecially @Jahidul Islam. I was missing the physics: ScrollPhysics() line!

Answer 4

In order for the SingleChildScrollView to work, its parent's height should be defined. You can achieve this by wrapping the SingleChildScrollView in a Container/SizedBox , or by wrapping it with the Expanded widget.