Search code examples
flutterflutter-layoutflutter-listview

Color of ListTile overflows its parent - Flutter


The Problem : The 'color' of ListTile and the HoverColor overflows their parents. Maybe some other colors, but I haven't tested yet. Here is the screenshots of this strange problem. screenshot

@override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: titles.length,
        itemBuilder: (context, index) {
          return GestureDetector(
            onSecondaryTap: () {
              print('clicked index : $index');
            },
            child: ListTile(
              hoverColor: Colors.amber,
              title: Padding(
                padding: EdgeInsets.only(bottom: 0, top: 0),
                child: Text(
                  titles[index],
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: dark,
                    fontSize: 14,
                  ),
                ),
              ),
              subtitle: Padding(
                padding:
                    const EdgeInsets.only(bottom: 0, top: 0, left: 0, right: 0),
                child: Text(
                  subtitles[index],
                  style: TextStyle(
                    color: _statusColor(subtitles[index]),
                    fontSize: 11,
                  ),
                ),
              ),
              leading: CircleAvatar(
                radius: 25,
                backgroundImage: NetworkImage(
                    "https://images.unsplash.com/photo-1547721064-da6cfb341d50"),
              ),
            ),
          );
        });
  }
}

Solution

  • based on the info you gave in the comments, your problem was that you didn't wrap your widget with a scaffold so try wrapping it with just a scaffold and it will work.

    there should only be one material app in the project. but you can have as many scaffolds as you want.