Flutter :- 在图标周围创建圆形边框

Question

我想在图标周围创建圆形边框，如图所示。

Container(
              margin: EdgeInsets.all(20),
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                color: Colors.white,
                border: Border.all(
                  width: 2
                )
              ),
              child: Icon(Icons.arrow_downward,color: Colors.white,),
            )

我不需要切割圆形边框，因为它们在图像中显示，但完整的圆形边框，我也试过这个代码 =>这个答案

Answer 1

我在上面的代码中犯了一些错误。但我已经想通了，这是新代码。

Container(
                  margin: EdgeInsets.all(20),
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      border: Border.all(width: 2, color: Colors.white)),
                  child: Icon(
                    Icons.cancel,
                    color: Colors.white,
                  ),
                )),

此外，如果您想让完整的 Widget 可点击，那么您可以像这样使用它。

GestureDetector(
            onTap: () {
              //Navigator.of(context).pop();

            },
            child: new Align(
                alignment: Alignment.bottomRight,
                child: Container(
                  margin: EdgeInsets.all(20),
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      border: Border.all(width: 2, color: Colors.white)),
                  child: Icon(
                    Icons.cancel,
                    color: Colors.white,
                  ),
                )),
          ),

Answer 2

Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(color: Colors.white)
            ),
            child: Icon(Icons.check, color: Colors.white,),
          )

或者，如果您需要一些奇特的效果，可以使用 Material：

Material(
            color: Colors.transparent,
            shape: CircleBorder(
              side: BorderSide(color: Colors.white)
            ),
            child: Icon(Icons.check, color: Colors.white,),
          )

Answer 3

更新：OutlinedButton（而不是已弃用的 OutlineButton）

OutlinedButton(
    onPressed: () {},
    style: ButtonStyle(
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(100),
        side: BorderSide(color: Colors.green),
      )),
    ),
    child: Icon(Icons.print, color: Colors.green),
  )

原始回复：

我认为最简单的方法是使用OutlineButton：

OutlineButton(
  onPressed: () { },
  shape: CircleBorder(),
  borderSide: BorderSide(color: Colors.green),
  child: Icon(Icons.print, color: Colors.green),
)