如何在 Flutter 中更改 ListTile 中的前导形状？

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

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:

Answer 2

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),
        ],
      ),
    ),
  ),
);

}