title: Best way to add a shadow and colored border to ClipRRect using flutter
body: <p>I have a simple <code>ClipRRect</code> widget as the below one:</p>
  
  <pre><code>  @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,
            ),
          ),
        ),
      );
    }
  </code></pre>
  
  <p>I tried to add a shadow by wrapping this widget with another <code>Card</code> widget to add a shadow with an <code>elevation</code> as the below code:</p>
  
  <pre><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,
              ),
            ),
          ),
        ),
      );
    }
  </code></pre>
  
  <p>but I think it's not logical at all because it shows the grid item a bit smaller, and also I need add a <code>border</code> in this grid..</p>
  
  <p>I hope this would be clear enough..</p>