当用户没有在 DropdownMenuItem 上选择项目时如何显示错误消息？答案

【问题标题】：how to display a error message when the user didn't choose an item on DropdownMenuItem?当用户没有在 DropdownMenuItem 上选择项目时如何显示错误消息？
【发布时间】：2021-04-14 12:40:09
【问题描述】：

我尝试从我的 Flutter 应用程序中收集 Firestore 中的数据。使用以下代码：我的问题是当用户没有在 DropdownMenuItem 上选择项目时如何显示错误消息？

 body: Form(
          key: _formKeyValue,
          child: ListView(
            padding: EdgeInsets.symmetric(horizontal: 12.0),
            children: <Widget>[
              SizedBox(height: 20.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  DropdownButton(
                    items: _specialite
                        .map((value) => DropdownMenuItem(
                              child: Text(
                                value,
                                textAlign: TextAlign.center,
                                style: TextStyle(color: Colors.black),
                              ),
                              value: value,
                            ))
                        .toList(),
                    onChanged: (selectedAccountType) {
                      print('$selectedAccountType');
                      setState(() {
                        medicalType = selectedAccountType;
                      });
                    },
                    value: medicalType,
                    isExpanded: false,
                    hint: Text(
                      'choisissez la spécialité',
                      style: TextStyle(color: Colors.black),
                    ),
                  )
                ],
              ),
             
              ....
              ....

我使用了这个答案https://stackoverflow.com/a/59746301/15400156，但屏幕上没有显示任何内容。

【问题讨论】：

标签： android firebase flutter dart

【解决方案1】：

您可以将第一个菜单项称为“Select xxx”，这也是默认项（索引0），然后您可以在用户点击“提交”按钮时检查索引。

【讨论】：

【解决方案2】：

您可以通过不同的方式实现此目的。从DropDownButton 中删除value 属性并使用String medicalType; 初始化medicalType。然后按下提交按钮，检查medicalType 是否为空。以下是完整代码。

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<String> _specialite = ["abc", "def", 'ghi'];
  String medicalType;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Form(
//           key: _formKeyValue,
      child: ListView(
          padding: EdgeInsets.symmetric(horizontal: 12.0),
          children: <Widget>[
            SizedBox(height: 20.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                DropdownButton(
                  items: _specialite
                      .map((value) => DropdownMenuItem(
                            child: Text(
                              value,
                              textAlign: TextAlign.center,
                              style: TextStyle(color: Colors.white),
                            ),
                            value: value,
                          ))
                      .toList(),
                  onChanged: (String selectedAccountType) {
                    print('$selectedAccountType');
                    setState(() {
                      medicalType = selectedAccountType;
                    });
                  },
//                     value: medicalType,
                  isExpanded: false,
                  hint: Text(
                    'choisissez la spécialité',
                    style: TextStyle(color: Colors.black),
                  ),
                )
              ],
            ),
            ElevatedButton(
                onPressed: () {
                  if (medicalType == null) {
                    ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text("please choose medical type")));
                  }
                },
                child: Text("submit"))
          ]),
    ));
  }
}

【讨论】：