OudsPhoneNumberInput class

OUDS Text Input Design Guidelines

Reference design version : 1.3.1

Phone number Input is a UI element that allows to capture and validate telephone numbers, in international format. Phone number Input integrates a country selector, allowing users to choose their country and automatically apply the corresponding dialing code (such as +33 for France). Dialing code is displayed as a non-editable prefix within the field to guide the user and ensure consistent formatting. Real-time formatting or masking is included to improve readability during input, and validation rules tailored to the number structure of the selected country.

This widget allows users to enter a phone number with support for country selection, automatic formatting, and visual icons or status indicators.

Parameters:

• controller: The text controller to access or modify the input value.
• focusNode: The focus node to manage focus on the input field.
• enabled: Indicates if the field is enabled (default: true).
• readOnly: If true, the field is read-only (default: false). This parameter should be consistent with the countrySelector, if used, to ensure coherent input management.
• keyboardType: The type of keyboard to display during input.
• countrySelector: Optional. If provided, displays a country selector for choosing the country of the number.
• decoration: Decoration configuration for the input field, including labels, icons, helper texts, etc.
• onEditingComplete: Callback invoked when editing is complete.

You can use OudsPhoneNumberInput component in your project, customizing parameters as needed :

Example 1: With a country selector
OudsPhoneNumberInput(
  decoration: OudsInputDecoration(
    labelText: "Phone Number",
    hintText: "Enter your number",
  ),
  controller: myController,
  countrySelector: CountrySelector(
    readOnly: false,
    countryFilter: CountryFilter.all,
    codes: ["FR", "US"],
    onCountryChanged: (country) {
      // Handle country change if needed
    },
  ),
  readOnly: false, // should be consistent with the countrySelector if it enforces read-only
)

Example 2: Without a country selector (direct input only)
OudsPhoneNumberInput(
  decoration: OudsInputDecoration(
    labelText: "Phone Number",
    hintText: "Enter your number",
  ),
  controller: myController,
  // No countrySelector provided
  readOnly: false,
)