Remove border from Flutter TextField

Question

I'm trying to remove the border outline from this TextField in flutter, but can't seem to figure the semantic way to do it.

                        decoration: InputDecoration(
                        labelStyle: const TextStyle(color: Colors.black),
                        contentPadding: const EdgeInsets.only(left: 25),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(40.0),
                        ),

Any help is greatly appreciated. Completely blanking on this.

*edit need to keep BorderRadius.cicrular active

**edit edit looking to remove the black line around this TextInput

Ethan Thai · Accepted Answer · 2021-10-11 02:04:55Z

16

You can remove border outline TextField

Here some example may help you:

 TextFormField(
        decoration: new InputDecoration(
            border: InputBorder.none,
            focusedBorder: InputBorder.none,
            enabledBorder: InputBorder.none,
            errorBorder: InputBorder.none,
            disabledBorder: InputBorder.none,),


TextField(
    decoration: new InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        hintText: "Hint here"),)

answered Oct 11, 2021 at 2:04

Ethan Thai

2662 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tatsuya Fujisaki · Accepted Answer · 2024-08-19 20:33:00Z

13

Had to modify border to this:

border: OutlineInputBorder(
  borderRadius: BorderRadius.circular(10),
  borderSide: BorderSide.none,
),

To maintain BorderRadius.circular and also dump the outline.

edited Aug 19, 2024 at 20:33

Tatsuya Fujisaki

2,09120 silver badges27 bronze badges

answered Oct 11, 2021 at 4:46

Will

3151 gold badge2 silver badges10 bronze badges

1 Comment

Umberto Fontanazza Over a year ago

borderSide: BorderSide.none does the job but it's shorter and more readable

Ali · Accepted Answer · 2022-01-06 12:19:20Z

5

In your textfield, do the following:

 TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(
            borderSide: BorderSide.none,
            borderRadius: BorderRadius.circular(17)
         ),
      ),
    );
  }

this will keep your textfield circular, and will remove the borders

edited Jan 6, 2022 at 12:19

answered Jan 5, 2022 at 20:15

Ali

1612 silver badges13 bronze badges

1 Comment

Jeremy Caney Over a year ago

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach?

Adhitya Bagasmiwa Permana · Accepted Answer · 2021-10-11 01:57:09Z

4

Just change border : InputBorder.none

answered Oct 11, 2021 at 1:57

Adhitya Bagasmiwa Permana

873 bronze badges

5 Comments

Will Over a year ago

woops should add, need to keep the BorderRadius.circular active

Adhitya Bagasmiwa Permana Over a year ago

can you show the design, please? i am just confused about your question

Will Over a year ago

no probs. just uploaded an image to the original post to help explain what i'm trying to get rid of.

Adhitya Bagasmiwa Permana Over a year ago

inside OutlineInputBorder, try add this borderSide: BorderSide(color: Colors.transparent)

Will Over a year ago

No luck with this. BorderSide doesn't appear to style any part of the border.

Collectives™ on Stack Overflow

Remove border from Flutter TextField

4 Answers 4

Comments

1 Comment

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related