一列中重叠的颤动小部件

Question

我有一个列，顶部包含展开的地图，底部包含一张显示一些信息的卡片。这张卡有一个边框半径，所以如果没有任何改变，我会在卡的角落周围有一个令人不快的空白区域：

我目前的解决方案是将地图放入 Transform.scale 中，这是覆盖该空间的一种巧妙方法。我想知道是否有更好的解决方案？

我尝试使用堆栈，但堆栈的问题是，如果我的卡片尺寸发生变化，那么定位的地图必须了解该变化才能相应地调整其底部，这会导致代码混乱。

编辑： 这是我目前的解决方案，我正在寻找改进的方法。

Column(
  children: [
    Transform.scale(
      scale: 1.1,
      child: MapView(),
    ),
    const Card()
   ],
 )

Answer 1

解决方案是CLipRRect和Stack widget。 ClipRRect 有点难以理解，但是如果你这样做了，你就可以解决这个问题

Column( children: [ Expanded( child: MapView(), ), ClipRRect( borderRadius: BorderRadius.only( topLeft: Radius.circular(20.0), // Adjust the values as needed topRight: Radius.circular(20.0), ), child: Container( color: Colors.white, // You can set the background color if needed child: const Card(), // Your card widget ), ), ], )