intl_phone_field_v2 4.0.2

A customised Flutter TextFormField to input international phone number along with country code, flag, dial code, validation and currency information.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:intl_phone_field_v2/intl_phone_field.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<FormState> _formKey = GlobalKey();

  FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text('Phone Field Example')),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(height: 30),
                TextField(
                  decoration: InputDecoration(labelText: 'Name', border: OutlineInputBorder(borderSide: BorderSide())),
                ),
                SizedBox(height: 10),
                TextField(
                  decoration: InputDecoration(labelText: 'Email', border: OutlineInputBorder(borderSide: BorderSide())),
                ),
                SizedBox(height: 10),
                IntlPhoneField(
                  focusNode: focusNode,
                  decoration: InputDecoration(
                    labelText: 'Phone Number',
                    border: OutlineInputBorder(borderSide: BorderSide()),
                  ),
                  languageCode: "en",
                  onChanged: (phone) {
                    debugPrint(phone.completeNumber);
                  },
                  onCountryChanged: (country) {
                    debugPrint('Country changed to: ${country.name}');
                    debugPrint('Currency changed to: ${country.currencyName} (${country.currencySymbol})');
                  },
                ),
                SizedBox(height: 10),
                MaterialButton(
                  color: Theme.of(context).primaryColor,
                  textColor: Colors.white,
                  onPressed: () {
                    _formKey.currentState?.validate();
                  },
                  child: Text('Submit'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}