flutter

How to validate TypeAheadField inside a form


I'm using the package flutter_typeahead 5.2.0

I have some form Field such zip Code and I can validate them with the validator option, but I don't understand how to do the same thing with TypeAheadField to not be bull or empty for example, there is no a validation option in this package.

    final GlobalKey<FormState> _apartmentFormKey = GlobalKey();
    // ...
    @override
    Widget build(BuildContext context) {
    return Form(
      key: _apartmentFormKey,
      child: Column(
        children: [
          TypeAheadField<dynamic>(
            suggestionsCallback: (search) => AddressApi().getCities(search),
            builder: (context, controller, focusNode) {
              return TextField(
                controller: controller,
                focusNode: focusNode,
                autofocus: true,
                decoration: InputDecoration(border: OutlineInputBorder(), labelText: 'Addresse'),
              );
            },
            itemBuilder: (context, city) {
              return ListTile(title: Text(city!['label']), subtitle: Text(city!['postcode']));
            },
            controller: _addressController,
            onSelected: (city) {},
          ),

          SizedBox(height: 15),
          TextFormField(
            onSaved: (value) {
              setState(() {
                _zipCode = value!;
              });
            },
            validator: (value) {
              if (value == null || value.isEmpty) {
                return "veuillez entrer un code postal";
              }
              return null;
            },
            decoration: InputDecoration(labelText: 'Code postal', border: OutlineInputBorder()),
            keyboardType: TextInputType.number,
            controller: _zipCodeController,
          ),
          SizedBox(height: 15),

          SizedBox(
            width: double.infinity,
            height: 49,
            child: ElevatedButton(
              onPressed: () async {
                if (_apartmentFormKey.currentState?.validate() ?? false) {
                  _apartmentFormKey.currentState?.save();

                  // ....
                }
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Color(0xFF3B62FF),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              ),
              child: Text(
                'Enregistrer',
                style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ],
      ),
    );
  }

Solution

  • You can customize the TextField used by the TypeAheadField, see documentation.

    The linked part of the package documentation also says that you can use a TextFormField as well. And you can add your validation logic to the TextFormField, see here.