Preview

flutter_phone_field_plus

A highly customizable international phone number input field for Flutter applications.

flutter_phone_field_plus provides an elegant phone number input widget with:

🌍 Country picker
📞 International dialing codes
✅ Phone number validation
🎨 Customizable UI
🚀 Easy integration
📱 Production-ready experience

Features

International phone number input
Country code selector
Automatic dial code handling
Built-in validation support
Custom input decoration
Country change callback
Phone number change callback
Works on Android, iOS, Web, Windows, macOS, and Linux

Installation

Add the package to your pubspec.yaml:

dependencies:
  flutter_phone_field_plus: latest

Install dependencies:

flutter pub get

Import:

import 'package:flutter_phone_field_plus/flutter_phone_field_plus.dart';

Basic Usage

FlutterPhoneFieldPlus(
  onChanged: (phone) {
    print(phone.completeNumber);
  },
)

Complete Example

import 'package:flutter/material.dart';
import 'package:flutter_phone_field_plus/flutter_phone_field_plus.dart';

class PhoneFieldScreen extends StatelessWidget {
  const PhoneFieldScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Phone Field Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: FlutterPhoneFieldPlus(
          decoration: const InputDecoration(
            labelText: 'Phone Number',
            border: OutlineInputBorder(),
          ),
          onChanged: (phone) {
            debugPrint(phone.completeNumber);
          },
        ),
      ),
    );
  }
}

Validation

FlutterPhoneFieldPlus(
  validator: (phone) {
    if (phone == null || phone.number.isEmpty) {
      return 'Please enter a phone number';
    }

    return null;
  },
)

Country Change Callback

FlutterPhoneFieldPlus(
  onCountryChanged: (country) {
    debugPrint(country.name);
  },
)

Phone Number Change Callback

FlutterPhoneFieldPlus(
  onChanged: (phone) {
    debugPrint(phone.completeNumber);
  },
)

Custom Decoration

FlutterPhoneFieldPlus(
  decoration: InputDecoration(
    labelText: 'Mobile Number',
    hintText: 'Enter phone number',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

Example Output

Country: India
Dial Code: +91
Number: 9876543210
Complete Number: +919876543210

Supported Platforms

Platform	Supported
Android	✅
iOS	✅
Web	✅
Windows	✅
macOS	✅
Linux	✅

Why flutter_phone_field_plus?

Many Flutter projects require international phone number input. Setting up country pickers, dial codes, validation, and formatting repeatedly can become time-consuming.

flutter_phone_field_plus simplifies this process by providing a clean, customizable, and production-ready solution.

Contributing

Contributions, issues, and feature requests are welcome.

If you have suggestions or improvements, feel free to open an issue or submit a pull request.

License

MIT License

Author

Developed with ❤️ using Flutter.

GitHub: https://github.com/bvkbbflutter/flutter_phone_field_plus

Pub.dev: https://pub.dev/packages/flutter_phone_field_plus