borderRadius is not true in PinCodeTextField

Question

I create an pin code text field like below, but when i try using shape: PinCodeFieldShape.circle, my console throw me

'package:flutter/src/painting/box_decoration.dart': Failed assertion: line 130 pos 12: 'shape != BoxShape.circle ||
          borderRadius == null': is not true.

have anybody any idea how to solve this problem?

my code:

  Widget _pinCode(){
    return PinCodeTextField(
      length: 4,
      // obsecureText: false,
      // animationType: AnimationType.fade,
      shape: PinCodeFieldShape.circle,
      // animationDuration: Duration(milliseconds: 300),
      borderRadius: BorderRadius.horizontal(),
      fieldHeight: 50,
      fieldWidth: 40,
      activeColor: Colors.red,
      mainAxisAlignment: MainAxisAlignment.center,
      onChanged: (value){
        print(value);
      },
    );
  }

second question: how to set padding/margin between every pin code text field?

thanks for any ansewers :)

Answer 1

I was having a similar issue. I fixed it by the removing the borderRadius property. The shape property does not work well with borderRadius.

Widget _pinCode(){
    return PinCodeTextField(
         length: 4,
         // obsecureText: false,
         // animationType: AnimationType.fade,
         shape: PinCodeFieldShape.circle,
         // animationDuration: Duration(milliseconds: 300),
         //borderRadius: BorderRadius.horizontal(),
         fieldHeight: 50,
         fieldWidth: 40,
         activeColor: Colors.red,
         mainAxisAlignment: MainAxisAlignment.center,
         onChanged: (value){
           print(value);
         },
    );   
}

Answer 2

Thanks for using my package. The reason it doesn't work because circle shape already has it's own radius so you don't need to provide an extra border-radius.

Answer 3

a simple way to solve this is to use a conditional statement

borderRadius: isCircle == true ? null : BorderRadius.all(...)

so if it is a circle borderRadius will be set to null;

with this condition, the shape can be added, but make sure if it is circle, the borderRadius must be set to null