skip to Main Content

I want to change this screen’s below text in black

enter image description here

and secondly when I type digit the below text shows that Entered PIN does not match. instead it shows me after when i complete typed mis-match PIN if i type correct PIN then this Text Pin must be at least 4 digits. It must not.... should show in black color.

enter image description here

Here is my full code

class _SetPinTestscreenState extends State<SetPinTestscreen> {
  TextEditingController setPinController = TextEditingController();
  

  @override
  void initState() {
    Provider.of<PinValidationProvider>(context, listen: false).isPinSet = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MainTemplate(
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Align(
              alignment: Alignment.centerLeft,
              child: Consumer<PinValidationProvider>(
                builder: (context, pinProvider, child) {
                  return Text(
                    pinProvider.isPinSet
                        ? 'Re-enter your PIN code to Confirm'
                        : 'Set PIN to Activate your Ending With XXXX',
                    style: TextStyle(fontWeight: FontWeight.w700, fontSize: 30),
                  );
                },
              ),
            ),
            SizedBox(height: 20),
            Center(
              child: PinFieldAutoFill(
                decoration: UnderlineDecoration(
                  textStyle: Theme.of(context).textTheme.subtitle1.copyWith(
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                      ),
                  gapSpace: 8,
                  lineHeight: 1.2,
                  colorBuilder:
                      PinListenColorBuilder(Colors.black, Colors.grey.shade400),
                ),
                onCodeChanged: (value) {
                  Provider.of<PinValidationProvider>(context, listen: false)
                      .validatePin(value, setPinController);
                },
                codeLength: 4,
                cursor: Cursor(color: Colors.black, enabled: true),
                controller: setPinController,
                keyboardType: TextInputType.number,
              ),
            ),
            SizedBox(height: 20),
            Consumer<PinValidationProvider>(
              builder: (context, provider, child) {
                final textColor =
                    provider.isInvalidPin || !provider.isPinMatched
                        ? Colors.red
                        : Colors.black;

                if (!provider.isPinMatched &&
                    provider.isPinSet &&
                    setPinController.text.isNotEmpty) {
                  return Text(
                    'Entered PIN does not match.',
                    style: TextStyle(
                      color: Colors.red,
                    ),
                  );
                } else {
                  
                  return Text(
                    'Pin must be at least 4 digits. It must not be single digits like'
                    ' 1111 or digits in numerical order such as 1234',
                    style: TextStyle(
                      color: textColor,
                    ),
                  );
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

Here is my PinValidationProvider class:

class PinValidationProvider extends ChangeNotifier {
  bool _isInvalidPin = false;

  bool get isInvalidPin => _isInvalidPin;
  bool get isPinMatched => confirmedPin == pin;
  bool isPinSet = false;
  String pin = '';
  String confirmedPin = '';

  void validatePin(String pin, TextEditingController controller) {
    if (pin.length != 4) {
      _isInvalidPin = false;
    } else {
      if (_isSimpleSequence(pin) || _isRepeatedDigit(pin)) {
        _isInvalidPin = true;
      } else {
        _isInvalidPin = false;
        if (!isPinSet) {
          isPinSet = true;
          this.pin = pin;
        } else {
          confirmedPin = pin;
        }
      }
      if (confirmedPin != this.pin) {
        controller.clear();
      }
    }
    Future.microtask(() {
      notifyListeners();
    });
  }

  bool _isSimpleSequence(String pin) {
    for (int i = 0; i < pin.length - 1; i++) {
      int digit1 = int.parse(pin[i]);
      int digit2 = int.parse(pin[i + 1]);

      if (digit2 - digit1 == 1) {
        return true;
      }
    }
    return false;
  }

  bool _isRepeatedDigit(String pin) {
    for (int i = 0; i < pin.length - 1; i++) {
      if (pin[i] == pin[i + 1]) {
        return true;
      }
    }
    return false;
  }
}

2

Answers


  1. 1st

    • as i am able to understand that you want to change color of Text("Pin must be at least 4 digits. It must not be single…..") then you have to set it from Text style attribut, ex-

                   Text('Pin must be at least 4 digits. It must not be single digits like'
                   ' 1111 or digits in numerical order such as 1234',
                   style: TextStyle(
                     color: Colors.black, // i have changed here 
                   ),
                 );
      

    2nd-

    class _SetPinTestScreenState extends State<SetPinTestscreen> {
      TextEditingController setPinController = TextEditingController();
    
      @override
      void initState() {
        Provider.of<PinValidationProvider>(context, listen: false).isPinSet = false;
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return MainTemplate(
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Align(
                  alignment: Alignment.centerLeft,
                  child: Consumer<PinValidationProvider>(
                    builder: (context, pinProvider, child) {
                      return Text(
                        pinProvider.isPinSet
                            ? 'Re-enter your PIN code to Confirm'
                            : 'Set PIN to Activate your Finance House Card Ending With XXXX',
                        style: TextStyle(fontWeight: FontWeight.w700, fontSize: 30),
                      );
                    },
                  ),
                ),
                SizedBox(height: 20),
                Center(
                  child: PinFieldAutoFill(
                    decoration: UnderlineDecoration(
                      textStyle: Theme.of(context).textTheme.subtitle1.copyWith(
                            fontWeight: FontWeight.bold,
                            fontSize: 15,
                          ),
                      gapSpace: 8,
                      lineHeight: 1.2,
                      colorBuilder:
                          PinListenColorBuilder(Colors.black, Colors.grey.shade400),
                    ),
                    onCodeChanged: (value) {
                      Provider.of<PinValidationProvider>(context, listen: false)
                          .validatePin(value, setPinController);
                    },
                    onCodeSubmitted: (value) {
                      Provider.of<PinValidationProvider>(context, listen: false)
                          .validateCompletedPin(value, setPinController);
                    },
                    codeLength: 4,
                    cursor: Cursor(color: Colors.black, enabled: true),
                    controller: setPinController,
                    keyboardType: TextInputType.number,
                  ),
                ),
                SizedBox(height: 20),
                Consumer<PinValidationProvider>(
                  builder: (context, provider, child) {
                    if (!provider.isPinMatched && setPinController.text.isNotEmpty) {
                      return Text(
                        'Entered PIN does not match.',
                        style: TextStyle(
                          color: Colors.red,
                        ),
                      );
                    } else if (!provider.isPinSet && setPinController.text.isNotEmpty) {
                      return Text(
                        'Pin must be at least 4 digits. It must not be single digits like'
                        ' 1111 or digits in numerical order such as 1234',
                        style: TextStyle(
                          color: Colors.black,
                        ),
                      );
                    } else {
                      return SizedBox(); // Return an empty widget when no error is applicable
                    }
                  },
                ),
              ],
            ),
          ),
        );
      }
    }
    
    Login or Signup to reply.
  2. First:

    if you want to change the color of "Pin must be at least 4 digits…" text. change to color property Colors.black instead textColor.

     return Text(
            'Pin must be at least 4 digits. It must not be single digits like'
            ' 1111 or digits in numerical order such as 1234',
            style: TextStyle(
                  color: Colors.black,
        ),
    );
    

    secondly: To achieve

    shows me after when i complete typed mis-match PIN if i type correct
    PIN

    You need add and extra validator to if block, to control user type at least 4 digits.

    if (!provider.isPinMatched &&
                        provider.isPinSet &&
                        setPinController.text.isNotEmpty && 
            //probably this is your solution
            setPinController.text.length< 4) {
                      return Text(
                        'Entered PIN does not match.',
                        style: TextStyle(
                          color: Colors.red,
                        ),
                      );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search