How can i add a shadow in ListTile flutter like 'elevation'

Question

I need to add a shadow in my items listTile elements in flutter, but i could not do that with BoxShadow because it is only possible in Container

this is my listTile:

                        child: ListTile(

                          leading: const Icon(Icons.flight_land),
                          tileColor: Colors.black.withOpacity(0.5),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15),
                            side: BorderSide(
                              color: Colors.black,
                            ),
                          ),

                          title: Text(
                            snapshot
                                .data!.docChanges[index].doc['nameCourse'],
                            style: TextStyle(
                              fontSize: 20,
                              //COLOR DEL TEXTO TITULO
                              color: Colors.blueAccent,
                            ),
                          ),
                          contentPadding: EdgeInsets.symmetric(
                            vertical: 8,
                            horizontal: 16,
                          ),
                        ),

zabaykal · Answer 1 · 2021-12-30T21:01:55.967

8

You can wrap your ListTile widget with Material widget and give it shadow.

For example:

Material(
  elevation: 20.0,
  shadowColor: Colors.blueGrey,
...
),

edited Dec 30 '21 at 21:01

answered Dec 30 '21 at 20:56

zabaykal

1,134
1
8
21

score 3 · Answer 2 · answered Dec 31 '21 at 03:30

Try below code hope its help to you.

Using Card:

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15),
    side: BorderSide(
      color: Colors.black,
    ),
  ),
  elevation: 16,
  shadowColor: Colors.red,
  child: ListTile(
    leading: const Icon(Icons.flight_land),
    title: Text(
      'Title',
      style: TextStyle(
        fontSize: 20,
        //COLOR DEL TEXTO TITULO
        color: Colors.blueAccent,
      ),
    ),
    subtitle: Text(
      'Sub Title',
    ),
    trailing: const Icon(Icons.add),
  ),
),

Your result Screen->

Refer Card here

Using PhysicalModel:

PhysicalModel(
        color: Colors.white,
        elevation: 18,
        shadowColor: Colors.green,
        borderRadius: BorderRadius.circular(20),
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: Text(
            'Title',
            style: TextStyle(
              fontSize: 20,
              //COLOR DEL TEXTO TITULO
              color: Colors.blueAccent,
            ),
          ),
          subtitle: Text(
            'Sub Title',
          ),
          trailing: const Icon(Icons.add),
        ),
      ),

Refer PhysicalModel here

Refer ListTile here

Your Result screen->

Using PhysicalShape

PhysicalShape(
        color: Colors.white,
        elevation: 18,
        shadowColor: Colors.yellow,
        clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: Text(
            'Title',
            style: TextStyle(
              fontSize: 20,
              //COLOR DEL TEXTO TITULO
              color: Colors.blueAccent,
            ),
          ),
          subtitle: Text(
            'Sub Title',
          ),
          trailing: const Icon(Icons.add),
        ),
      ),

Refer PhysicalShape here

Your Result screen->

Using Material

Material(
        color: Colors.white,
        elevation: 18,
        shadowColor: Colors.blue,
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: Text(
            'Title',
            style: TextStyle(
              fontSize: 20,
              //COLOR DEL TEXTO TITULO
              color: Colors.blueAccent,
            ),
          ),
          subtitle: Text(
            'Sub Title',
          ),
          trailing: const Icon(Icons.add),
        ),
      ),

Refer Material here

Your Result screen->

score 1 · Answer 3 · answered Dec 30 '21 at 20:54

You can't add a shadow to the ListTile itself. So a solution can be to wrap it with a container like so

Container(
  decoration: BoxDecoration(
    color: Colors.white, // Your desired background color
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(color: Colors.black.withOpacity(0.3), blurRadius: 15),
    ]
  ),
  child: ListTile(
    leading: const Icon(Icons.flight_land),
    tileColor: Colors.black.withOpacity(0.5),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15),
      side: const BorderSide(
        color: Colors.black,
      ),
    ),
    title: const Text(
      'Text',
      style: TextStyle(
        fontSize: 20,
        //COLOR DEL TEXTO TITULO
        color: Colors.blueAccent,
      ),
    ),
    contentPadding:
    const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  ),
),

score 1 · Answer 4 · answered Dec 31 '21 at 03:33

1

You can use card, and put this in card

elevation: 16,
  shadowColor: Colors.black,

answered Dec 31 '21 at 03:33

mishalhaneef

672
8
29

Rush tomato · Accepted Answer · 2022-01-01T03:39:49.467

          child: ListTile(
                          leading: const Icon(Icons.flight_land),
                          tileColor: Colors.black.withOpacity(0.5),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15),
                            side: BorderSide(
                              color: Colors.black,
                            ),
                          ),
                          Container(
boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ]
                          title: Text(
                            snapshot
                            .data!.docChanges[index].doc['nameCourse'],
                            style: TextStyle(
                              fontSize: 20,
                              //COLOR DEL TEXTO TITULO
                              color: Colors.blueAccent,
                            ),
                          ),
                         ),
                          contentPadding: EdgeInsets.symmetric(
                            vertical: 8,
                            horizontal: 16,
                          ),
                        ),

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? — Jeremy Caney, Jan 01 '22 at 00:32

How can i add a shadow in ListTile flutter like 'elevation'

5 Answers5