How to change ListTile background color when tapped?

Question

I've searched high and low, but cannot find a way to change the background color on a ListTile, for example when it is tapped by the user.

Does anyone have a solution to what seems like a common use case?

Answer 1

To change the background color of a ListTile, you can simply wrap it in a Container and change its color attribute. Afterwards you can change the color, when onTap of the ListTile is triggered.

Demo:

Demo Source:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomTile()
        ),
      ),
    );
  }
}

class CustomTile extends StatefulWidget {
  @override
  CustomTileState createState() => CustomTileState();
}

class CustomTileState extends State<CustomTile> {
  Color color;

  @override
  void initState() {
    super.initState();

    color = Colors.transparent;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: ListTile(
        title: Text('Title'),
        subtitle: Text('Subtitle'),
        onTap: () {
          setState(() {
            color = Colors.lightBlueAccent;
          });
        },
      ),
    );
  }
}

Answer 2

As You Haven't Describes your Use Case or shared any Code i have shared sample code that Change Listile Color onTap()

class Screen1 extends StatefulWidget {
  @override
  Screen1State createState() {
    return new Screen1State();
  }
}

class Screen1State extends State<Screen1> {
  bool _color;

  @override
  void initState() {
    super.initState();
    _color = true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Card(
        color: _color ? Colors.deepOrangeAccent : Colors.purpleAccent,
        child: ListTile(
          onTap: () {
            setState(() {
              _color = !_color;
            });
          },
          title: Text(
            'Title',
            style: TextStyle(color: Colors.white),
          ),
          subtitle: Text(
            'Subtitle',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ));
  }
}