build method

  1. @override
Widget build(
  1. BuildContext context
)
override

Describes the part of the user interface represented by this widget.

The framework calls this method in a number of different situations. For example:

This method can potentially be called in every frame and should not have any side effects beyond building a widget.

The framework replaces the subtree below this widget with the widget returned by this method, either by updating the existing subtree or by removing the subtree and inflating a new subtree, depending on whether the widget returned by this method can update the root of the existing subtree, as determined by calling Widget.canUpdate.

Typically implementations return a newly created constellation of widgets that are configured with information from this widget's constructor, the given BuildContext, and the internal state of this State object.

The given BuildContext contains information about the location in the tree at which this widget is being built. For example, the context provides the set of inherited widgets for this location in the tree. The BuildContext argument is always the same as the context property of this State object and will remain the same for the lifetime of this object. The BuildContext argument is provided redundantly here so that this method matches the signature for a WidgetBuilder.

Design discussion

Why is the build method on State, and not StatefulWidget?

Putting a Widget build(BuildContext context) method on State rather than putting a Widget build(BuildContext context, State state) method on StatefulWidget gives developers more flexibility when subclassing StatefulWidget.

For example, AnimatedWidget is a subclass of StatefulWidget that introduces an abstract Widget build(BuildContext context) method for its subclasses to implement. If StatefulWidget already had a build method that took a State argument, AnimatedWidget would be forced to provide its State object to subclasses even though its State object is an internal implementation detail of AnimatedWidget.

Conceptually, StatelessWidget could also be implemented as a subclass of StatefulWidget in a similar manner. If the build method were on StatefulWidget rather than State, that would not be possible anymore.

Putting the build function on State rather than StatefulWidget also helps avoid a category of bugs related to closures implicitly capturing this. If you defined a closure in a build function on a StatefulWidget, that closure would implicitly capture this, which is the current widget instance, and would have the (immutable) fields of that instance in scope:

// (this is not valid Flutter code)
class MyButton extends StatefulWidgetX {
  MyButton({super.key, required this.color});

  final Color color;

  @override
  Widget build(BuildContext context, State state) {
    return SpecialWidget(
      handler: () { print('color: $color'); },
    );
  }
}

For example, suppose the parent builds MyButton with color being blue, the $color in the print function refers to blue, as expected. Now, suppose the parent rebuilds MyButton with green. The closure created by the first build still implicitly refers to the original widget and the $color still prints blue even through the widget has been updated to green; should that closure outlive its widget, it would print outdated information.

In contrast, with the build function on the State object, closures created during build implicitly capture the State instance instead of the widget instance:

class MyButton extends StatefulWidget {
  const MyButton({super.key, this.color = Colors.teal});

  final Color color;
  // ...
}

class MyButtonState extends State<MyButton> {
  // ...
  @override
  Widget build(BuildContext context) {
    return SpecialWidget(
      handler: () { print('color: ${widget.color}'); },
    );
  }
}

Now when the parent rebuilds MyButton with green, the closure created by the first build still refers to State object, which is preserved across rebuilds, but the framework has updated that State object's widget property to refer to the new MyButton instance and ${widget.color} prints green, as expected.

See also:

  • StatefulWidget, which contains the discussion on performance considerations.

Implementation

@override
Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width;
  final String selectedLanguage =
      context.read<VerificationBloc>().state.language;

  return BlocBuilder<VerificationBloc, VerificationState>(
    builder: (context, state) {
      return SafeArea(
        child: Scaffold(
          backgroundColor: primaryBackgroundColor,
          appBar: AppBar(
            backgroundColor: primaryBackgroundColor,
            foregroundColor: black,
            shadowColor: white,
            elevation: 0,
          ),
          body: Padding(
            padding: const EdgeInsets.all(25),
            child: ListView(
              scrollDirection: Axis.vertical,
              children: <Widget>[
                Text(
                  titleText[selectedLanguage]!,
                  style: const TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.w600,
                    color: textBlue,
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      children: <Widget>[
                        Container(
                          margin: const EdgeInsets.only(left: 25),
                          width: 28,
                          height: 28,
                          decoration: const BoxDecoration(
                            color: progressBarColor,
                            shape: BoxShape.circle,
                          ),
                          child: const Icon(
                            Icons.check,
                            color: white,
                          ),
                        ),
                        Container(
                          decoration: const BoxDecoration(
                            color: progressBarColor,
                          ),
                          width: 103,
                          height: 2,
                        ),
                        Container(
                          width: 28,
                          height: 28,
                          decoration: const BoxDecoration(
                            color: progressBarColor,
                            shape: BoxShape.circle,
                          ),
                          child: const Icon(
                            Icons.check,
                            color: white,
                          ),
                        ),
                        Container(
                          color: progressBarColor,
                          width: 83,
                          height: 2,
                        ),
                        Container(
                            width: 28,
                            height: 28,
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: progressBarColor,
                                width: 2.0,
                              ),
                              shape: BoxShape.circle,
                              color: progressBarColor,
                            ),
                            child: const Center(
                              child: Text(
                                '3',
                                style: TextStyle(
                                  color: white,
                                  fontSize: 19,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            )),
                      ],
                    ),
                    Row(
                      children: <Widget>[
                        Container(
                            margin: const EdgeInsets.only(
                              top: 5,
                            ),
                            width: 86,
                            child: Center(
                              child: Text(
                                stepOneText[selectedLanguage]!,
                                textAlign: TextAlign.center,
                                style: const TextStyle(
                                  color: black,
                                  fontSize: 16,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            )),
                        Container(
                            margin: const EdgeInsets.only(left: 62),
                            child: Center(
                              child: Text(
                                stepTwoText[selectedLanguage]!,
                                style: const TextStyle(
                                  color: Color(0xFF232323),
                                  fontSize: 16,
                                ),
                              ),
                            )),
                        Container(
                            margin: const EdgeInsets.only(
                              left: 60,
                            ),
                            child: Center(
                              child: Text(
                                stepThreeText[selectedLanguage]!,
                                textAlign: TextAlign.center,
                                style: const TextStyle(
                                  color: black,
                                  fontSize: 16,
                                ),
                              ),
                            )),
                      ],
                    ),
                  ],
                ),
                const SizedBox(
                  height: 20,
                ),
                Form(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  key: _formKey,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(emailLableText[selectedLanguage]!),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: emailController,
                        style: const TextStyle(fontSize: 15),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return emptyEmailErrorText[selectedLanguage]!;
                          } else if (formValidator
                              .emailValidator(value.toString())) {
                            return null;
                          }

                          return invalidEmailerrorText[selectedLanguage]!;
                        },
                        decoration: InputDecoration(
                          border: const OutlineInputBorder(),
                          hintText: emailLableText[selectedLanguage]!,
                          errorStyle: const TextStyle(fontSize: 11),
                        ),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(firstNameLableText[selectedLanguage]!),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: firstnameController,
                        style: const TextStyle(fontSize: 15),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return emptyFirstNameErrorText[selectedLanguage]!;
                          } else if (formValidator.nameValidator(value)) {
                            return null;
                          }

                          return invalidFirstNameErrorText[selectedLanguage]!;
                        },
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            hintText: firstNameLableText[selectedLanguage]!,
                            errorStyle: const TextStyle(fontSize: 11)),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(middleNameLableText[selectedLanguage]!),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: middlenameController,
                        style: const TextStyle(fontSize: 15),
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            hintText: middleNameLableText[selectedLanguage]!,
                            errorMaxLines: 2,
                            errorStyle: const TextStyle(fontSize: 11)),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return null;
                          } else if (formValidator.nameValidator(value)) {
                            return null;
                          }

                          return invalidMiddleNameErrorText[
                              selectedLanguage]!;
                        },
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(lastNameLableText[selectedLanguage]!),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: lastnameController,
                        style: const TextStyle(fontSize: 15),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return emptyLastNameErrorText[selectedLanguage]!;
                          } else if (formValidator.nameValidator(value)) {
                            return null;
                          }
                          return invalidLastNameErrorText[selectedLanguage]!;
                        },
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            hintText: lastNameLableText[selectedLanguage]!,
                            errorStyle: const TextStyle(fontSize: 11)),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(
                            identificationCodeLableText[selectedLanguage]!),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: idNumberController,
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return emptyIdentificationCodeErrorText[
                                selectedLanguage]!;
                          }
                          return null;
                        },
                        style: const TextStyle(fontSize: 15),
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            hintText: identificationCodeLableText[
                                selectedLanguage]!,
                            errorStyle: const TextStyle(fontSize: 11)),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(phoneNumberLableText[selectedLanguage]!),
                      ),
                      IntlPhoneField(
                        decoration: InputDecoration(
                          border: const OutlineInputBorder(),
                          hintText: phoneNumberLableText[selectedLanguage]!,
                          errorStyle: const TextStyle(fontSize: 11),
                        ),
                        initialCountryCode: 'JP',
                        invalidNumberMessage:
                            invalidPhoneNumberErrorText[selectedLanguage]!,
                        languageCode: "en",
                        onChanged: (phone) {
                          setState(() {
                            phoneNumber = phone.completeNumber;
                          });
                        },
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(dobLableText[selectedLanguage]!),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            flex: 2,
                            child: Container(
                              margin: const EdgeInsets.only(right: 5),
                              child: TextFormField(
                                autocorrect: false,
                                controller: dobYearController,
                                style: const TextStyle(fontSize: 15),
                                validator: (value) {
                                  try {
                                    int.parse(value.toString());
                                    if (value == null || value.isEmpty) {
                                      return invalidYearErrorText[
                                          selectedLanguage]!;
                                    } else {
                                      if (formValidator.dobYearValidator(
                                          int.parse(value))) {
                                        return null;
                                      }
                                    }

                                    return invalidYearErrorText[
                                        selectedLanguage]!;
                                  } catch (e) {
                                    return invalidYearErrorText[
                                        selectedLanguage]!;
                                  }
                                },
                                decoration: InputDecoration(
                                    border: const OutlineInputBorder(),
                                    hintText:
                                        yearPlaceHolder[selectedLanguage]!,
                                    errorMaxLines: 2,
                                    errorStyle:
                                        const TextStyle(fontSize: 11)),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: Container(
                              margin: const EdgeInsets.only(right: 5),
                              child: TextFormField(
                                autocorrect: false,
                                controller: dobMonthController,
                                style: const TextStyle(fontSize: 15),
                                validator: (value) {
                                  try {
                                    int.parse(value.toString());
                                    if (value == null || value.isEmpty) {
                                      return invalidMonthErrorText[
                                          selectedLanguage]!;
                                    } else {
                                      if (formValidator.monthValidator(
                                          int.parse(value.toString()))) {
                                        return null;
                                      }
                                    }

                                    return invalidMonthErrorText[
                                        selectedLanguage]!;
                                  } catch (e) {
                                    return invalidMonthErrorText[
                                        selectedLanguage]!;
                                  }
                                },
                                decoration: InputDecoration(
                                  border: const OutlineInputBorder(),
                                  hintText:
                                      monthPlaceHolder[selectedLanguage]!,
                                  errorMaxLines: 2,
                                  errorStyle: const TextStyle(fontSize: 11),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: TextFormField(
                              autocorrect: false,
                              controller: dobDayController,
                              style: const TextStyle(fontSize: 15),
                              validator: (value) {
                                try {
                                  int.parse(value.toString());
                                  if (value == null || value.isEmpty) {
                                    return invalidDayErrorText[
                                        selectedLanguage]!;
                                  } else {
                                    if (formValidator.dayValidator(
                                        int.parse(value.toString()))) {
                                      return null;
                                    }
                                  }

                                  return invalidDayErrorText[
                                      selectedLanguage]!;
                                } catch (e) {
                                  return invalidDayErrorText[
                                      selectedLanguage]!;
                                }
                              },
                              decoration: InputDecoration(
                                border: const OutlineInputBorder(),
                                hintText: dayPlaceHolder[selectedLanguage]!,
                                errorMaxLines: 2,
                                errorStyle: const TextStyle(fontSize: 11),
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(
                            "${addressLableText[selectedLanguage]!} (日本語)"),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: addressJaController,
                        style: const TextStyle(fontSize: 15),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return emptyAddressErrorText[selectedLanguage]!;
                          }
                          return null;
                        },
                        onChanged: (value) {
                          setAddressJa(value);
                        },
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            hintText: addressLableText[selectedLanguage]!,
                            errorStyle: const TextStyle(fontSize: 11)),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(
                            "${address1LableText[selectedLanguage]!} (日本語)"),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: address1JaController,
                        style: const TextStyle(fontSize: 15),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return emptyAddress1ErrorText[selectedLanguage]!;
                          }
                          return null;
                        },
                        onChanged: (value) {
                          setAddress1Ja(value);
                        },
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            hintText: address1Placeholder[selectedLanguage]!,
                            errorStyle: const TextStyle(fontSize: 11)),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(
                            "${address2LableText[selectedLanguage]!} (日本語)"),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: address2JaController,
                        style: const TextStyle(fontSize: 15),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return emptyAddress2ErrorText[selectedLanguage]!;
                          }
                          return null;
                        },
                        onChanged: (value) {
                          setAddress2Ja(value);
                        },
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            hintText: address2Placeholder[selectedLanguage]!,
                            errorStyle: const TextStyle(fontSize: 11)),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(
                            "${address3LableText[selectedLanguage]!} (日本語)"),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: address3JaController,
                        style: const TextStyle(fontSize: 15),
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return emptyAddress3ErrorText[selectedLanguage]!;
                          }
                          return null;
                        },
                        onChanged: (value) {
                          setAddress3Ja(value);
                        },
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            hintText: address3Placeholder[selectedLanguage]!,
                            errorStyle: const TextStyle(fontSize: 11)),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(addressLableText[selectedLanguage]!),
                      ),
                      Container(
                        height: 55,
                        width: double.infinity,
                        padding: const EdgeInsets.symmetric(
                            vertical: 18, horizontal: 10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          border: Border.all(
                            color: lineColor,
                          ),
                          color: white,
                        ),
                        child: Text(addressEnController.toString()),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(address1LableText[selectedLanguage]!),
                      ),
                      Container(
                        height: 55,
                        width: double.infinity,
                        padding: const EdgeInsets.symmetric(
                            vertical: 18, horizontal: 10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          border: Border.all(
                            color: lineColor,
                          ),
                          color: white,
                        ),
                        child: Text(address1EnController.toString()),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(address2LableText[selectedLanguage]!),
                      ),
                      Container(
                        height: 55,
                        width: double.infinity,
                        padding: const EdgeInsets.symmetric(
                            vertical: 18, horizontal: 10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          border: Border.all(
                            color: lineColor,
                          ),
                          color: white,
                        ),
                        child: Text(address2EnController.toString()),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(address3LableText[selectedLanguage]!),
                      ),
                      Container(
                        height: 55,
                        width: double.infinity,
                        padding: const EdgeInsets.symmetric(
                            vertical: 18, horizontal: 10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          border: Border.all(
                            color: lineColor,
                          ),
                          color: white,
                        ),
                        child: Text(address3EnController.toString()),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(postalCodeText[selectedLanguage]!),
                      ),
                      TextFormField(
                        autocorrect: false,
                        controller: postalCodeController,
                        style: const TextStyle(fontSize: 15),
                        validator: (value) {
                          try {
                            int.parse(value.toString());
                            if (value == null || value.isEmpty) {
                              return emptyPostalcodeErrorText[
                                  selectedLanguage]!;
                            }
                            return null;
                          } catch (e) {
                            return invalidPostalcodeErrorText[
                                selectedLanguage]!;
                          }
                        },
                        decoration: InputDecoration(
                            border: const OutlineInputBorder(),
                            hintText: postalCodeText[selectedLanguage]!,
                            errorStyle: const TextStyle(fontSize: 11)),
                      ),
                      const SizedBox(
                        height: 15,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(expiredDateLableText[selectedLanguage]!),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            flex: 2,
                            child: Container(
                              margin: const EdgeInsets.only(right: 5),
                              child: TextFormField(
                                autocorrect: false,
                                controller: expiryYearController,
                                validator: (value) {
                                  try {
                                    if (value == null || value.isEmpty) {
                                      return null;
                                    } else {
                                      if (formValidator.expiryYearValidator(
                                          int.parse(value.toString()))) {
                                        return null;
                                      }
                                    }

                                    return invalidYearErrorText[
                                        selectedLanguage]!;
                                  } catch (e) {
                                    return invalidYearErrorText[
                                        selectedLanguage]!;
                                  }
                                },
                                style: const TextStyle(fontSize: 15),
                                decoration: InputDecoration(
                                  border: const OutlineInputBorder(),
                                  hintText:
                                      yearPlaceHolder[selectedLanguage]!,
                                  errorMaxLines: 2,
                                  errorStyle: const TextStyle(fontSize: 11),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: Container(
                              margin: const EdgeInsets.only(right: 5),
                              child: TextFormField(
                                autocorrect: false,
                                controller: expiryMonthController,
                                validator: (value) {
                                  try {
                                    if (value == null || value.isEmpty) {
                                      return null;
                                    } else {
                                      if (formValidator.monthValidator(
                                          int.parse(value.toString()))) {
                                        return null;
                                      }
                                    }

                                    return invalidMonthErrorText[
                                        selectedLanguage]!;
                                  } catch (e) {
                                    return invalidMonthErrorText[
                                        selectedLanguage]!;
                                  }
                                },
                                style: const TextStyle(fontSize: 15),
                                decoration: InputDecoration(
                                  border: const OutlineInputBorder(),
                                  hintText:
                                      monthPlaceHolder[selectedLanguage]!,
                                  errorMaxLines: 2,
                                  errorStyle: const TextStyle(fontSize: 11),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: TextFormField(
                              autocorrect: false,
                              controller: expiryDayController,
                              validator: (value) {
                                try {
                                  if (value == null || value.isEmpty) {
                                    return null;
                                  } else {
                                    if (formValidator.dayValidator(
                                        int.parse(value.toString()))) {
                                      return null;
                                    }
                                  }

                                  return invalidDayErrorText[
                                      selectedLanguage]!;
                                } catch (e) {
                                  return invalidDayErrorText[
                                      selectedLanguage]!;
                                }
                              },
                              style: const TextStyle(fontSize: 15),
                              decoration: InputDecoration(
                                border: const OutlineInputBorder(),
                                hintText: dayPlaceHolder[selectedLanguage]!,
                                errorMaxLines: 2,
                                errorStyle: const TextStyle(fontSize: 11),
                              ),
                            ),
                          ),
                        ],
                      ),
                      state.documentType == DocumentTypes.driverLicense.value
                          ? Container()
                          : Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const SizedBox(
                                  height: 15,
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(8),
                                  child: Text(
                                      genderLableText[selectedLanguage]!),
                                ),
                                DropdownWidget(
                                  values: genders[selectedLanguage]!,
                                  placeholder: changeGenderLanguage(
                                    gender,
                                    selectedLanguage,
                                  ),
                                  getSelected: setGender,
                                ),
                              ],
                            ),
                      state.nationality == Nationality.indonesian.value
                          ? Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(8),
                                  child: Text(
                                      visaStatusLabelText[selectedLanguage]!),
                                ),
                                DropdownWidget(
                                  values: visaStatusValues,
                                  placeholder: visaStatus,
                                  getSelected: setVisaStatus,
                                ),
                                const SizedBox(
                                  height: 15,
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(8),
                                  child: Text(
                                      ptlDateLabelText[selectedLanguage]!),
                                ),
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Expanded(
                                      flex: 2,
                                      child: Container(
                                        margin:
                                            const EdgeInsets.only(right: 5),
                                        child: TextFormField(
                                          autocorrect: false,
                                          controller: ptlYearController,
                                          style:
                                              const TextStyle(fontSize: 15),
                                          validator: (value) {
                                            try {
                                              int.parse(value.toString());
                                              if (value == null ||
                                                  value.isEmpty) {
                                                return invalidYearErrorText[
                                                    selectedLanguage]!;
                                              } else {
                                                if (formValidator
                                                    .dobYearValidator(
                                                        int.parse(value))) {
                                                  return null;
                                                }
                                              }

                                              return invalidYearErrorText[
                                                  selectedLanguage]!;
                                            } catch (e) {
                                              return invalidYearErrorText[
                                                  selectedLanguage]!;
                                            }
                                          },
                                          decoration: InputDecoration(
                                              border:
                                                  const OutlineInputBorder(),
                                              hintText: yearPlaceHolder[
                                                  selectedLanguage]!,
                                              errorMaxLines: 2,
                                              errorStyle: const TextStyle(
                                                  fontSize: 11)),
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      flex: 2,
                                      child: Container(
                                        margin:
                                            const EdgeInsets.only(right: 5),
                                        child: TextFormField(
                                          autocorrect: false,
                                          controller: ptlMonthController,
                                          style:
                                              const TextStyle(fontSize: 15),
                                          validator: (value) {
                                            try {
                                              int.parse(value.toString());
                                              if (value == null ||
                                                  value.isEmpty) {
                                                return invalidMonthErrorText[
                                                    selectedLanguage]!;
                                              } else {
                                                if (formValidator
                                                    .monthValidator(int.parse(
                                                        value.toString()))) {
                                                  return null;
                                                }
                                              }

                                              return invalidMonthErrorText[
                                                  selectedLanguage]!;
                                            } catch (e) {
                                              return invalidMonthErrorText[
                                                  selectedLanguage]!;
                                            }
                                          },
                                          decoration: InputDecoration(
                                            border:
                                                const OutlineInputBorder(),
                                            hintText: monthPlaceHolder[
                                                selectedLanguage]!,
                                            errorMaxLines: 2,
                                            errorStyle:
                                                const TextStyle(fontSize: 11),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      flex: 2,
                                      child: TextFormField(
                                        autocorrect: false,
                                        controller: ptlDayController,
                                        style: const TextStyle(fontSize: 15),
                                        validator: (value) {
                                          try {
                                            int.parse(value.toString());
                                            if (value == null ||
                                                value.isEmpty) {
                                              return invalidDayErrorText[
                                                  selectedLanguage]!;
                                            } else {
                                              if (formValidator.dayValidator(
                                                  int.parse(
                                                      value.toString()))) {
                                                return null;
                                              }
                                            }

                                            return invalidDayErrorText[
                                                selectedLanguage]!;
                                          } catch (e) {
                                            return invalidDayErrorText[
                                                selectedLanguage]!;
                                          }
                                        },
                                        decoration: InputDecoration(
                                          border: const OutlineInputBorder(),
                                          hintText: dayPlaceHolder[
                                              selectedLanguage]!,
                                          errorMaxLines: 2,
                                          errorStyle:
                                              const TextStyle(fontSize: 11),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                const SizedBox(
                                  height: 15,
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(8),
                                  child: Text(
                                      ptsDateLabelText[selectedLanguage]!),
                                ),
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Expanded(
                                      flex: 2,
                                      child: Container(
                                        margin:
                                            const EdgeInsets.only(right: 5),
                                        child: TextFormField(
                                          autocorrect: false,
                                          controller: ptsYearController,
                                          validator: (value) {
                                            try {
                                              if (value == null ||
                                                  value.isEmpty) {
                                                return null;
                                              } else {
                                                if (formValidator
                                                    .expiryYearValidator(
                                                        int.parse(value
                                                            .toString()))) {
                                                  return null;
                                                }
                                              }

                                              return invalidYearErrorText[
                                                  selectedLanguage]!;
                                            } catch (e) {
                                              return invalidYearErrorText[
                                                  selectedLanguage]!;
                                            }
                                          },
                                          style:
                                              const TextStyle(fontSize: 15),
                                          decoration: InputDecoration(
                                              border:
                                                  const OutlineInputBorder(),
                                              hintText: yearPlaceHolder[
                                                  selectedLanguage]!,
                                              errorMaxLines: 2,
                                              errorStyle: const TextStyle(
                                                  fontSize: 11)),
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      flex: 2,
                                      child: Container(
                                        margin:
                                            const EdgeInsets.only(right: 5),
                                        child: TextFormField(
                                          autocorrect: false,
                                          controller: ptsMonthController,
                                          validator: (value) {
                                            try {
                                              if (value == null ||
                                                  value.isEmpty) {
                                                return null;
                                              } else {
                                                if (formValidator
                                                    .monthValidator(int.parse(
                                                        value.toString()))) {
                                                  return null;
                                                }
                                              }

                                              return invalidMonthErrorText[
                                                  selectedLanguage]!;
                                            } catch (e) {
                                              return invalidMonthErrorText[
                                                  selectedLanguage]!;
                                            }
                                          },
                                          style:
                                              const TextStyle(fontSize: 15),
                                          decoration: InputDecoration(
                                            border:
                                                const OutlineInputBorder(),
                                            hintText: monthPlaceHolder[
                                                selectedLanguage]!,
                                            errorMaxLines: 2,
                                            errorStyle:
                                                const TextStyle(fontSize: 11),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Expanded(
                                      flex: 2,
                                      child: TextFormField(
                                        autocorrect: false,
                                        controller: ptsDayController,
                                        validator: (value) {
                                          try {
                                            if (value == null ||
                                                value.isEmpty) {
                                              return null;
                                            } else {
                                              if (formValidator.dayValidator(
                                                  int.parse(
                                                      value.toString()))) {
                                                return null;
                                              }
                                            }

                                            return invalidDayErrorText[
                                                selectedLanguage]!;
                                          } catch (e) {
                                            return invalidDayErrorText[
                                                selectedLanguage]!;
                                          }
                                        },
                                        style: const TextStyle(fontSize: 15),
                                        decoration: InputDecoration(
                                          border: const OutlineInputBorder(),
                                          hintText: dayPlaceHolder[
                                              selectedLanguage]!,
                                          errorMaxLines: 2,
                                          errorStyle:
                                              const TextStyle(fontSize: 11),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            )
                          : Container(),
                    ],
                  ),
                ),
                Container(
                  height: 50,
                  padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
                ),
                Column(
                  children: <Widget>[
                    Text(
                      confirmationMessageText[selectedLanguage]!,
                      style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                      ),
                      textAlign: TextAlign.center,
                    ),
                    const SizedBox(
                      height: 25,
                    ),
                    Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          gradient: LinearGradient(
                            colors: _formKey.currentState != null &&
                                    _formKey.currentState!.validate()
                                ? const [
                                    Color(0xFF1CA7EC),
                                    Color(0xFF4ADEDE),
                                  ]
                                : [disabledColor, disabledColor],
                          )),
                      width: width / 1.2,
                      padding: const EdgeInsets.all(7),
                      child: TextButton(
                        onPressed: () {
                          if (state.documentType ==
                              DocumentTypes.driverLicense.value) {
                            if (gender == '') {
                              return;
                            }
                          }
                          if (state.nationality ==
                              Nationality.indonesian.value) {
                            if (visaStatus == "") {
                              return;
                            }
                          }
                          if (_formKey.currentState!.validate() &&
                              phoneNumber != null) {
                            Navigator.of(context).push(MaterialPageRoute(
                              builder: (routeContext) => ConfirmationPage(
                                email: emailController.text,
                                firstName: firstnameController.text,
                                middleName: middlenameController.text,
                                lastName: lastnameController.text,
                                phoneNumber: phoneNumber,
                                dobDay: dobDayController.text,
                                dobMonth: dobMonthController.text,
                                dobYear: dobYearController.text,
                                addressJa: address1JaController.text,
                                addressEn: addressEnController,
                                address1Ja: address1JaController.text,
                                address2Ja: address2JaController.text,
                                address3Ja: address3JaController.text,
                                address1En: address1EnController,
                                address2En: address2EnController,
                                address3En: address3EnController,
                                idNumber: idNumberController.text,
                                expiryDay: expiryDayController.text,
                                expiryMonth: expiryMonthController.text,
                                expiryYear: expiryYearController.text,
                                ptlDay: ptlDayController.text,
                                ptlMonth: ptlMonthController.text,
                                ptlYear: ptlYearController.text,
                                ptsDay: ptsDayController.text,
                                ptsMonth: ptsMonthController.text,
                                ptsYear: ptsYearController.text,
                                visaStatus: visaStatus,
                                gender: gender,
                                postalCode: postalCodeController.text,
                              ),
                            ));
                          }
                        },
                        child: Text(
                          buttonOneText[selectedLanguage]!,
                          style: const TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                              color: white),
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          border: Border.all(color: textBlue)),
                      width: width / 1.2,
                      padding: const EdgeInsets.all(7),
                      child: TextButton(
                        onPressed: () {
                          Navigator.of(context).popUntil(
                            (route) => route.isFirst,
                          );
                        },
                        child: Text(
                          buttonTwoText[selectedLanguage]!,
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w500,
                            color: black,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    },
  );
}