Show validation at PinCodeTextField-CodePudding

I'm working on OTP screen. I'm using pin_code_fields. Now I want to validate it like if textfields are empty when user click on button then a another_flushbar should shown with message that your fileds are still empty. I've already implemented another_flushbar now I just want to show it in OTP screen. How can I do it. Thanks.

My pin_code_fields

TextEditingController textEditingController = TextEditingController();
 PinCodeTextField(
                      appContext: context,
                      keyboardType: TextInputType.number,
                      length: 4,
                      animationType: AnimationType.none,
                      cursorColor: Colors.black,
                      controller: textEditingController,
                      onChanged: (value) {},
                      pinTheme: PinTheme(
                        shape: PinCodeFieldShape.box,
                        selectedColor: Colors.white,
                        borderRadius: BorderRadius.circular(Dimensions.radius10),
                        fieldHeight: Dimensions.height50,
                        fieldWidth: Dimensions.width50,
                        inactiveColor: Colors.white,
                        activeColor: Colors.white,
                      ),
                      onCompleted: (value) {
                        print("Completed");
                      },
                    ),

My another_flushbar

class Utils{
static void flushBarErrorMessage(String message, BuildContext context) {
    showFlushbar(
        context: context,
        flushbar: Flushbar(
          forwardAnimationCurve: Curves.decelerate,
          margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          padding: const EdgeInsets.all(15),
          titleColor: Colors.white,
          duration: const Duration(seconds: 3),
          borderRadius: BorderRadius.circular(10),
          reverseAnimationCurve: Curves.easeInOut,
          icon: const Icon(
            Icons.error,
            size: 28,
            color: Colors.white,
          ),
          flushbarPosition: FlushbarPosition.TOP,
          positionOffset: 20,
          message: message,
          backgroundColor: Colors.red,
        )..show(context));
  }
}

My Button

 ElevatedButton(
                      onPressed: () {
                        // _confirmOtp();
                      },
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.white,
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(Dimensions.radius10)),
                        minimumSize: Size.fromHeight(Dimensions.height40),
                      ),
                      child: BigText(text: LanguageStringKeys.instance.Submit.tr, color: Colors.grey),
                    ),

CodePudding user response：

In your onCompleted: just do the validation using if-else before submitting

//in your button
onPressed: (){
                                                                      
if(textEditingController.value.text.length < 4 || textEditingController.value.text.isEmpty){
  ///your flushbar 
  }else{
    ///confirm OTP
    }                                                                 },