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,),
            )

我不需要在图像中显示的圆形边框中进行削减，而是需要完整的圆形边框，我还尝试了这段代码 =>This Answer

- Atul Chaudhary

---

发布你的代码然后。 - pskink

@pskink 对不起没有发布代码，但我已经编辑了问题并提供了更多信息。 - Atul Chaudhary

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,
                  ),
                )),

如果您想要使整个小部件可点击，那么可以像这样使用它。

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,
                  ),
                )),
          ),

- Atul Chaudhary

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,),
          )

- Filip P.

---

这是一个更好的答案。 - Gene

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),
)

- Valentin

---

这是正确的。现在它已被弃用，推荐使用 OutlinedButton。 - Anoop Thiruonam

Answer 4

你也可以选择使用FloatingActionButton。

- Bensal