Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter listview bottom overflow

Tags:

flutter

dart

I'm attempting to create a scrollable listview inside of a container which also contains a static image. However, the listview doesn't appear to be scrollable and I get a "bottom overflow by x pixels" artifact on my app.

enter image description here

  static List<Widget> getClubs() {
    var myClubs = new List<Widget>();
    for (var i = 0; i < 10; i++) {
      myClubs.add(new Padding(
          padding: EdgeInsets.all(8.0),
          child: new CircleAvatar(
            backgroundImage:
                new NetworkImage("https://i.imgur.com/p2oUDLD.png"),
            backgroundColor: Colors.black,
            radius: 34.0,
          )));
    }
    return myClubs;
  }

  final leftSection = new Container(
      color: Color(0xFF212121),
      width: 100,
      child: Column(
        children: <Widget>[
          SizedBox(height: 20.0),
          new Image.asset(
            'assets/logo.png',
            alignment: Alignment.center,
          ),
          SizedBox(height: 10.0),
          new Container(
              child: new ListView(
            shrinkWrap: true,
            padding: const EdgeInsets.all(5.0),
            children: getClubs(),
          ))
        ],
      ));
like image 985
Zander17 Avatar asked Dec 30 '18 00:12

Zander17


3 Answers

You can use Expanded widget or set the height for the Container.

like image 89
Ahmed Avatar answered Oct 08 '22 21:10

Ahmed


I would also recommend Wrap for anyone running into an issue where a container is sized wrong within the listview, causing an overflow:

                          new Container(
                             alignment: Alignment.center,
                             child: Wrap( //the magic
                               children: [
                                 new Container(),
                               ],
                             ),
                           ),
like image 35
Petro Avatar answered Oct 08 '22 20:10

Petro


wrap the Column in an Expanded widget:

Expanded(
  child: Column(
  ),
),

Another way is to wrap the Column in a Flexible widget and specify a flex factor.

Flexible(
           flex: 1,
           child: Column(
            children: [
                      
                  ],
               ),
           ),
like image 1
S.R Keshav Avatar answered Oct 08 '22 21:10

S.R Keshav