international_phone_input

A customizable Flutter widget for international phone number input with country selection, automatic validation, and support for 240+ countries.

Features

✨ 240+ Countries - Comprehensive country database with dial codes
📱 Smart Validation - Automatic validation based on country-specific rules
🔍 Searchable Picker - Easy country search functionality
🎨 Highly Customizable - Extensive styling options
📋 Form Integration - Full Flutter form support
🌍 Multi-language - Country names in 20+ languages
♿ Accessible - Works with screen readers
⚡ Lightweight - No external dependencies except Flutter

Preview

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  international_phone_input: ^1.0.0

Then run:

flutter pub get

Usage

Basic Example

import 'package:international_phone_input/international_phone_input.dart';

class MyForm extends StatefulWidget {
  @override
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final TextEditingController _phoneController = TextEditingController();
  Country? _selectedCountry;
  String _phoneNumber = '';

  @override
  Widget build(BuildContext context) {
    return InternationalPhoneInput(
      controller: _phoneController,
      onChanged: (country, phoneNumber) {
        setState(() {
          _selectedCountry = country;
          _phoneNumber = phoneNumber;
        });
        print('Full number: +${country.dialCode}$phoneNumber');
      },
      label: 'Phone Number',
      hintText: 'Enter your phone number',
    );
  }

  @override
  void dispose() {
    _phoneController.dispose();
    super.dispose();
  }
}

With Form Validation

final _formKey = GlobalKey<FormState>();
final _phoneController = TextEditingController();

Form(
  key: _formKey,
  child: Column(
    children: [
      InternationalPhoneInput(
        controller: _phoneController,
        onChanged: (country, phoneNumber) {
          // Handle change
        },
        label: 'Phone Number',
        isRequired: true,
        autovalidateMode: AutovalidateMode.onUserInteraction,
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Form is valid
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

Custom Styling

InternationalPhoneInput(
  controller: _phoneController,
  onChanged: (country, phoneNumber) {},
  label: 'Phone Number',

  // Colors
  backgroundColor: Colors.grey.shade50,
  borderColor: Colors.grey.shade300,
  focusedBorderColor: Colors.blue,
  errorBorderColor: Colors.red,
  countrySelectorBackgroundColor: Colors.white,

  // Border
  borderRadius: BorderRadius.circular(16),

  // Text styles
  textStyle: TextStyle(fontSize: 16, color: Colors.black),
  labelStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
  hintStyle: TextStyle(color: Colors.grey),
  countryCodeStyle: TextStyle(fontWeight: FontWeight.w600),

  // Options
  showFlag: true,
  showDropdownIcon: true,
  height: 60,
  contentPadding: EdgeInsets.all(16),
)

With Custom Validation

InternationalPhoneInput(
  controller: _phoneController,
  onChanged: (country, phoneNumber) {},
  customValidator: (phoneNumber, country) {
    if (phoneNumber == null || phoneNumber.isEmpty) {
      return 'Please enter a phone number';
    }

    if (country.code == 'US' && !phoneNumber.startsWith('1')) {
      return 'US numbers must start with 1';
    }

    return null; // Valid
  },
)

Specific Country Selection

// Get a specific country
final sriLanka = countries.firstWhere((c) => c.code == 'LK');

InternationalPhoneInput(
  controller: _phoneController,
  initialCountry: sriLanka,
  onChanged: (country, phoneNumber) {},
)

Complete Example with BLoC/State Management

import 'package:flutter_bloc/flutter_bloc.dart';

BlocBuilder<SignUpBloc, SignUpState>(
  builder: (context, state) {
    return InternationalPhoneInput(
      controller: phoneController,
      initialCountry: state.selectedCountry,
      onChanged: (country, phoneNumber) {
        context.read<SignUpBloc>().add(
          PhoneNumberChanged(
            country: country,
            phoneNumber: phoneNumber,
          ),
        );
      },
      label: 'Phone Number',
      isRequired: true,
      autovalidateMode: AutovalidateMode.onUserInteraction,
    );
  },
)

API Reference