Display Error Text under Dropdown Button Input Box - flutter

Question

I am new to Flutter and I am creating a form with TextFormfield and DropdownButtonFormField. I am trying to display the error message of the DropdownButtonFormField(Site Crop) to below the text box like how the site name field display its error message.
Should I continue using DropdownButtonFormField or is there a better way to do this?
FormSample
code for dropdown
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,
),
),

Answer 1

Try Form Widget,
Wrap this your filed inside Form,
like this
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");
}
},
)
],
),
),
);
}
}

Answer 2

You can indeed use validators for DropdownButtonFormField
DropdownButtonFormField(
validator: (dynamic value) => value.isEmpty ? "An error happened or please pick something" : null,
decoration: InputDecoration(....
you can change value.isEmpty to any condition you want, same as the "An error happened" message.