Flutter 使用flatter向ClipRect添加阴影和彩色边框的最佳方法

我有一个简单的

ClipRRect

小部件，如下所示：

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

我试图通过用另一个

卡片

小部件包装此小部件来添加阴影，以添加带有

高程

的阴影，如下代码所示：

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

但我认为这根本不符合逻辑，因为它显示的网格项稍微小一些，而且我需要在这个网格中添加一个

边框

我希望这足够清楚。
您可以创建您的小部件，以采用阴影和边框颜色，如下所示
因为ClipRect不能接受阴影或边框颜色，所以我们使用容器

clipRRect构造函数

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

我像下面一样实现了它

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

                     

感谢您的支持，但我不能直接为
ClipRRect
创建阴影和边框，对吗？我想在您的示例中，您也删除了
ClipRRect
“是的”`ClipRRect（{Key，BorderRadius-BorderRadius:BorderRadius.zero，CustomClipper-clipper-clippehavior:Clip.antialas，Widget-child}）“从它的构造器来看，它不支持这一点
       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)),
            ),
          ])