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),
),
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
} },