Flutter：轮廓输入边框

Question

我试图为我的文本字段构建一个边框，例如：

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

但它总是返回宽度为 1.0 的黑色边框。 我发现更改颜色的唯一方法是创建一个 ThemeData，在其中指定提示颜色，但我找不到更改宽度的方法。

Answer 1

您要寻找的是 -

enabledBorder

的

InputDecoration

财产。

如果您想更改焦点边框，请使用 -

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

Answer 2

对于其他来到这里只想要一个周围有边框的

TextField

的人：

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

Answer 3

您可以通过覆盖顶层的

TextField

来全局更改

TextFormField

或

ThemeData

的轮廓变体：

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

现场演示

Answer 4

我正在使用这个，它对我很有用。

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