Tuesday, September 26, 2023

international phone validation and Country flag option in Flutter

Validating numbers and providing necessary detail base on selected country.The pacakge comes with enough detail about the country which is super useful and save you from api issues

Installation

Depend on it

Run this command:

With Flutter:

 $ flutter pub add international_phone_field

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  international_phone_field: ^0.1.0

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:international_phone_field/international_phone_field.dart';

Usage

import 'package:international_phone_field/international_phone_field.dart';
String phoneNumber;
String phoneIsoCode;

  void onPhoneNumberChange(
      String number,
      String internationalizedPhoneNumber,
      String isoCode,
      String dialCode,
      String countryCapital,
      String countryContinent,
      String countryCurrency,
      String countryName) {
    setState(() {
      phoneNumber = number;
      phoneIsoCode = isoCode;
    });
  }
@override
 Widget build(BuildContext context) => Scaffold(
     body: Center(
       child: Padding(
              padding: const EdgeInsets.only(left: 8.0, right: 8.0),
              child: InterField(
                onPhoneNumberChange: onPhoneNumberChange,
                initialPhoneNumber: phoneNumber,
                initialSelection: phoneIsoCode,
                enabledCountries: ['+233', '+234'],
                labelText: "Enter your phone Number",
                addCountryComponentInsideField: true,
                border: OutlineInputBorder(
                  gapPadding: 20.0,
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
       );

Demo