有没有办法使用 PinCodeTextField 插件更改 OTP 字段的轮廓边框颜色

Question

我是 Flutter 新手。我正在使用 PinCodeTextField https://pub.dev/packages/pin_code_fields 插件来创建 OTP 文本字段 我希望文本字段具有不同的颜色，但我找不到装饰属性来更改颜色。

Answer 1

花了几个小时寻找同样的问题，终于找到了解决方法。

1. 通过find搜索文件‘otp_field_style.dart’。
2. 打开文件，您将看到以下内容：

导入'包：flutter/material.dart';

import 'package:<myApp’s Constants>/constants/constants.dart';

class OtpFieldStyle {
      /// The background color for outlined box.
    
      final Color backgroundColor;
    
      /// The border color text field.
    
      final Color borderColor;
    
      /// The border color of text field when in focus.
    
      final Color focusBorderColor;
    
      /// The border color of text field when disabled.
    
      final Color disabledBorderColor;
    
      /// The border color of text field when in focus.
    
      final Color enabledBorderColor;
    
      /// The border color of text field when disabled.
    
      final Color errorBorderColor;
    
      OtpFieldStyle(
          {this.backgroundColor: kFillShade7,
          this.borderColor: kOrange4,
          this.focusBorderColor: kOrange1,
          this.disabledBorderColor: kFillShade4,
          this.enabledBorderColor: kFillShade2,
          this.errorBorderColor: Colors.red});
    }

3. 现在，您可以通过给出硬值来更改颜色， 或

4. 导入你的constants.dart文件（通常在其中定义常量，包括颜色等）并通过它链接颜色，例如，

   导入'包：/constants/constants.dart'；

是我的内容文件，我在上面的代码中链接了我的kColors，

只需将其更改为常量 dart 文件的适当链接即可。 5. 保存并关闭‘otp_field_style.dart’。 您可以通过定义的常量更改颜色，我希望它有帮助！

Answer 2

您可以使用此属性来更改颜色

pinTheme: PinTheme(
          shape: PinCodeFieldShape.box,
          borderRadius: BorderRadius.circular(5),
          fieldHeight: 50,
          fieldWidth: 40,
          activeFillColor: Colors.black,
         inactiveColor: Colors.deepOrange,
         
            inactiveFillColor: Colors.green,
            selectedFillColor: Colors.deepPurple,
            selectedColor: Colors.greenAccent,
            activeColor: Colors.blue
            

        ),

Answer 3

PinTheme(
      activeFillColor: Colors.white,
      selectedFillColor: Colors.white,
      inactiveFillColor: Colors.white,
      inactiveColor: borderColor,
      activeColor: borderColor,
      selectedColor: borderColor
    }

使用像这样的 pin 主题。