Documentation Index
Fetch the complete documentation index at: https://synapsync.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
Overview
NbxCountryPickerInput is a read-only input field that opens a country selection dialog when tapped. It wraps NbxTextFormFieldWidget and delegates country selection to a customizable modal dialog.
Basic Usage
final controller = TextEditingController();
NbxCountryPickerInput(
inputParameters: NbxCountryPickerParameters(
isRequired: true,
inputType: NbxInputType.dropdownMenu,
decorationStyle: NbxInputDecorationStyle.outlined,
controller: controller,
labelText: 'Country',
hintText: 'Select a country',
requiredErrorMessage: 'Country is required',
),
modal: NbxCountryPickerModalParameters(
appBarTitle: 'Select Country',
onSelect: (country) {
controller.text = country.name;
print('Selected: ${country.name}');
},
),
)
Widget Properties
inputParameters
NbxCountryPickerParameters
required
Configuration for the input field appearance and behavior.
modal
NbxCountryPickerModalParameters
required
Configuration for the country picker modal/list dialog.
Callback to validate if the picker should open. Returns true to open, false to prevent opening. If null, the picker opens by default.
Whether to show the error text inside the input field.
validator
String? Function(String?)?
Pure validator for the input field (native Flutter contract).
Notification callback called with the final error after validation (null = valid).
Custom enabled border for the input field.
Custom focused border for the input field.
Custom default border for the input field.
NbxCountryPickerParameters
Configuration object for the country picker input field.
Whether the country field is required. If true, requiredErrorMessage must be provided.
The input type. Typically NbxInputType.dropdownMenu for country pickers.
decorationStyle
NbxInputDecorationStyle
required
The visual decoration style for the input field.
controller
TextEditingController
required
Controller for managing the input field text.
Label text displayed for the input field.
Placeholder text shown when the field is empty.
Error message displayed when required field is not filled.
Widget displayed at the start of the input field.
Maximum number of lines for the input field.
NbxCountryPickerModalParameters
Configuration for the country picker modal dialog. See NbxPhoneFieldWidget documentation for complete parameter details.
Essential Parameters
Title displayed in the country picker modal.
onSelect
void Function(Country)
required
Callback function invoked when a country is selected.
Whether to display phone codes alongside country names.
Whether to show the search functionality in the modal.
Optional list of countries to display. If null, all countries are shown.
Styling Parameters
The modal supports extensive customization including colors, fonts, search bar styling, and more. See the complete list in the NbxPhoneFieldWidget documentation.
Examples
Basic Country Picker
final countryController = TextEditingController();
NbxCountryPickerInput(
inputParameters: NbxCountryPickerParameters(
isRequired: true,
inputType: NbxInputType.dropdownMenu,
decorationStyle: NbxInputDecorationStyle.outlined,
controller: countryController,
labelText: 'Select Country',
requiredErrorMessage: 'Country is required',
),
modal: NbxCountryPickerModalParameters(
appBarTitle: 'Countries',
onSelect: (country) {
countryController.text = country.name;
},
),
)
With Phone Codes Displayed
NbxCountryPickerInput(
inputParameters: NbxCountryPickerParameters(
isRequired: true,
inputType: NbxInputType.dropdownMenu,
decorationStyle: NbxInputDecorationStyle.outlined,
controller: countryController,
labelText: 'Country',
prefixIcon: Icon(Icons.flag),
requiredErrorMessage: 'Please select a country',
),
modal: NbxCountryPickerModalParameters(
appBarTitle: 'Select Country',
showPhoneCode: true,
onSelect: (country) {
countryController.text = '${country.name} (+${country.phoneCode})';
},
),
)
With Validation Callback
NbxCountryPickerInput(
inputParameters: NbxCountryPickerParameters(
isRequired: true,
inputType: NbxInputType.dropdownMenu,
decorationStyle: NbxInputDecorationStyle.outlined,
controller: countryController,
labelText: 'Country',
requiredErrorMessage: 'Country is required',
),
modal: NbxCountryPickerModalParameters(
appBarTitle: 'Select Country',
onSelect: (country) {
countryController.text = country.name;
},
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please select a country';
}
return null;
},
onValidationResult: (error) {
if (error != null) {
print('Validation error: $error');
}
},
)
With Conditional Opening
NbxCountryPickerInput(
inputParameters: NbxCountryPickerParameters(
isRequired: true,
inputType: NbxInputType.dropdownMenu,
decorationStyle: NbxInputDecorationStyle.outlined,
controller: countryController,
labelText: 'Country',
requiredErrorMessage: 'Country is required',
),
modal: NbxCountryPickerModalParameters(
appBarTitle: 'Select Country',
onSelect: (country) {
countryController.text = country.name;
},
),
onBeforeOpen: () async {
// Check if user is allowed to change country
bool canChange = await checkPermission();
if (!canChange) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Not Allowed'),
content: Text('You cannot change country at this time'),
),
);
}
return canChange;
},
)
With Custom Styling
NbxCountryPickerInput(
inputParameters: NbxCountryPickerParameters(
isRequired: true,
inputType: NbxInputType.dropdownMenu,
decorationStyle: NbxInputDecorationStyle.outlined,
controller: countryController,
labelText: 'Country',
prefixIcon: Icon(Icons.public, color: Colors.blue),
requiredErrorMessage: 'Country is required',
),
modal: NbxCountryPickerModalParameters(
appBarTitle: 'Choose Country',
appBarBackgroundColour: Colors.blue,
appBarTextColour: Colors.white,
countryTextColour: Colors.black87,
searchBarBorderColor: Colors.blue,
searchBarTextColor: Colors.black87,
searchBarAutofocus: true,
onSelect: (country) {
countryController.text = country.name;
},
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue, width: 2),
borderRadius: BorderRadius.circular(8),
),
)
With Limited Country List
final allowedCountries = [
// Get specific Country objects
usaCountry,
canadaCountry,
ukCountry,
australiaCountry,
];
NbxCountryPickerInput(
inputParameters: NbxCountryPickerParameters(
isRequired: true,
inputType: NbxInputType.dropdownMenu,
decorationStyle: NbxInputDecorationStyle.outlined,
controller: countryController,
labelText: 'Country',
requiredErrorMessage: 'Country is required',
),
modal: NbxCountryPickerModalParameters(
appBarTitle: 'Select Country',
countries: allowedCountries,
showSearchBox: false, // Disable search for small lists
onSelect: (country) {
countryController.text = country.name;
},
),
)
Behavior Notes
Read-Only Input
The input field is always read-only (isReadOnly: true). Users cannot type directly; they must select from the modal.
Automatic Suffix Icon
A dropdown arrow icon is automatically added as a suffix to indicate the field is interactive.
Controller Management
The widget does not auto-dispose the controller (autoDisposeController: false), allowing external management of the controller lifecycle.
See Also