仅显示容器中小部件的一部分

Question

我想实现这样的设计。

如何仅显示图像的一部分，如上方的容器中一样？

据我所知，Image小部件没有内置方法可以以这种方式删除，并且通常该小部件的子级都无法以任何方式构建以超出边界。然后剪切图像？

Answer 1

Container(
  margin: const EdgeInsets.only(top: 50),
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black),
  ),
  child: Stack(
    children: <Widget>[
      Positioned(
        right: -35,
        top: -35,
        child: Image(
          image: AssetImage("assets/icon/ic_notification.png"),
          width: 100,
          height: 100,
        ),
      ),
      Column(
        children: <Widget>[
          Text("Item 1"),
          Text("Item 2"),
          Text("Item 3"),
        ],
      ),
    ],
  ),
),

Answer 2

尝试一下。

Container(
   child: Stack(
      children : <widget>[
         Positioned(
           top : -100,
           right : -100,
           child : Image.asset("asstes/images/img1.png", fit : BoxFit.cover),              
         )
      ]
    )
)

您无需参考整个视频。仅参考2分钟