CODEWITHSUNDEEP
flutter
Delmontee
Delmontee

Reputation: 2364

Flutter SingleChildScrollView not scrolling

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...

enter image description here

...so it looks correct, it just doesn't let me scroll.

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

Edit

Note in the example code above I have simplified the original widget tree and removed the homepage button.

Upvotes: 2

Views: 6454

Answers (4)

Ricardo Alexis Huerta Salazar
Ricardo Alexis Huerta Salazar

Reputation: 115

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.

Upvotes: 1

Delmontee
Delmontee

Reputation: 2364

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

Upvotes: 0

Jahidul Islam
Jahidul Islam

Reputation: 12585

@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'),
          ),
        ),

      ],
    ),
    )

Upvotes: 2

Larvouu
Larvouu

Reputation: 162

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'),
                        ),
                ),

              ],
    ),
)

Upvotes: 4

Related Questions