This is my dropdownlist for start time. I wanted to validate the dropdownlist under the condition that if the user chooses the end hour less than the start date, it will show an error. What are the steps in implementing that?
Flexible(
child: DropdownButtonFormField(
hint: _selectedStartHour != null
? Text(_selectedStartHour)
: const Text(''),
decoration: const InputDecoration(
labelText: 'Hours',
filled: true,
fillColor: Colors.white,
border:
OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
),
icon: const Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
items: hours.map<DropdownMenuItem>((String value) {
return DropdownMenuItem(value: value, child: Text(value));
}).toList(),
onChanged: (data) {
setState(() {
_selectedStartHour = data;
print(_selectedStartHour);
});
},
validator: (value) => value == null ? 'Please select hours' : null,
)),
This is my dropdownlist for end time.
Flexible(
child: DropdownButtonFormField(
hint:
_selectedEndHour != null ? Text(_selectedEndHour) : const Text(''),
decoration: const InputDecoration(
labelText: 'Hours',
filled: true,
fillColor: Colors.white,
border:
OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
),
icon: const Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
items: hours.map<DropdownMenuItem>((String value) {
return DropdownMenuItem(value: value, child: Text(value));
}).toList(),
onChanged: (data) {
setState(() {
_selectedEndHour = data;
print(_selectedEndHour);
});
},
)),
This is my list to populate my start and end time.
List<String> hours = [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12'
];
My _selectedStartHour and _selectedEndHour is a String
String _selectedStartHour = '2';
String _selectedEndHour = '3';
For the endHour validator, the logic can be