import 'package:flutter/material.dart'; import 'package:healthcare_pharmacy/dashboard.dart'; import 'package:healthcare_pharmacy/login.dart'; import 'package:healthcare_pharmacy/settings.dart'; class OtpScreen extends StatefulWidget { var myObject; OtpScreen({this.myObject}); @override State createState() => _OtpScreenState(); } class _OtpScreenState extends State { final TextEditingController _fieldOne = TextEditingController(); final TextEditingController _fieldTwo = TextEditingController(); final TextEditingController _fieldThree = TextEditingController(); final TextEditingController _fieldFour = TextEditingController(); final TextEditingController _fieldFive = TextEditingController(); final TextEditingController _fieldSix = TextEditingController(); TextEditingController mobileNumberController = TextEditingController(); TextEditingController passwordController = TextEditingController(); bool isTextfieldVisible=true; bool isOtpVisible=false; bool isObscureText=true; // This is the entered code // It will be displayed in a Text widget String? _otp; @override Widget build(BuildContext context) { return Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text('Phone Number Verification'), Visibility( visible: false, child: Container( padding: const EdgeInsets.all(10), child: TextFormField( cursorColor: greyColor, controller: mobileNumberController, keyboardType: TextInputType.number, decoration: const InputDecoration( prefixIcon: Icon( Icons.phone, color: greyColor, ), border: OutlineInputBorder( borderSide: BorderSide(color: greyColor)), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color:greyColor), ), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: greyColor), ), labelText: 'Enter MobileNumber', labelStyle: TextStyle( color: greyColor, //<-- SEE HERE ), ), ), ),), const SizedBox( height: 30, ), Visibility( visible: false, child: Container( width: MediaQuery.of(context).size.width * .99, height: 50, child: ElevatedButton( style: ElevatedButton.styleFrom( primary: primaryColor, // background onPrimary: Colors.white, // foreground ), onPressed: ()async { }, child: const Text('Submit')), ),), // Implement 4 input fields Visibility( visible:true, child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ OtpInput(_fieldOne, true), // auto focus OtpInput(_fieldTwo, false), OtpInput(_fieldThree, false), OtpInput(_fieldFour, false), OtpInput(_fieldFive, false), OtpInput(_fieldSix, false), ], ),), const SizedBox( height: 30, ), Visibility( visible: false, child: Container( padding: const EdgeInsets.fromLTRB(10, 10, 10, 0), child: TextFormField( cursorColor: greyColor, obscureText: isObscureText, controller: passwordController, decoration: InputDecoration( labelText: 'Password', prefixIcon: const Icon(Icons.password, color: greyColor,), labelStyle: const TextStyle( color: greyColor, //<-- SEE HERE ), border: const OutlineInputBorder( borderSide: BorderSide(color: greyColor)), focusedBorder: const OutlineInputBorder( borderSide: BorderSide(color: greyColor), ), enabledBorder: const OutlineInputBorder( borderSide: BorderSide(color: textFieldStartColor), ), suffixIcon: IconButton( icon: Icon( Icons.visibility_off_outlined, color: isObscureText==true?greyColor:primaryColor, ), onPressed: () { print("show password"); setState(() { isObscureText = !isObscureText; }); }, ), ), ), ),), const SizedBox( height: 30, ), Visibility( visible: true, child: Container( width: MediaQuery.of(context).size.width * .99, height: 50, child: ElevatedButton( style: ElevatedButton.styleFrom( primary: primaryColor, // background onPrimary: Colors.white, // foreground ), onPressed: ()async { setState(() { _otp = _fieldOne.text + _fieldTwo.text + _fieldThree.text + _fieldFour.text+ _fieldFive.text + _fieldSix.text; }); if (_otp!.length == 6) { AppSettings.preLoaderDialog(context); bool isOnline = await AppSettings.internetConnectivity(); if(isOnline){ var payload = new Map(); payload["phoneVerificationCode"] = _otp.toString(); payload["phone"] = widget.myObject.toString(); bool phoneVerified = await AppSettings.phoneVerification(payload); if(phoneVerified){ Navigator.of(context,rootNavigator: true).pop(); Navigator.push( context, MaterialPageRoute( builder: (context) => const Login()), ); } else{ Navigator.of(context,rootNavigator: true).pop(); } } else{ Navigator.of(context,rootNavigator: true).pop(); } } else{ } }, child: const Text('Submit')), ) ) ], ), ); } } // Create an input widget that takes only one digit class OtpInput extends StatelessWidget { final TextEditingController controller; final bool autoFocus; const OtpInput(this.controller, this.autoFocus, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return SizedBox( height: 60, width: 50, child: TextField( autofocus: autoFocus, textAlign: TextAlign.center, keyboardType: TextInputType.number, controller: controller, maxLength: 1, cursorColor: Theme.of(context).primaryColor, decoration: const InputDecoration( border: OutlineInputBorder(), counterText: '', hintStyle: TextStyle(color: Colors.black, fontSize: 20.0)), onChanged: (value) { if (value.length == 1) { FocusScope.of(context).nextFocus(); } }, ), ); } }