I can do the following to have a TextField with rounded edges in Flutter.

TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(30.0),
            ),
          ),
        )

The edges are now rounded, but not sure whether they are perfect semi-circle.

How can I have the edges with perfect semi-circle?

(I guess I have to adjust the radius provided in the code, but how to find the exact radius to provide?)

CodePudding user response：

The

You can create custom border by extending the OutlineInputBorder

CodePudding user response：

To achieve a perfect semicircle, you can follow this method

1. Find the height of the TextField. Default height is 48px (when isDense == false).

2. radius >= height/2. For any radius value greater than half of the TextField height, you will get perfect semicircle edges. So, give any value greater than or equal to 24.

CodePudding user response：

SizedBox(
  width: 48, // just to represent the circle 
  child: TextField(
    decoration: InputDecoration(
      contentPadding: EdgeInsets.zero, // just to represent the circle 
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(48 / 2),
      ),
      focusBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(48 / 2),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(48 / 2),
      ),
      enableBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(48 / 2),
      ),
    ),
  ),
)