Text widget with circular background in flutter

Question

How can I get this type of rounded background in Text widget?

Percival

Answer 1

You can achieve it by

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

Bussey

Answer 2

Screenshot:

---

You can also use ClipOval

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

Nonstriated

Answer 3

You can use BoxDecoration:

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

Chao

Answer 4

Just use a FAB:

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

Percival