How to change shape of leading in ListTile in Flutter?

Question

I want to show an image in a ListTile widget which should looks something like this.

Here is my code:

                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 20.0),
                            child: Card(
                              color: Colors.white,
                              child: ListTile(
                                leading: Container(
                                  child: Image.network((orientation == Orientation.portrait
                                        ? image.portrait
                                        : image.landscape),
                                        fit: BoxFit.cover)
                                     ),
                                title: Text(terms[index].title),
                                subtitle: Text(terms[index].videoNumber.toString() + " Videos"),
                                trailing: Icon(
                                  Icons.arrow_forward_ios,
                                  color: Colors.lightBlueAccent,
                              ),
                              ),
                            ),
                          );

This results in below output

What should I do so the image looks spread out as above.

Answer 1

Widget buildCard(_user) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
      
        child: Card(
          color: Colors.blue.shade100,
          child: Row(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.all(0),
                decoration:  BoxDecoration(
                  color: Colors.blue.shade200,
                  shape: BoxShape.rectangle,
                  borderRadius:const BorderRadius.only(
                    topLeft: Radius.circular(4.0),
                    bottomLeft: Radius.circular(4.0),
                  ),
                ),
                width: 20,
                height: 73,
              ),
              const SizedBox(width: 10),
              Expanded(
                child: ListTile(
                  title: Text('${_user.state?.email!.substring(0, 6)}'),
                  subtitle: Text('${_user.state?.createdAt}'),
                ),
              ),
              //const Icon(Icons.arrow_forward_ios, color: Colors.blue),
            ],
          ),
        ),
      ),
    );
  }

Answer 2

You can set the padding of ListTile to 0:

                  ...
                      child: ListTile(
                        contentPadding: EdgeInsets.all(0),
                        leading: ...
                  );

But even so, you can see that the leading only take the upper half, not the entire height of the card:

                 ... 
                    Card(
                      color: Colors.blue,
                      child: ListTile(
                        contentPadding: EdgeInsets.all(0),
                        leading: ...

Which result in:

You can use a Stack to include both ListTile and the leading Icons but lots of things have to be hardcorded. In this case, I recommend using ClipRRect with Row:

Padding(
                    padding: EdgeInsets.symmetric(
                        vertical: 0.0, horizontal: 20.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Container(
                        height: 70,
                        color: Colors.white,
                        child: Row(
                          children: <Widget>[
                            Container(
                              color: Colors.red,
                              width: 70,
                              height: 70,
                              child: Icon(Icons.cake, color: Colors.white),
                            ),
                            SizedBox(width: 10),
                            Expanded(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text('Test Title'),
                                  Text('Test Video',
                                      style: TextStyle(color: Colors.grey))
                                ],
                              ),
                            ),
                            Icon(Icons.arrow_forward_ios,
                                color: Colors.blue),
                          ],
                        ),
                      ),
                    ),
                  );

Result: