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.

add round corners to the container or use a container inside of row instead of leading — Adithya Shetty, Aug 29 '20 at 02:53
When you say `use a container inside of row`, do you mean to not use ListTile at all? — MXC, Aug 29 '20 at 03:05
no use row inside of list tile then add container inside row — Adithya Shetty, Aug 29 '20 at 03:42

Bach · Accepted Answer · 2020-08-29T03:36:23.817

6

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:

edited Aug 29 '20 at 03:36

answered Aug 29 '20 at 03:29

Bach

2,928
1
6
16

It is close but it exactly not what I am looking for. https://drive.google.com/file/d/1veBdLzNmn4Tj52PDxU3ql5fphFi3pym7/view?usp=sharing – MXC Aug 29 '20 at 03:48
@AbhishekSharma You need to change the leading Container's background color to the same as your icon background color. I only set the leading Container color to Red for easier visual explanation. – Bach Aug 29 '20 at 03:56
The issue is I am getting images from the network. How will get the image color which needs to fill in. – MXC Aug 29 '20 at 03:59
@AbhishekSharma I usually use this tool: https://imagecolorpicker.com/en/ – Bach Aug 29 '20 at 04:01
@AbhishekSharma You can also find similar icon on https://fontawesome.com/icons?d=gallery. Then use the package: font_awesome_flutter to include it in without fixed background like in image. – Bach Aug 29 '20 at 04:04
hmm..not sure how I would use this programmatically. The idea would be to find the main color of image and then update the container background. – MXC Aug 29 '20 at 04:04
@AbhishekSharma Image color detection is not an easy task in Flutter. You can refer to this to try: https://stackoverflow.com/questions/50449610/pick-main-color-from-picture. But as I always do in my project, all icons should be use with no background to save lots of time trying to solve a problem which can be avoided at the beginning (using font_awesome_flutter, cupertino_icons, etc). – Bach Aug 29 '20 at 04:07
Unfortunately, I do not have control over the images. It is what my backend team provides me. Anyways thanks for your help. – MXC Aug 29 '20 at 04:09
1

My bad, I just saw the json response from backend has a backgroundColor property in it. It did the trick. Thanks again. – MXC Aug 29 '20 at 04:15
Glad to help Abhishek! – Bach Aug 31 '20 at 01:42

score 0 · Answer 2 · edited Nov 29 '21 at 00:47

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

Welcome to Stack Overflow. Code is a lot more helpful when it is accompanied by an explanation. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please [edit] your question and explain how it answers the specific question being asked. See [answer]. — ChrisGPT was on strike, Nov 29 '21 at 01:12

How to change shape of leading in ListTile in Flutter?

2 Answers2