Flutter: Outline input border

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.

152826 次浏览

小开

最佳答案

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

小开

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

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

小开

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

Flutter: Outline input border

Live Demo