Flutter中OTPTextField组件边框颜色修改无效求助

你遇到的问题是因为没配置otpFieldStyle参数——OTPTextField组件的边框样式需要通过这个专属参数定义，默认样式会覆盖自定义设置。

直接修改代码，添加otpFieldStyle配置项即可：

OTPTextField(
  length: 5,
  keyboardType: TextInputType.number,
  width: MediaQuery.of(context).size.width,
  fieldWidth: 30,
  style: TextStyle(fontSize: 17, color: gettcolor(context)),
  textFieldAlignment: MainAxisAlignment.spaceAround,
  fieldStyle: FieldStyle.box,
  // 配置输入框边框样式
  otpFieldStyle: OTPFieldStyle(
    borderColor: Colors.red, // 输入框未聚焦时的边框颜色
    focusBorderColor: Colors.blue, // 输入框获得焦点时的边框颜色
    // 可选：按需添加其他状态的边框颜色
    // enabledBorderColor: Colors.grey,
    // disabledBorderColor: Colors.grey.shade300,
  ),
  onCompleted: (pin) {
    otp = pin;
  },
),

关键参数说明： #

• borderColor: 控制输入框未获得焦点时的边框颜色
• focusBorderColor: 控制输入框获得焦点时的边框颜色
• enabledBorderColor: 可选，控制输入框启用状态下的边框颜色
• disabledBorderColor: 可选，控制输入框禁用状态下的边框颜色

你可以把示例中的颜色值替换成gettcolor(context)或者其他自定义颜色，确保样式符合需求。

内容的提问来源于stack exchange，提问作者Abdullah zain Haider