Phone Flag Input #

A beautiful and customizable phone number input widget for Flutter with country flag selector and international dial code support.

Screenshots #

Features #

✨ Beautiful Country Flag Display - Shows country flags using the country_flags package
🔍 Searchable Country Picker - Easily find countries by name, dial code, or country code
🌍 100+ Countries Supported - Comprehensive list of countries with dial codes
🎨 Fully Customizable - Theme support for colors, sizes, and border radius
📱 Input Filtering - Automatic filtering of plus codes, leading zeros, and country codes
⌨️ Keyboard Optimization - Phone keyboard with digit-only input support

Installation #

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

dependencies:
  phone_flag_input: ^0.0.1

Then run:

flutter pub get

Usage #

Basic Usage #

import 'package:phone_flag_input/phone_flag_input.dart';

PhoneInput(
  initialCountry: Country.unitedStates,
  onChanged: (phoneNumber) {
    print('Full number: ${phoneNumber.fullNumber}');
    print('Country: ${phoneNumber.country.name}');
    print('Number: ${phoneNumber.number}');
  },
)

With Initial Value #

PhoneInput(
  initialValue: PhoneNumber(Country.india, '9876543210'),
  onChanged: (phone) => setState(() => _phone = phone),
)

With Custom Theme #

PhoneInput(
  initialCountry: Country.unitedKingdom,
  theme: PhoneInputTheme(
    flagHeight: 24,
    flagWidth: 36,
    maxWidth: 300,
    borderRadius: BorderRadius.circular(16),
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    flagGap: 12,
    countryGap: 8,
  ),
  phoneHint: 'Enter your phone number',
  onChanged: (phone) => print(phone.fullNumber),
)

Limited Countries #

Show only specific countries in the picker:

PhoneInput(
  countries: [
    Country.unitedStates,
    Country.canada,
    Country.unitedKingdom,
    Country.india,
  ],
  searchHint: 'Search available countries...',
  onChanged: (phone) => print(phone),
)

Disabled State #

PhoneInput(
  initialValue: PhoneNumber(Country.germany, '1234567890'),
  enabled: false,
  onChanged: (phone) {},
)

API Reference #

PhoneInput #

PhoneInputTheme #

PhoneNumber #

Country #

Pre-defined country constants with name, dialCode, and code properties.

// Access pre-defined countries
Country.unitedStates  // US, +1
Country.india         // IN, +91
Country.unitedKingdom // GB, +44
Country.germany       // DE, +49

// Get all countries
Country.values

// Find by code
Country.findByCode('US')      // Returns Country.unitedStates
Country.findByDialCode('+91') // Returns Country.india

Example #

Check out the example directory for a complete demo application showing all features.

License #

MIT License - see the LICENSE file for details.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.