CODEWITHSUNDEEP
flutter
LonelyWolf
LonelyWolf

Reputation: 4402

ListTile covers button animation

Just noticed that ListTile cover button animation when wrapped inside a container with background color set to anything but transparent. Wrapping ListTile in a container with set color is the only way I know to change background color of ListTile. Is there any other way to change background color of the ListTile without loosing button animation? 

           Container(
              color: Colors.green,
              child: ListTile(
                title: Text('Test'),
                trailing: IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {},
                ),
              ),
            )

OUTPUT

enter image description here

Upvotes: 1

Views: 477

Answers (1)

Thepeanut
Thepeanut

Reputation: 3417

This is because of the way InkWell works (Some buttons, like the IconButton, use InkWell or InkResponse as their parent). You can read about it more on this github issue page.

In order to make that ripple effect to display on top of the decorated Container (the green one in your code) - it needs a Material widget above the Container in the widget display tree. So you should edit the code and add a Material widget with transparency in your Container, so the widget display tree will look like Container -> Material -> Ink.

Container(
          color: Colors.green,
          child: Material(
            type: MaterialType.transparency,
            child: ListTile(
              title: Text('Test'),
              trailing: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {},
              ),
            ),
          ),
        ),

Upvotes: 2

Related Questions