flutter 中带有圆形背景的文本小部件

Question

如何在

Text

小部件中获得这种类型的圆形背景？

Answer 1

您可以通过以下方式实现它

      CircleAvatar(
          backgroundColor: Colors.grey,
          child: Center(
            child: Text(
              "B",
              style: TextStyle(color: Colors.black),
            ),
          ),
        )

Answer 2

截图：

---

您还可以使用

ClipOval

ClipOval(
  child: Container(
    color: Colors.grey,
    padding: EdgeInsets.symmetric(horizontal: 30),
    child: Text(
      "B",
      style: TextStyle(color: Colors.black, fontSize: 90),
    ),
  ),
)

Answer 3

您可以使用BoxDecoration：

Container(
  width: 30,
  height: 30,
  alignment: Alignment.center,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15),
  ),
  child: const Text('B'),
);

Answer 4

只需使用 FAB：

 floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.grey,
    child: Text(
      "A",
      style: TextStyle(
        fontSize: 20,
        fontStyle: FontStyle.italic,
      ),
    ),
  )