What is wrong with my scrollable listview?

Question

New to flutter, trying to make a scrollable page that contain a long listview. I tried a few different things that I've read on different SO pages, so my code may look bloated. I am not sure why even though the page showed up fine, and the last ListTile's image showed up, I can't scroll down the screen to see the rest of that image.

class About extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.amberAccent,
        appBar: AppBar(
          title: Text('About this App'),
          backgroundColor: Colors.lightGreen[400],
          centerTitle: true,
        ),
        body: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text(
                      'The following people helped made my first app possible:',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.black,
                          fontWeight: FontWeight.bold)),
                  ListView(
                    shrinkWrap: true,
                    padding: EdgeInsets.all(15.0),
                    children: <Widget>[
                      ListTile(
                        leading: Text('Me'),
                        title: Text(
                            'a little about myself'),
                      ),
                      ListTile(
                        leading: Text('Coworker'),
                        title: Text(
                            'Contribution made by coworker'),
                      ),
                      ListTile(
                        leading: Text('Friend'),
                        title: Text(
                            'Message about friend'),
                      ),
                      ListTile(
                        title: SizedBox(
                            height: 500.0,
                            width: 500.0,
                            child: Image.asset('images/friend.jpeg')),
                      ),
                    ],
                  ),
                ])));
  }
}```

score 2 · Accepted Answer · edited Aug 22 '20 at 22:49

2

In your Listview use physics: ScrollPhysics(), for a more detailed answer see the link below

How to implement Nested ListView in Flutter?

edited Aug 22 '20 at 22:49

ByteMe

1,575
1
12
23

answered Aug 22 '20 at 22:44

Wali Khan

586
1
5
13

Thanks, I added physics: ClampingScrollPhysics(), from your link and now my page scrolled perfectly. – mrwuscience Aug 23 '20 at 17:44

score 0 · Answer 2 · answered Aug 23 '20 at 04:10

The problem is that you are putting a ListView which has an infinite height inside a Column widget which has a limited height, so the ListView doesn't know how to render itself.

The ListView has an infinite height because of the scrolling functionality, so it can scroll an infinite amount of items.

The Column has a limited height, all of the available height of the screen, so it's limited to this height.

One of the easiest solutions is to wrap the ListView inside an Expanded widget to tell the ListView to take all the available height only and that's is what Expanded widget do.

score 0 · Answer 3 · answered Aug 23 '20 at 17:47

0

If anyone in the future has the same issues as me, this is what I did to fix my code:

For child ListView, use parameter:

shrinkWrap: true,
physics: ClampingScrollPhysics(),

answered Aug 23 '20 at 17:47

mrwuscience

53
7

What is wrong with my scrollable listview?

3 Answers3