Flutter - 如何为同一个listtile添加两种背景颜色

Question

How to make a listtile like this. The trailing needs a different background color and must expand upto right extreme of the display. Can anyone help and show an example code to make similar to this.

The code I have right now

ListTile(
              leading: const CircleAvatar(
                backgroundImage: AssetImage("assets/images/image.jpeg"),
              ),
              title: const Text("Annie Jospeh"),
              subtitle: Row(
                children: const [
                  Icon(
                    Icons.person_add,
                    size: 20,
                    color: Color.fromRGBO(8, 183, 119, 1),
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  Text("10"),
                  SizedBox(
                    width: 30,
                  ),
                  Text(
                    "\$",
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Color.fromRGBO(8, 183, 119, 1),
                    ),
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  Text("10"),
                ],
              ),
              trailing: const SizedBox(
                color: const Color.fromRGBO(234, 244, 225, 1),
                child: Text("Hello"),
              ),
            )

Answer 1

It is simple,

• In trailing, Add Container and provide decoration for the circular border and backgroundColor.
• Add Row as a child to Container and set mainAxisSize: MainAxisSize.min .
  

Code:

ListTile(
            contentPadding: const EdgeInsets.all(0),
            leading: const CircleAvatar(
              child: Icon(Icons.person),
            ),
            title: const Text('Abdul Malik'),
            subtitle: const Text('₹200'),
            trailing: Container(
              decoration: BoxDecoration(
                color: Colors.green[100],
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(10),
                  bottomLeft: Radius.circular(10),
                ),
              ),
              width: MediaQuery.of(context).size.width * 0.4,
              height: 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Icon(Icons.facebook),
                  Icon(Icons.facebook_rounded),
                  Icon(Icons.facebook_outlined),
                  Icon(Icons.facebook_sharp),
                ],
              ),
            ),
          )

Output:

Answer 2

You can create custom listTile while the tralling is just not about color also include circular corners.

Container(
  height: kToolbarHeight,
  color: Colors.white, //main bg color
  child: Row(
    children: [
      Expanded(
        flex: 2,
        child: CircleAvatar(
          backgroundColor: Colors.grey,
        ),
      ),
      Expanded(
        flex: 3,
        child: Column(
          children: [],
        ),
      ),
      Expanded(
        flex: 5,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.purple,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(8),
              bottomLeft: Radius.circular(8),
            ),
          ),
        ),
      )
    ],
  ),
)

You can also choose LayoutBuilder instead of Expanded use case to provide size.

Answer 3

Try adding this

tileColor: Colors.blue,

like this

 Expanded(
          child: ListTile(
                              tileColor: Colors.blue,
                              leading: FlutterLogo(),
                              title: Text('These ListTiles are expanded '),
                            ),
                          ),