flutter 在下拉按钮输入框下显示错误文本

fv2wmkja  于 2023-02-13  发布在  Flutter
关注(0)|答案(2)|浏览(131)

我是Flutter的新手,我正在创建一个包含TextFormfield和DropdownButtonFormField的表单。我尝试将DropdownButtonFormField(站点裁剪)的错误消息显示在文本框**下方,就像站点名称字段显示其错误消息一样。我应该继续使用DropdownButtonFormField还是有更好的方法可以做到这一点?FormSample

下拉列表代码

child: DropdownButtonHideUnderline(
        child: DropdownButtonFormField(
          decoration: InputDecoration(
            errorBorder: InputBorder.none,
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
            ),
          ),
          hint: Text(
            'Choose Country',
            style: TextStyle(
              fontSize: 16,
              color: NewSite.black.withOpacity(0.6),
            ),
          ),
          validator: (value) => value == null
              ? 'Please fill in' : null,
          value: _selectedLocation,
          onChanged: (newValue) {
            setState(() {
              _selectedLocation = newValue;
            });
          },
          items: _locations.map((location) {
            return DropdownMenuItem(
              child: new Text(location),
              value: location,
            );
          }).toList(),
          icon: Icon(Icons.arrow_drop_down, color: ColorTheme.main,),
          style: TextStyle(color: NewSite.black),
          isExpanded: true,
          elevation: 26,
          dropdownColor: NewSite.white,

        ),
      ),
pgx2nnw8

pgx2nnw81#

尝试FormWidget,将此文件 Package 在Form内,
像这样

import 'package:flutter/material.dart';

class DemoDropDownCreate extends StatefulWidget {
  @override
  _DemoDropDownCreate createState() =>
      _DemoDropDownCreate();
}

class _DemoDropDownCreate
    extends State<DemoDropDownCreate> {
  final _formKey = GlobalKey<FormState>();
  bool _autovalidate = false;
  String selectedCountry;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        autovalidate: _autovalidate,
        child:
        Column(
          children: <Widget>[
            DropdownButtonFormField<String>(
              value: selectedCountry,
              hint: Text(
                'Select Country',
              ),
              onChanged: (salutation) =>
                  setState(() => selectedCountry = salutation),
              validator: (value) =>  value.isEmpty ? 'field required' : null,
              items:
              ['India', 'Japan'].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
            FlatButton(
              child: Text('PROCEED'),
              color: Colors.green,
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  //form is valid, proceed further
                  _formKey.currentState.save();//save once fields are valid, onSaved method invoked for every form fields
                  print("success");
                } else {
                  setState(() {
                    _autovalidate = true; //enable realtime validation
                  });
                  print("Please select all field");

                }
              },
            )
          ],
        ),
      ),
    );
  }
}
2vuwiymt

2vuwiymt2#

您确实可以为DropdownButtonFormField使用验证器

DropdownButtonFormField(
    validator: (dynamic value) => value.isEmpty ? "An error happened or please pick something" : null,
    decoration: InputDecoration(....

您可以将value.isEmpty更改为您想要的任何条件,与"An error happened"消息相同。

相关问题