flutterhoverflutter-list-tile

Flutter Listtile hover color is not working


I'm trying to add a hover effect to the list tile. I have tried wrapping it up in a Material widget to enable it. Tile color works perfectly but hovercolor is not working. Please suggest some ideas.

Just a snippet of the code

 return Container(
        child: ListView.builder(
      itemCount: listdata.length,
      itemBuilder: (context, index) {
        return Material(
          child: ListTile(
            shape:
                const Border(bottom: BorderSide(width: 1, color: Colors.white)),
            hoverColor: Colors.red,
            tileColor: Colors.blueAccent,
            title: Text(listdata[index]['data'].toString()),
          ),
        );
      },
    ));


Solution

  • The hoverColor property in Flutter's ListTile works only on Web or Desktop, where hover events are supported. It doesn't work on mobile devices since they rely on touch interactions, not hover.

    If you want to achieve a similar effect for touch interactions on mobile devices, you can use the onTap

    Modified You code with this:

       return Container(
        child: ListView.builder(
      itemCount: listdata.length,
      itemBuilder: (context, index) {
        return Material(
            child: InkWell(
          onTap: () {
            //Handle ontap here
          },
          splashColor: Colors.red, //set your hover color here
          child: ListTile(
            shape: const Border(bottom: BorderSide(width: 1, color: Colors.white)),
            hoverColor: Colors.red,
            tileColor: Colors.blueAccent,
            title: Text(listdata[index]['data'].toString()),
          ),
        ));
      },
    ));
    

    HAPPY CODING :)