如何在 Flutter 中将文字放在一个圆圈中

Question

I want to display a numerical text in a circle. I tried the following, but it looks fuzzy

Container(child: Text(len),
decoration: BoxDecoration(
  shape: BoxShape.circle,
  border: Border.all(width: 2)))

This is how it looks. BTW it's number 2 in a circle.

Answer 1

If you want add spacing between the border and the Edge of the border, you can either add a Padding with EdgeInsets or reduce the fontSize of the Text

Visit the Flutter Docs for more information and an example.

Answer 2

Answer is somewhat obvious. Add this property to container padding: EdgeInsets.all(5)

Answer 3

Container(
width:40.0,
height:40.0,
child: Center(child:Text(len)),
decoration: BoxDecoration(
  shape: BoxShape.circle,
  border: Border.all(width: 2))),

Answer 4

CircleAvatar(
  radius: 20,
  child: Text('$value'),
),