Create circle around a letter in flutter

user_11584728 0
Viewed 2477

I was trying to create a circle around a letter here is my code, but it was not creating a perfect circle

         Container(
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                border: Border.all(color: Colors.white, width: 2)),
            child: InkWell(
              child: Text(
                "A",
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 15),
              ),
            ),
          ),

enter image description here

I've also tried with height and width of the Container then some portion of letter is hidden.

          Container(
            height: 30,
            width: 30,
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                border: Border.all(color: Colors.white, width: 2)),
            child: InkWell(
              child: Text(
                "A",
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 15),
              ),
            ),
          )

enter image description here

But if I use Icon Widget instead of text widget it was creating perfect circle,

          Container(
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                border: Border.all(color: Colors.white, width: 2)),
            child: InkWell(
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
            ),
          ),

enter image description here

flutter-layout dart flutter
3 Answers

Use this:

 CircleAvatar(
      backgroundColor: Colors.blue,
      child: Text("A"),
  );

You can also make use of the many other flags in CircleAvatar, like maxRadius or foregroundImage, like this:

 CircleAvatar(
      backgroundColor: Colors.blue,
      child: Text("A"),
      maxRadius: 30,
      foregroundImage: NetworkImage("enterImageUrl"),
  );

Looks like this:

enter image description here

user_135580350

For Containers, you can use the shape property to give it a circular shape.

It would be something like this :

Container(
  decoration: BoxDecoration (
     shape: BoxShape.circle,
  ),
child: ....
)
user_138373810

If I face multiple widget I prefer by creating a widget and wrapping others.

Container BoxShape.circle, depends on height


class WrapWithCircle extends StatelessWidget {
  final Widget child;
  late final EdgeInsets edgeInsets;
  late final Color color;
  WrapWithCircle({
    Key? key,
    required this.child,
    this.edgeInsets = const EdgeInsets.all(8),
    this.color = Colors.white,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: edgeInsets,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(
          width: 2,
          color: color,
        ),
      ),
      child: child,
    );
  }
}
user_101571270
Related