ns_intl_phone_input

Description:

ns intl phone input

Flutter Phone Validation Package by Nonstop IO #






The Flutter Phone Validation Package by Nonstop IO is a versatile and easy-to-use Flutter package designed to validate phone numbers from more than 200 countries. With this package, users can seamlessly integrate phone number validation into their Flutter applications, enhancing user experience and ensuring data integrity.
Screenshots #


Widget with Country Code and Phone Number Field:



Drop Down Menu Options for Country code list:



Widget with Country Code , Phone Number Field & Area code format:



Features #


Country Selection Dropdown: Users can choose the desired country code from a dropdown menu, making it easy to validate phone numbers for different regions.


Comprehensive Validation: The package supports validation for phone numbers from over 200 countries, ensuring accuracy and inclusively.


Various Number Formats: Users can input phone numbers in different formats, and the package adapts to validate them accordingly. This includes support for various masks and formats.


Support for area codes of country: The package provides support for area codes within countries. Users can input phone numbers with area codes, and the package takes this into consideration during validation. This feature enhances the package's flexibility and applicability to regions where area codes are an integral part of phone numbers.


Getting Started #
To use the Flutter Phone Validation Package in your project, follow these simple steps:


Add the package to your pubspec.yaml file:
dependencies:
ns_intl_phone_input: ^1.0.0
copied to clipboard


Install the package by running:
flutter pub get
copied to clipboard


Import the package in your Dart file:
import 'package:ns_intl_phone_input/ns_intl_phone_input.dart';
copied to clipboard


Implement the NsIntlPhoneInput widget in your UI, providing the necessary callbacks and customization options.
NsIntlPhoneInput(
textEditingController: _phoneNumberController,
enableValidation: false,
onPhoneChange: (countrySelection) {
setState(() {
this.countrySelection = countrySelection;
});
},
// Other customization options...
),
copied to clipboard


Usage #
Country Selection #
The package provides a user-friendly country selection dropdown, allowing users to choose the relevant country code for phone number validation.
class SampleScreen extends StatefulWidget {
const SampleScreen({super.key});

@override
State<SampleScreen> createState() => _SampleScreenState();
}

class _SampleScreenState extends State<SampleScreen> {
/// Initialize the controller for Intl Text editing
final _phoneNumberController = IntlTextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('NsIntlPhoneInput Example',
style: Theme.of(context).textTheme.titleLarge),
),
body: Center(
/// Assign it to NsIntlPhoneInput widget
child: NsIntlPhoneInput(
textEditingController: _phoneNumberController,
onPhoneChange: (countrySelection) {
print(countrySelection);
},
),
));
}
}

copied to clipboard
Initialize Phone
_phoneNumberController.initialPhone(
phoneNumber: '9876543210',
intlDialCode: '91',
);
copied to clipboard
Clear Phone Number with country code
_phoneNumberController.clear();
copied to clipboard
Phone Number Validation #
Validate phone numbers easily with the onPhoneChange callback. The package supports various phone number formats.
MaterialButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
print('Valid Phone number');
} else {
print('Invalid Phone Number');
}
},
child: const Text('Submit'),
),
copied to clipboard
Customization #
Customize the package to suit your application's needs with various options like initial country code, formatting, and more.
NsIntlPhoneInput(
/// Phone number controller
textEditingController: _phoneNumberController,

/// Enable or disable validation
enableValidation: false,
autovalidateMode: AutovalidateMode.always,

/// Country selection options for UI experience
countrySelectOption: const CountrySelectOption(
countryDialCodeTextStyle: TextStyle(),
countryIsoCodeTextStyle: TextStyle(),
defaultText: "000",
defaultTextStyle: TextStyle(),
showCode: false,
),

/// Optional to select country selection as dialog or new screen
countrySelectionType: CountrySelectionTypeEnum.screen,
focusNode: FocusNode(),
phoneFieldDecoration: const InputDecoration(),
phoneInputFontSize: 20,
validationErrorText: "Validation Message",
onPhoneChange: (countrySelection) {
setState(() {
this.countrySelection = countrySelection;
});
},
),
copied to clipboard
Example #
For a quick start, check out the provided example in the lib/home folder with home_screen.dart file. It demonstrates the integration of the Flutter Phone Validation Package into a sample Flutter application.
Support and Contributions #
If you encounter any issues or have suggestions for improvement, feel free to open an issue on the GitHub repository. Contributions are welcome!
There are couple of ways in which you can contribute.

Propose any feature, enhancement
Report a bug
Fix a bug
Participate in a discussion and help in decision making
Write and improve some documentation. Documentation is super critical and its importance cannot be overstated!
Send in a Pull Request :-)

Thank you for choosing the Flutter Phone Validation Package by Nonstop IO. Happy coding!