LiewJunTung / pin_code_text_field

A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.
MIT License
376 stars 78 forks source link

Auto Adjust Width missing #39

Open OliverNarramore opened 4 years ago

OliverNarramore commented 4 years ago

I have been using "auto adjust width" but this seems to have disappeared in the latest version. What is the alternative?

pinCodeTextFieldLayoutType: pinCodeTextFieldLayoutType.AUTO_ADJUST_WIDTH,

SergeShkurko commented 4 years ago

hot solution

    final maxLength = 4;
    final pinBoxWidth = 60.0;
    final pinBoxBorderWidth = 2.0;
    final pinBoxOuterPadding = EdgeInsets.symmetric(horizontal: 4.0);
    var width = 0.0;
    for (var i = 0; i < maxLength; i++) {
      width += pinBoxWidth;
      if (i == 0) {
        width += pinBoxOuterPadding.left;
      } else if (i + 1 == maxLength) {
        width += pinBoxOuterPadding.right;
      } else {
        width += pinBoxOuterPadding.left + pinBoxOuterPadding.right;
      }
    }

    final confirmationCodeInput = SizedBox(
      width: width,
      child: PinCodeTextField(
        isCupertino: true,
        autofocus: true,
        maxLength: maxLength,
        pinBoxOuterPadding: pinBoxOuterPadding,
        pinBoxWidth: pinBoxWidth,
        pinBoxHeight: 85,
        pinBoxColor: Colors.grey[100],
        pinBoxRadius: 8,
        defaultBorderColor: Colors.grey[100],
        hasTextBorderColor: Colors.grey[100],
        errorBorderColor: Colors.red[200],
        pinBoxBorderWidth: pinBoxBorderWidth,
      ),
    );