将 ListTile 小部件的背景更改为透明，使其与背景页面的颜色混合

Question

I had to create a toggle switch with some text next to it. I thought it was better to do it by using the ListTile widget which uses title to display the text next to the toggle switch and leading to display the switch before the text. The problem is that when the background of the page changes the ListTile background is white.

I can put the listtile widget inside a container and change the color of the container to change the color of the listtile but I don't want to do that because the background changes dynamically and I don't want to change the color of container everytime. Is there any way I can make the listtile transparent so that it gets the color of the background automatically?

As soon in the image, background is yellow but listtile is white and I want it to be yellow. How it currently looks . The code that I have:

Scaffold(
 backgroundColor: Colors.yellow,
        child: ListTile(
          leading:  ToggleSwitch
          title: Text("Account"),
        ),
      )

I cannot do the following because I can set the background of the scaffold but I cannot set the color of the container manually:

Scaffold(
 backgroundColor: Colors.yellow,
        child: Container(
color : Colors.yellow 
ListTile(
          leading:  ToggleSwitch
          title: Text("Account"),
        ),
      ),
)

Is there a way I can achieve this or should I implement without using the ListTile widget?

Answer 1

you have to create a custom listTile as from documentation ListTile constructors dont take a color

 ListTile({Key key, Widget leading, Widget title, Widget subtitle, Widget trailing, bool isThreeLine: false, bool dense, EdgeInsetsGeometry contentPadding, bool enabled: true, GestureTapCallback onTap, GestureLongPressCallback onLongPress, bool selected: false }) 

from the documentation page there is an eample on how to create a custom ListTile