Best way to add a shadow and colored border to ClipRRect using flutter

I have a simple ClipRRect widget as the below one:

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
          child: GridTile(
        child: Image.network(
          imageUrl,
          fit: BoxFit.cover,
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black87,
          leading: IconButton(
            icon: Icon(Icons.favorite),
            color: Theme.of(context).accentColor,
            onPressed: () {},
          ),
          title: Text(
            title,
            textAlign: TextAlign.center,
          ),
          trailing: IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {},
            color: Theme.of(context).accentColor,
          ),
        ),
      ),
    );
  }

I tried to add a shadow by wrapping this widget with another Card widget to add a shadow with an elevation as the below code:

@override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        elevation: 5,
          child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
            child: GridTile(
          child: Image.network(
            imageUrl,
            fit: BoxFit.cover,
          ),
          footer: GridTileBar(
            backgroundColor: Colors.black87,
            leading: IconButton(
              icon: Icon(Icons.favorite),
              color: Theme.of(context).accentColor,
              onPressed: () {},
            ),
            title: Text(
              title,
              textAlign: TextAlign.center,
            ),
            trailing: IconButton(
              icon: Icon(Icons.shopping_cart),
              onPressed: () {},
              color: Theme.of(context).accentColor,
            ),
          ),
        ),
      ),
    );
  }

but I think it's not logical at all because it shows the grid item a bit smaller, and also I need add a border in this grid..

I hope this would be clear enough..

Solution 1: griffins

you can create your widget to take in a shadow and border colors as follows since ClipRRect cant take in shadow or border color we use a container

clipRRect constructor

ClipRRect({Key key, BorderRadius borderRadius: BorderRadius.zero, CustomClipper<RRect> clipper, Clip clipBehavior: Clip.antiAlias, Widget child}) 

.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      child: Card(
        elevation: 4.0,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(10),
                topRight: Radius.circular(10)),
            side: BorderSide(width: 2, color: Colors.green)),
        child: Center(
          child: Icon(
            Icons.movie,
            size: 150.0,
          ),
        ),
      ),
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.white54,
            blurRadius: 5.0,
            offset: Offset(0, 10),
            spreadRadius: 0.5,
          ),
        ],
        borderRadius: BorderRadius.circular(12),
      ),
    );
  }
}

Solution 2: Kasun Thilina

I implemented it like below

       Stack(alignment: Alignment.center, children: [
            Container(
              width: DeviceUtils.getScaledHeight(context, 0.072),
              height: DeviceUtils.getScaledHeight(context, 0.072),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.green),
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Colors.white54,
                    blurRadius: 5.0,
                    offset: Offset(0, 10),
                    spreadRadius: 0.5,
                  ),
                ],
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: ImageFromURL(
                  url: "https://i.pinimg.com/originals/63/81/a7/6381a77565b51a541d0d85cb145e7d94.jpg",
                  width: DeviceUtils.getScaledHeight(context, 0.07),
                  height: DeviceUtils.getScaledHeight(context, 0.07)),
            ),
          ])

Solution 3: Isuru

Here's another solution which worked for me.

Container(
  child: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: SizedBox(
      child: ImageWidget(imageUrl),
      width: 100,
      height: 100,
    ),
  ),
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.15),
        blurRadius: 8,
        spreadRadius: 6,
        offset: const Offset(0, 0),
      ),
    ],
  ),
)