Question 78456 in Flutter Question posted in
The official Flutter documentation can be found here.

How to find the radius for a perfect semi-circular edge of a TextField? – Flutter

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

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    The default height of TextField is 48. So you can use borderRadius: BorderRadius.circular(48 / 2),. But there is default padding you need to count, EdgeInsets.fromLTRB(12, 8, 12, 8) or 12 if the dense is true. So the perfect semi-circle can be seen

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

    enter image description here

    You can create custom border by extending the OutlineInputBorder

    Login or Signup to reply.
  3. 0 
    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),
      ),
    ),
  ),
)
    Login or Signup to reply.
  4. 0 
    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(30),
      ),
      focusBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
      ),
      // error with validation data null
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
      ),

      // enable border
      enableBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
      ),
    ),
  ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search