如何在顫動中驗證下拉欄位

我對顫動非常陌生，并且一直在嘗試遵循有關如何驗證我的欄位的在線教程，但它們似乎都不起作用。我正在嘗試驗證我的下拉欄位是否是必需的。任何幫助將不勝感激。

final _dropDownKey = GlobalKey<FormBuilderFieldState>();

Widget _buildKeystageField() {
return FutureBuilder<List<dynamic>>(
    future: placementService.fetchKeystages(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return FormBuilderDropdown<String>(
          key: _dropDownKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          name: 'keystage',
          allowClear: true,
          validator: (String? value) {
            if (value != null && value.isEmpty) {
              return "Keystage cannot be empty";
            }
            return null;
          },
          hint: const Text('Please Select Keystage'),
          icon: const Icon(Icons.arrow_drop_down),
          decoration: InputDecoration(
            labelText: 'Keystage',
            suffix: _keystageHasError
                ? const Icon(Icons.error)
                : const Icon(Icons.check),
          ),
          items: snapshot.data!.map<DropdownMenuItem<String>>((item) {
            return DropdownMenuItem<String>(
              alignment: AlignmentDirectional.center,
              value: item['id'].toString(),
              child: Text(item['age_group']),
            );
          }).toList(),
          onChanged: (value) {
            setState(() {
              _keystageValue = value!;
              print(value);
            });
          },
        );
      } else {
        const Text('Loading...');
        const CircularProgressIndicator();
      }
      return Center(
          child: Column(
        children: const [
          Text('Loading...'),
          CircularProgressIndicator(),
        ],
      ));
    });

}

作業代碼。改編自提供的答案。更改了我創建下拉選單的方式，現在似乎一切正常。編碼 ：

final _dropDownKey = GlobalKey<FormBuilderFieldState>();

Widget _buildKeystageField() {
return FutureBuilder<List<dynamic>>(
    future: placementService.fetchKeystages(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return DropdownButtonFormField(
          key: _dropDownKey,
          autovalidateMode: AutovalidateMode.always,
          hint: const Text('Please Select Keystage'),
          icon: const Icon(Icons.arrow_drop_down),
          decoration: InputDecoration(
            labelText: 'Keystage',
            suffix: _keystageHasError
                ? const Icon(Icons.error)
                : const Icon(Icons.check),
          ),
          items: snapshot.data!.map<DropdownMenuItem<String>>((item) {
            return DropdownMenuItem<String>(
              alignment: AlignmentDirectional.center,
              value: item['id'].toString(),
              child: Text(item['age_group']),
            );
          }).toList(),
          onChanged: (String? value) {
            setState(() {
              _keystageValue = value!;
              print(value);
            });
          },
          validator: (String? value) {
            return value == null ? "Choose item from list" : null;
          },
        );
      } else {
        const Text('Loading...');
        const CircularProgressIndicator();
      }
      return Center(
          child: Column(
        children: const [
          Text('Loading...'),
          CircularProgressIndicator(),
        ],
      ));
    });

}

uj5u.com熱心網友回復：

它是驗證下拉串列的最小代碼。（不使用任何 3rd 方包。）

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  List<String> list = <String>[
    "heads",
    "tails",
  ];

  String? dropDownValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              DropdownButtonFormField<String>(
                autovalidateMode: AutovalidateMode.always,
                value: dropDownValue,
                items: list.map(
                  (String label) {
                    return DropdownMenuItem<String>(
                      value: label,
                      child: Text(
                        label,
                      ),
                    );
                  },
                ).toList(),
                hint: const Text("Choose"),
                onChanged: (String? value) {
                  dropDownValue = value;
                  setState(() {});
                },
                validator: (String? value) {
                  return value == null ? "Choose item from list" : null;
                },
              ),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState?.validate() ?? false) {
                    // validation passed
                  } else {
                    // validation failed
                  }
                },
                child: const Text("Submit"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

標籤：安卓扑镖验证落下

上一篇：我怎么能用容器制作不完整的顏色

下一篇：FlutterScrollPhysics在鍵盤上更改/或其他想法？