CODEWITHSUNDEEP
flutter
Will
Will

Reputation: 275

Remove border from Flutter TextField

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

enter image description here

Upvotes: 10

Views: 14560

Answers (4)

Will
Will

Reputation: 275

Had to modify border to this:

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

To maintain BorderRadius.circular and also dump the outline.

Upvotes: 12

Ali
Ali

Reputation: 153

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

Upvotes: 4

Ethan Thai
Ethan Thai

Reputation: 236

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

Upvotes: 13

Adhitya Bagasmiwa Permana
Adhitya Bagasmiwa Permana

Reputation: 89

Just change border : InputBorder.none

Upvotes: 4

Related Questions