ListTile tileColor overflows outside its container, Flutter

Question

I tried to fix this issue where my ListTile's colour, (1) doesn't show up behind each tile, and instead (2) shows up as overflow behind the parent container.

Here is a screenshot of the problem.

I am using Flutter version 2.2.3 with Dart 2.13.4. I thought there was a problem with my emulator at first (Pixel 2 API 30), so I tried it on a Pixel 3 API 30 instead. The problem still persisted.

I asked a friend to test out my code for problems, he said he couldn't find any, and the code worked as it was supposed to on his screen. I don't understand why it was so, I believe he also uses Flutter only a single version behind me. With different colours applied, it looked like this on his screen, which was what I was aiming for.

That only made it more difficult for me to understand the problem, and it also confused me because he was running my code with no changes, and the problem only shows up on my screen.

If you need to see the code for the ListView builder and the parent container, I will attach it below here.

This is the widget for the ListView builder:

Widget _buildTodoList() {
    return ListView.builder(
        itemBuilder: (context, i) {
          return _buildRow(i + 1, _todoItems[i]);
        },
        itemCount: _todoItems.length,
    );
  }

This is the widget for ListTile:

Widget _buildRow(int key, String value) {
    return Container(
      margin: EdgeInsets.only(bottom: 5),
      child: ListTile(
        // item tile
        tileColor: Colors.blueGrey,
        leading: Container(
          height: 35,
          width: 35,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.grey.shade800,
          ),
          child: Center(
            child: Text(
              key.toString(),
              style: TextStyle(
                color: Colors.grey.shade300,
              ),
            ),
          ),
        ),

        title: Text(value),
      ),
    );
  }

And this is the parent container:

Expanded(
                  child: Container(
                    // for list of items
                    child: _buildTodoList(),
                    height: 250,
                    decoration: BoxDecoration(
                      color: Colors.blueGrey.shade50,
                      border: Border.all(
                          width: 0.6,
                          color: Colors.black,
                          style: BorderStyle.solid),
                    ),
                  ),
                ),

Thank you!

Solution

It seems, it's showing visual rows, because of empty spaces. In our case, we have listView of height:250. But if you wrap with Expanded it will take extra spaces of screen. I'm testing based on Scaffold>Column>Container>ListView. If you wrap Column with another Container and provide color, it will fix the issue. Like this:

    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Container(
          color: Colors.white,
          child: Column(
            children: [
              Container(
                // for list of items
                child: ListView.builder(
                  itemCount: _todoItems.length,
                  itemBuilder: (context, i) {
                    return _buildRow(i + 1, _todoItems[i]);
                  },
                ),

                ///50% of screen
                height: constraints.maxHeight * .5,
                decoration: BoxDecoration(
                  color: Colors.blueGrey.shade50,
                  border: Border.all(
                    width: 0.6,
                    color: Colors.black,
                    style: BorderStyle.solid,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

However, I prefer using LayoutBuilder.

Also, you can add another Expanded>Container as Column child, it will fix the issue. BTW, I hope you will be satisfied with 1st solution. If you have more elements, you can also use stack here.

Comments

[Midhun MP]

You set a margin there. Remove margin: EdgeInsets.only(bottom: 5),. Are you talking about the bottom color in list ile or the background color in that buttons and other widgets ?

[Sofia]

Hello. I am talking about the tile colour of the List Tile. It is supposed to show up as tiles inside the container, but instead it overflows around its parent container.

[CatOverflow]

check this: github.com/flutter/flutter/issues/83108 , it may help