Flutter : Weird gap between items of ListView

Question

I'm having a weird issue with Flutter and the ListView widget. I can see a gap between my items. I can see the black background. Is there something I'm missing so that these gaps does not show? Here is the whole application code:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: Container(
        color: Colors.black,
        child: new ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return new Container(
              color: Colors.pink.shade100,
              child: Container(
                height: 100.0,
              ),
            );
          },
          itemCount: 100,
        ),
      ),
    );
  }
}

Notice how the gaps are not always visible and change while scrolling.

Answer 1

I tried running your code but I didn't got any unexpected padding between List items. I'm currently on Flutter 2.5

You can try adding padding 0 on your ListView and see if it removes the unexpected padding.

child: ListView.builder(
  padding: EdgeInsets.all(0.0),
  ...
),

Answer 2

Add addRepaintBoundaries: false so it becomes something like this:

child: ListView.builder(
  addRepaintBoundaries: false,
  ...
),

I don't understand why and how, but in my case the gap just went away.

Sometimes it'll show. Set to true, hot reload, set to false again, hot reload. It'll be gone.

Answer 3

I had the same issue, where the line would appear on the end of list view thus showing divider in last two Childs of the ListView. Solutions I tried was :

• setting padding of ListView as zero
• setting addRepaintBoundary as false

(spoiler alert) both didn't work.

If all the children of list view are of same color, then wrap you ListView with container and set the color of the container to the color of list child. It will hide the lines.