Changer la couleur de fond de ListTile lors de la sélection dans Flutter

Question

J'ai créé un ListView dans Flutter, mais j'ai maintenant un ListTiles dans cette ListView qui peut être sélectionné. Lors de la sélection, je souhaite que la couleur de fond change en une couleur de mon choix. Je ne sais pas comment faire ça .. Dans les docs ils mentionnent qu'une ListTile a une propriété style. Cependant, lorsque j'essaie d'ajouter cela (comme dans la troisième dernière ligne du code ci-dessous), cette propriété style obtient une ligne rouge ondulée en dessous et le compilateur me dit que The named parameter 'style' isn't defined.

Widget _buildRow(String string){
  return new ListTile(
    title: new Text(string),
    onTap: () => setState(() => toggleSelection(string)),
    selected: selectedFriends.contains(string),
    style: new ListTileTheme(selectedColor: Colors.white,),
  );
}

Answer 1

Ce n'est pas ListTile qui a la propriété style. Mais ListTileTheme. ListTileTheme est un voyage hérité. Et comme d’autres, il sert à transmettre les données down (comme le thème ici). 

Pour l'utiliser, vous devez envelopper n'importe quel widget au-dessus votre ListTile avec une ListTileTheme contenant les valeurs souhaitées.

ListTile sera alors le thème lui-même en fonction de l'instance ListTileTheme la plus proche.

Answer 2

Si vous avez également besoin d’un écouteur onTap avec un effet d’ondulation, vous pouvez utiliser Ink:

ListView(
  children: [
    Ink(
      color: Colors.lightGreen,
      child: ListTile(
        title: Text('With lightGreen background'),
        onTap() { },
      ),
    ),
  ],
);

 

Answer 3

J'ai été en mesure de changer la couleur d'arrière-plan du ListTile en utilisant un BoxDecoration inside Container :

ListView (
    children: <Widget>[
        new Container (
            decoration: new BoxDecoration (
                color: Colors.red
            ),
            child: new ListTile (
                leading: const Icon(Icons.euro_symbol),
                title: Text('250,00')
            )
        )
    ]
)

Answer 4

J'ai pu modifier la couleur de fond de ListTile en en faisant un enfant du conteneur et en ajoutant de la couleur au conteneur.

Ici drawItem est la classe de modèle qui contient la valeur isSelected. La couleur de l'arrière-plan dépend de la valeur isSelected.

Remarque: pour les éléments non sélectionnés, conservez la couleur Transparent afin de conserver l'effet d'entraînement.

 for (var i = 0; i < drawerItems.length; i++) {
      var drawerItem = drawerItems[i];
      drawerOptions.add(new Container(
        color: drawerItem.isSelected
            ? Colors.orangeAccent
            : Colors.transparent,
        child: new ListTile(
          title: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[Text(drawerItem.title), drawerItem.count],
          ),
          leading: SvgPicture.asset(
            drawerItem.icon,
            width: 34,
            height: 34,
          ),
          onTap: () {
            _handleNavigation(i);
          },
          selected: drawerItem.isSelected,
        ),
      ));
    }