Text widget with circular background in flutter

Viewed 3753

enter image description here

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

3 Answers

You can achieve it by

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

Screenshot:

enter image description here


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

Just use a FAB:

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