Flutter - 如何將小部件添加到容器的邊框？

Question

假設我有一個普通的容器。 如何將小部件（例如 Button）添加到容器的邊框？

邊框上有按鈕的容器

Answer 1

您可以使用徽章插件。 例如，在您的情況下，您可以使用Badge包裝容器並修改position參數，該參數是 BadgePosition 到確切的底部和右側值。

Badge(
      position: BadgePosition.bottomRight(bottom: 0,right: 0),//change this to get the right location
      badgeContent: YourWidgetAtTheBorder(),
      child: YourContainer(),
       
    )
  

Answer 2

您可以使用Stack小部件來重疊一些小部件，然后首先創建容器（我使用 Card 只是為了模擬高程和邊框效果），然后添加圖標、按鈕等，默認情況下它會對齊 TopLeft 中的小部件角落，我將其更改為 centerRight，但如果您想要更多控制，只需將小部件包裝在 Align 或 Positioned 小部件中以將它們移動到您想要的位置

class MyWidget extends StatelessWidget {
  final Size size = Size(400, 400);
  @override
  Widget build(BuildContext context) {
    return Stack(alignment: Alignment.centerRight, children: [
      Card(
          margin: const EdgeInsets.all(24.0), //half the size the icon so it looks like in the middle of the border
          elevation: 8,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(8)),
            side: BorderSide(color: Colors.blue, width: 2)
          ),
          color: Colors.grey,
          child: SizedBox.fromSize(
            size: size, child: Center(child: Text('MyText'))
          )
      ),
      Icon(Icons.done, size: 48)
    ]);
  }
}