Flutter TextField组件border颜色不显示问题排查与解决

我设置了TextField的border为红色，但只能看到enabledBorder（蓝色）和focusedBorder（绿色）的颜色变化，红色边框完全看不到。以下是我的代码：

TextField(
  enabled: true,
  decoration: InputDecoration(
    hintText: "영화 제목을 검색해주세요.",
    helperText: 'helper',
    labelText: 'label',
    counterText: 'counter',
    border: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.red, // Default border color
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.blue, // 테두리를 투명하게 만듭니다.
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.green, // Border color when focused
      ),
    ),
    suffixIcon: IconButton(
      onPressed: () {},
      icon: Icon(Icons.search),
    ),
  ),
),

补充：我已经把AppBar设置为透明且禁用了边框。

原因 #

Flutter里InputDecoration的border是基础样式，但只要你明确指定了enabledBorder、focusedBorder这类状态专属边框，border就会被它们覆盖——只有在没有对应状态边框定义，或者TextField处于特殊状态（比如enabled: false）时，border才会生效。你当前的TextField是启用状态，所以优先用enabledBorder的蓝色，自然看不到border的红色。

解决办法 #

方案1：移除状态专属边框，只保留border #

如果不需要启用/聚焦时的颜色变化，直接删掉enabledBorder和focusedBorder，所有状态都会用border的红色：

TextField(
  enabled: true,
  decoration: InputDecoration(
    hintText: "영화 제목을 검색해주세요.",
    helperText: 'helper',
    labelText: 'label',
    counterText: 'counter',
    border: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.red,
      ),
    ),
    suffixIcon: IconButton(
      onPressed: () {},
      icon: Icon(Icons.search),
    ),
  ),
)

方案2：让border在特定状态下显示 #

比如你想让TextField禁用时显示红色边框，可以单独设置disabledBorder为border的样式：

TextField(
  enabled: true,
  decoration: InputDecoration(
    hintText: "영화 제목을 검색해주세요.",
    helperText: 'helper',
    labelText: 'label',
    counterText: 'counter',
    border: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.red,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.blue,
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.green,
      ),
    ),
    // 禁用状态显示红色边框
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.red,
      ),
    ),
    suffixIcon: IconButton(
      onPressed: () {},
      icon: Icon(Icons.search),
    ),
  ),
)

之后把TextField的enabled设为false，就能看到红色边框了。

另外你设置的AppBar透明无框和这个问题无关，不用调整。

内容的提问来源于stack exchange，提问作者Andrew Kang