Flutter: Outline input border

Question

I was trying to build a border for my text field like:

return TextField(
  ...
 border: OutlineInputBorder(
  borderSide: BorderSide(
   color: Colors.red, 
    width: 5.0),
    )
  )
)

But it always return a black border with 1.0 as width. The only way that I found to change the color was to create a ThemeData where I specify the hint color, but I could not find a way to change my width.

Not exactly answer to your question but just to add border to TextField this works: `TextField(decoration: InputDecoration(border: OutlineInputBorder(borderSide: BorderSide(),),),);` More at: https://api.flutter.dev/flutter/material/OutlineInputBorder-class.html — user3563059, Feb 13 '20 at 07:38

score 223 · Accepted Answer · edited Aug 28 '20 at 14:47

223

What your looking for is - enabledBorder property of InputDecoration.

If you want to Change Border on focus use - focusedBorder

    TextField(
        decoration: new InputDecoration(
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.greenAccent, width: 5.0),
            ),
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.red, width: 5.0),
            ),
            hintText: 'Mobile Number',
        ),
    ),

edited Aug 28 '20 at 14:47

cokeman19

2,405
1
25
40

answered Jan 11 '19 at 09:35

anmol.majhail

48,256
14
136
105

2

I'm not able to find `focusedBorder` property in `InputDecoration` – Ashutosh Sagar Feb 13 '19 at 07:54
@AshutoshSagar what version of flutter you are running.? – anmol.majhail Feb 13 '19 at 07:57
v1.0.0 which is the stable one – Ashutosh Sagar Feb 14 '19 at 05:24
Worked for me. Thanks! – Emzor Mar 25 '20 at 19:52

score 16 · Answer 2 · answered Jul 31 '21 at 04:01

16

For others coming here who just want a TextField with a border all around it:

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
),

answered Jul 31 '21 at 04:01

Suragch

484,302
314
1,365
1,393

score 8 · Answer 3 · answered Aug 28 '21 at 17:54

You can change the outlined variant of TextField or TextFormField globally by overriding the ThemeData at the top level:

return MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: const InputDecorationTheme(border: OutlineInputBorder()),
  ),
)

Live Demo

score 0 · Answer 4 · answered Sep 02 '23 at 05:20

I'm using this one and it is working for me.

InputDecoration(
    focusedBorder: OutlineInputBorder(
      borderRadius:
          BorderRadius.circular(16),
      borderSide: const BorderSide(color: Colors.black, width: 2.5),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius:
          BorderRadius.circular(16),
      borderSide: const BorderSide(color:Colors.black, width: 1.5),
    ),
  )

score 0 · Answer 5 · answered Sep 03 '23 at 05:17

I'm using this one and it is working for me.

child: TextField(
                    decoration: InputDecoration(
                      hintText: "Email Address",
                      hintStyle: TextStyle(color: Colors.grey),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.black, width: 1),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.black, width: 1),
                      ),
                    ),
                  ),

Flutter: Outline input border

5 Answers5

Live Demo

Linked