How to add shadow just to an image in Card in Circle Avatar in flutter?-CodePudding

I am new to flutter and I want to add shadow to an image in Card (shadow just to an image not the text), how can I do that? Below is the snippet of my code, please let me know how can I do that, thank you.

child: Container(
                height: 70,
                child: Card(
                  child: ListTile(
                    onTap: () {},
                    title: Text(eventList[index].event_name),
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(eventList[index].imageURL),
                    ),
                  ),
                ),
              ),

CodePudding user response：

you can wrap the CircleAvatar with another Container and specify the boxShadow property in its decoration, or for more accuracy, just use a DecoratedBox like this:

Container(
  height: 70,
  child: Card(
    child: ListTile(
      onTap: () {},
      title: Text("eventList[index].event_name"),
      leading: DecoratedBox(
        decoration: BoxDecoration(
         boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.black.withOpacity(.2),
            blurRadius: 5,
            offset: const Offset(0, 10),
          )
        ]),
        child: CircleAvatar(
          backgroundImage: NetworkImage("eventList[index].imageURL"),
        ),
      ),
    ),
  ),
);

CodePudding user response：

You can simply use a Widget called PhysicalModel where it can be easily used when showing shadows. You can play with the properties such as color and elevation for your desired shadow effect.

https://api.flutter.dev/flutter/widgets/PhysicalModel-class.html

 leading: PhysicalModel(
                    color: Colors.grey.withOpacity(0.8),
                    shape: BoxShape.circle,
                    elevation: 10.0,
                    child: const CircleAvatar(
                      backgroundImage: NetworkImage(
                          'https://i1.sndcdn.com/artworks-000486414654-mt7qdt-t500x500.jpg'),
                    ),
                  ),