OudsPhoneNumberInput class

OUDS Text Input Design Guidelines

Reference design version : 1.3.0

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,
)