diplomatic-quarter/lib/widgets/otp/sms-popup.dart

import 'package:diplomaticquarterapp/config/size_config.dart';
import 'package:diplomaticquarterapp/widgets/text/app_texts_widget.dart';
import 'package:flutter/material.dart';

class SMSOTP {
  final type;
  final mobileNo;
  final Function onSuccess;
  final Function onFailure;
  final context;
  SMSOTP(
      this.context, this.type, this.mobileNo, this.onSuccess, this.onFailure);

  Map verifyAccountFormValue = {
    'digit1': null,
    'digit2': null,
    'digit3': null,
    'digit4': null,
  };
  final focusD1 = FocusNode();
  final focusD2 = FocusNode();
  final focusD3 = FocusNode();
  final focusD4 = FocusNode();
  displayDialog(BuildContext context) async {
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.close),
                  onPressed: () => {
                    Navigator.pop(context),
                    this.onSuccess(verifyAccountFormValue)
                  },
                )
              ],
            ),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0))),

            content: Builder(builder: (context) {
              return Container(
                color: Colors.white,
                height: SizeConfig.realScreenHeight * 0.5,
                width: SizeConfig.realScreenWidth * 0.8,
                child: Center(
                    child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Image.asset('assets/images/login/103.png'),
                    Padding(
                        padding: EdgeInsets.only(top: 20),
                        child: AppText(
                          'Enter The Varification sent to XXXXXXX144',
                          textAlign: TextAlign.center,
                        )),
                    Padding(
                        padding: EdgeInsets.only(top: 20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          children: <Widget>[
                            Container(
                              width: SizeConfig.realScreenWidth * 0.15,
                              child: TextFormField(
                                textInputAction: TextInputAction.next,
                                style: buildTextStyle(),
                                autofocus: true,
                                maxLength: 1,
                                textAlign: TextAlign.center,
                                keyboardType: TextInputType.number,
                                decoration: buildInputDecoration(context),
                                onSaved: (val) {
                                  verifyAccountFormValue['digit1'] = val;
                                },
                                validator: validateCodeDigit,
                                onFieldSubmitted: (_) {
                                  FocusScope.of(context).requestFocus(focusD2);
                                },
                                onChanged: (val) {
                                  if (val.length == 1) {
                                    FocusScope.of(context)
                                        .requestFocus(focusD2);
                                  }
                                },
                              ),
                            ),
                            Container(
                              width: SizeConfig.realScreenWidth * 0.15,
                              child: TextFormField(
                                  focusNode: focusD2,
                                  textInputAction: TextInputAction.next,
                                  maxLength: 1,
                                  textAlign: TextAlign.center,
                                  style: buildTextStyle(),
                                  keyboardType: TextInputType.number,
                                  decoration: buildInputDecoration(context),
                                  onSaved: (val) {
                                    verifyAccountFormValue['digit2'] = val;
                                  },
                                  onFieldSubmitted: (_) {
                                    FocusScope.of(context)
                                        .requestFocus(focusD3);
                                  },
                                  onChanged: (val) {
                                    if (val.length == 1) {
                                      FocusScope.of(context)
                                          .requestFocus(focusD3);
                                    }
                                  },
                                  validator: validateCodeDigit),
                            ),
                            Container(
                                width: SizeConfig.realScreenWidth * 0.15,
                                child: TextFormField(
                                    focusNode: focusD3,
                                    textInputAction: TextInputAction.next,
                                    maxLength: 1,
                                    textAlign: TextAlign.center,
                                    style: buildTextStyle(),
                                    keyboardType: TextInputType.number,
                                    decoration: buildInputDecoration(context),
                                    onSaved: (val) {
                                      verifyAccountFormValue['digit3'] = val;
                                    },
                                    onFieldSubmitted: (_) {
                                      FocusScope.of(context)
                                          .requestFocus(focusD4);
                                    },
                                    onChanged: (val) {
                                      if (val.length == 1) {
                                        FocusScope.of(context)
                                            .requestFocus(focusD4);
                                      }
                                    },
                                    validator: validateCodeDigit)),
                            Container(
                                width: SizeConfig.realScreenWidth * 0.15,
                                child: TextFormField(
                                    focusNode: focusD4,
                                    maxLength: 1,
                                    textAlign: TextAlign.center,
                                    style: buildTextStyle(),
                                    keyboardType: TextInputType.number,
                                    decoration: buildInputDecoration(context),
                                    onSaved: (val) {
                                      verifyAccountFormValue['digit4'] = val;
                                    },
                                    validator: validateCodeDigit))
                          ],
                        ))
                  ],
                )),
              );
            }),
            // actions: <Widget>[
            //   new FlatButton(
            //     child: new Text('SUBMIT'),
            //     onPressed: () {
            //       Navigator.of(context).pop();
            //     },
            //   )
            // ],
          );
        });
  }

  TextStyle buildTextStyle() {
    return TextStyle(
      fontSize: SizeConfig.textMultiplier * 3,
    );
  }

  InputDecoration buildInputDecoration(BuildContext context) {
    return InputDecoration(
      // ts/images/password_icon.png
      contentPadding: EdgeInsets.only(top: 20, bottom: 20),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        borderSide: BorderSide(color: Colors.black),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(10.0)),
        borderSide: BorderSide(color: Theme.of(context).primaryColor),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(10.0)),
        borderSide: BorderSide(color: Theme.of(context).errorColor),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(10.0)),
        borderSide: BorderSide(color: Theme.of(context).errorColor),
      ),
    );
  }

  String validateCodeDigit(value) {
    if (value.isEmpty) {
      return 'Please enter your Password';
    } else if (value.length == 3) {
      print(value);
    } else {
      return null;
    }
  }
}