Flutter: Outline input border

user_10139611 0
Viewed 144181

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.

dart flutter textfield
3 Answers

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

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

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

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

user_94494260
Related