Home > Software engineering >  How do I make the borders of a textbox circular using flutter?
How do I make the borders of a textbox circular using flutter?

Time:05-20

I am making an email textfield and would love for the edges of the textbox to be circular. I have no clue on how to go about it. Any help will be beneficial.

CodePudding user response:

If you use Flutter Form Builder package, you can define it in decoration -> border -> OutlineInputBorder -> borderRadius. You can play with different options. Example with borderRadius 20 below:

       FormBuilderTextField(
          name: 'email',
          decoration: InputDecoration(
            border: const OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(20)),
            ),
          ),
        ),

CodePudding user response:

It is more like you need to use OutlineInputBorder().

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(24)  
      ),
    focusedBorder: OutlineInputBorder(), // or just OutlineInputBorder()
  ),
),
  • Related