Search for a command to run...
I am a highly dedicated Flutter developer with a strong passion for creating impactful apps that enhance productivity, streamline record-keeping, and facilitate data-driven decision making. My goal is to contribute to the success of companies by leveraging my skills in Flutter development.
No comments yet. Be the first to comment.
Introduction Welcome to this comprehensive tutorial where we will delve into the key steps required to internationalize your Flutter app. We'll focus on the essentials and provide you with a clear understanding of the process. For more detailed expla...
Introduction In this article I'll share with you how to fix'AssetManifest' is imported from both 'package:flutter/src/services/asset_manifest.dart' and 'package:google_fonts/src/asset_manifest.dart'. When you run your flutter app you might notice thi...
Introduction Have you updated Xcode to 14.3 and now you see the error missing file libarclite_iphonesos.a? If yes, you are reading the correct article. I'll share with you how I fixed the error. Solution Open Xcode Select pods Select a package in ...
Introduction Have you updated Xcode to 14.3 and now your archive fails? If yes, you are reading the correct article. I'll share with you how I fixed failed Archive on Xcode 14.3. The solution When the archive failed you might have seen the rsync erro...
Introduction In this article, I'll share with you how I fixed a failed flutter build app bundle command. When I ran flutter build app bundle in my terminal I got the below error. Execution failed for task ':app:signReleaseBundle'. > A failure occurre...
In this post, we will discuss how to create a dynamic dropdown form field in Flutter. We will be using two DropdownFormField() widget. A region dropdown field and a district dropdown field.
A region is the USA equivalent of a state and a district is a sub-location within a region. These two fields along with other fields comprise our Farmer Register Form as shown in the screenshot below
My goal is to filter the options in the district depending on the region selected by the user. The purpose of this methodology is to reduce the number of options in the district dropdown field.
class RegionDropdownFormField extends StatelessWidget {
const RegionDropdownFormField({
Key? key,
required this.state,
}) : super(key: key);
final _AddFarmerScreenController state;
@override
Widget build(BuildContext context) {
return Expanded(
flex: 5,
child: DropdownButtonFormField(
focusNode: state.regionFocusNode,
decoration: FormStyles.textFieldDecoration(labelText: 'Region'),
onChanged: (String? value) {
state.setState(() {
state.dropdownMenuItems = state._districtItem(value!);
state.value = state.dropdownMenuItems!.first.value;
});
},
validator: state.farmer.validateRequiredField,
onSaved: state.farmer.saveFarmerCategory,
items: Region.all
.map((e) => DropdownMenuItem(
child: Text(e),
value: e,
))
.toList(),
),
);
}
}
When the user selects an option from the RegionDropdownFormField() the onChanged: function will be triggered.
(String? value) {
state.setState(() {
state.districtDropdownMenuItems = state._getDistrictItems(value!);
state.districtValue = state.districtDropdownMenuItems!.first.value;
});
}
This function calls setState() since we want the UI to update. Within setstate(), state.districtDropdownMenuItems = state._getDistrictItems(value!); creates a list of dropdownMenuItem() based on the value selected by the user. state.districtDropdownMenuItems will be assigned to the items: property of the DistrictDropdownFormField().
state.districtValue = state.districtDropdownMenuItems!.first.value; selects the first value of the newly created state.districtDropdownMenuItems. This variable will be assigned to the value: property of the DistrictDropdownFormField(). Failure to do this will create the below error.
════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building Builder(dirty, dependencies: [_FocusMarker]):
There should be exactly one item with [DropdownButton]'s value: District 6.
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 850 pos 15: 'items == null || items.isEmpty || value == null ||
items.where((DropdownMenuItem<T> item) {
return item.value == value;
}).length == 1'
class DistrictDropdownFormField extends StatelessWidget {
const DistrictDropdownFormField({
Key? key,
required this.state,
}) : super(key: key);
final _AddFarmerScreenController state;
@override
Widget build(BuildContext context) {
return Expanded(
flex: 5,
child: DropdownButtonFormField(
focusNode: state.districtFocusNode,
decoration: FormStyles.textFieldDecoration(labelText: 'District'),
onChanged: (value) =>
state._handleDropdownOnChanged(state.districtFocusNode),
validator: state.farmer.validateRequiredField,
onSaved: state.farmer.saveDistrict,
value: state.districtValue,
items: state.districtDropdownMenuItems,
),
);
}
}
This widget is a typical DropdownFormField() but note, value: state.districtValue, and items: state.districtDropdownMenuItems, are dependent on the region selected in the DistrictDropdownFormField().
In this post, we discussed how to create a dynamic dropdown form field.
Thank you for reading my post. Feel free to follow me for more flutter tips and tricks or connect with me on LinkedIn and Twitter. You can also buy me a book to show your support.