如何在 FloatingActionButton 上制作边框？

Question

我的问题是我想在浮动操作按钮周围做边框。我尝试将其放入容器中并这样做，但这不是我想要的。

        decoration: BoxDecoration(
            border: Border.all(
                color: Colors.brown, width: 5, style: BorderStyle.solid)),
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 55),
        width: 80,
        height: 80,
        child: FloatingActionButton(
          focusColor: Colors.white54,
          backgroundColor: Colors.white,
          onPressed: () {},
          child: const Icon(
            Icons.add,
            color: Colors.black,
            size: 50,
          ),
        ),
      ),

我有这个：

我要这个：

Answer 1

在FloatingActionButton小部件中，您已property命名shape，使用它可以实现您想要的结果。

   FloatingActionButton(
          backgroundColor: Colors.white,
          onPressed: (){},
          child: Icon(Icons.add,color: Colors.black,size: 30,),
          shape: RoundedRectangleBorder(side: BorderSide(width: 3,color: Colors.brown),borderRadius: BorderRadius.circular(100)),
        )