如何验证Flutter中的下拉菜单

时间:2018-10-22 09:40:46

标签: flutter

我是扑扑开发的新手。我正在尝试通过下拉菜单验证表单,但无法进行。 我点击此链接进行下拉验证。 https://github.com/flutter/flutter/issues/6422#issuecomment-262337023

该下拉列表正在自动验证。

4 个答案:

答案 0 :(得分:24)

尝试使用 DropdownButtonFormField 包装在 Form

例如:

Function myBarcode()
MsgBox ean13("123456789012")
End Function

答案 1 :(得分:0)

您最有可能应该使用StatefulWidget及其setState方法。

示例:

var _formKey = GlobalKey<FormState>();
  String _dropdownError;
  String _selectedItem;

  _validateForm() {
    bool _isValid = _formKey.currentState.validate();

    if (_selectedItem == null) {
      setState(() => _dropdownError = "Please select an option!");
      _isValid = false;
    }

    if (_isValid) {
      //form is valid
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
        key: _formKey,
        child: ListView(children: <Widget>[
          TextFormField(validator: (val) {
            if (val.isEmpty) return "This field is required";
            return null;
          }
            //other textformfield properties
          ),
          DropdownButtonHideUnderline(
            child: DropdownButton<String>(
              value: _selectedItem,
              isExpanded: true,
              hint: Text("Select option", maxLines: 1),
              items: ["Option 1", "Option 2", "Option 3"].map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: new Text(
                    value ?? "",
                    textAlign: TextAlign.left,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                    softWrap: true,
                  ),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  _selectedItem = value;
                  _dropdownError = null;
                });
              },
            ),
          ),
          _dropdownError == null
              ? SizedBox.shrink()
              : Text(
            _dropdownError ?? "",
            style: TextStyle(color: Colors.red),
          ),
          RaisedButton(
            onPressed: () => _validateForm(),
            child: Text("Submit"),
          ),
        ]));
  }

答案 2 :(得分:0)

只需将此下拉列表添加到您的代码中,然后将flutter_form_builder导入到您的代码即可。

   List<String> _type = <String>[
        'License/Registered',
        'UN-Registered',
      ]



    FormBuilder(
          autovalidate: true,
          child: FormBuilderCustomField(
              attribute: "Identification type",
              validators: [FormBuilderValidators.required()],
              formField: FormField(
                builder: (FormFieldState<dynamic> field) {
                  return InputDecorator(
                    decoration: InputDecoration(
                      prefixIcon: Icon(Icons.location_on),
                      labelText: 'Select Personal Identification type',
                      errorText: field.errorText,
                    ),
                    isEmpty: type == '',
                    child: new DropdownButtonHideUnderline(
                      child: new DropdownButton(
                        value: type,
                        isDense: true,
                        onChanged: (String newValue) {
                          setState(() {
                            type = newValue;
                            _dropDownValue = newValue;
                            field.didChange(newValue);
                          });
                        },
                        items: _type.map(
                          (String value) {
                            return new DropdownMenuItem(
                              value: value,
                              child: new Text(value),
                            );
                          },
                        ).toList(),
                      ),
                    ),
                  );
                },
              )),
        );

答案 3 :(得分:0)

validator: (value) {
if (value == null) {
    return 'Relationship is required';
}
},

尝试一下,这是我的工作方式,必须注意两点:1)没有返回null和2)代替:if(value.isEmpty)使用:if(value == null)