UI I want to build a form that is used to fill in the departure station and destination station. But I haven't implemented a way to prevent the user from filling in the same value in the 2 fields. And this is my code

Form(
  key: _formKey,
  child: Column(
    children: [
      // Stasiun Keberangkatan Form
      DropdownSearch<String>(
        validator: (value) {
          if (value == null) {
            return 'please input station';
          }
          return null;
        },
        popupProps: const PopupProps.menu(
          showSelectedItems: true,
          showSearchBox: true,
        ),
        items: stationsToStName(),
        dropdownDecoratorProps: DropDownDecoratorProps(
          dropdownSearchDecoration: InputDecoration(
            filled: true,
            fillColor: const Color.fromRGBO(37, 37, 37, 0.1),
            //hintText: "Stasiun keberangkatan",
            hintText: "Departure Station",
            hintStyle:
                const TextStyle(fontFamily: 'Inter', fontSize: 14),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5),
              borderSide: const BorderSide(
                width: 0,
                style: BorderStyle.none,
              ),
            ),
            prefixIcon: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Image(
                height: 33,
                image: AssetImage(
                    'assets/images/icon_departureSt.png'),
              ),
            ),
          ),
        ),
        onChanged: (newvalue) {
          setState(() {
            stKeberangkatan = newvalue!; //updated
          });
        },
      ),
      const SizedBox(height: 11),

      // Destination Form
      DropdownSearch<String>(
        validator: (value) {
          if (value == null) {
            return 'please input station';
          }
          return null;
        },
        popupProps: const PopupProps.menu(
          showSelectedItems: true,
          showSearchBox: true,
        ),
        items: stationsToStName(),
        dropdownDecoratorProps: DropDownDecoratorProps(
          dropdownSearchDecoration: InputDecoration(
            filled: true,
            fillColor: const Color.fromRGBO(37, 37, 37, 0.1),
            //hintText: "Stasiun tujuan",
            hintText: "Destination Station",
            hintStyle:
                const TextStyle(fontFamily: 'Inter', fontSize: 14),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(5),
              borderSide: const BorderSide(
                width: 0,
                style: BorderStyle.none,
              ),
            ),
            hintMaxLines: 2,
            prefixIcon: const Padding(
              padding: EdgeInsets.all(11.0),
              child: Image(
                height: 33,
                image: AssetImage(
                    'assets/images/icon_destinationSt.png'),
              ),
            ),
          ),
        ),
        onChanged: (newvalue) {
          setState(() {
            stTujuan = newvalue!; //updated
          });
        },
      ),
      const SizedBox(height: 35),

      // "Submit" Button
      SizedBox(
        width: size.width,
        height: 48,
        child: ElevatedButton(
            style: ButtonStyle(
                foregroundColor:
                    MaterialStateProperty.all<Color>(Colors.white),
                backgroundColor:
                    MaterialStateProperty.all<Color>(primColor),
                shape: MaterialStateProperty.all<
                        RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(4),
                        side: const BorderSide(color: primColor)))),
            onPressed: () {
              if (_formKey.currentState != null &&
                  _formKey.currentState!.validate()) {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => BestRoute(
                            stKeberangkatan: stKeberangkatan,
                            stTujuan: stTujuan,
                          )),
                );
              }
            },
            child: const Text("Submit",
                style: TextStyle(
                    fontFamily: 'Inter',
                    fontWeight: FontWeight.w700,
                    fontSize: 14))),
      ),
    ],
  ),
),

I want to apply alert or validator if user fill in same value when click submit button

For example, the user fills in station A for departure station and destination station. And I want to avoid that. and I want to apply alert or validator if user fill in same value when click submit button How can I implement that?

CodePudding user response：

You can create two variables, one called departure and the other called destination. Then when the user selects a value from the dropdown, use setState((){}) to put the value in the variables. Finally, when the user clicks on submit button, check if the value of destination and departure are different and only then allow the user to proceed.