Why Choose the brakzon_phone_field Flutter package?

The brakzon_phone_field Flutter package offers a ready‑made, customizable phone number input widget that handles country codes, searchable selectors, and right‑to‑left (RTL) languages out of the box. It’s ideal for registration forms, checkout pages, or any UI that needs reliable international phone entry without writing custom parsing logic.

Installation

Add the dependency with the Flutter CLI:

Code
flutter pub add brakzon_phone_field

After the command finishes, run flutter pub get to fetch the package.

Basic Usage – A Minimal Example

Below is a complete, runnable example that demonstrates the core features: initial country selection, RTL mode, custom country labels, and a callback that returns the full phone number.

Dart / Flutter
import 'package:flutter/material.dart';
import 'package:brakzon_phone_field/brakzon_phone_field.dart';

class PhoneInputDemo extends StatelessWidget {
  const PhoneInputDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Phone Field Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BrakzonPhoneField(
          initialCountry: 'IR', // Iran
          rtlEnabled: true,
          customCountryLabels: {
            'IR': 'ایران', // Persian label
            'AE': 'الإمارات', // Arabic label
          },
          onPhoneNumberChanged: (String phone) {
            debugPrint('Full number: $phone');
          },
        ),
      ),
    );
  }
}

Run the app and you’ll see a text field with a country flag picker. Selecting a country automatically prefixes the dial code, and the onPhoneNumberChanged callback provides the concatenated number.

Advanced Configuration

While the default widget works for most cases, you can fine‑tune its appearance and behavior to match your design system.

  • Theming: The widget respects Theme.of(context). Override colors, fonts, or shapes by providing a custom InputDecoration or wrapping the widget in a Theme widget.
  • Custom Country List: If you want to reduce memory usage, you can supply a trimmed list of country codes via the allowedCountries property (check the official docs for exact API).
  • Validation: The package does not perform full E.164 validation. Use a separate validator (e.g., RegExp or the intl_phone_number_input package) if strict format checks are required.

Example: Themed Phone Field with Validation

Dart / Flutter
class ThemedPhoneField extends StatefulWidget {
  const ThemedPhoneField({Key? key}) : super(key: key);

  @override
  _ThemedPhoneFieldState createState() => _ThemedPhoneFieldState();
}

class _ThemedPhoneFieldState extends State<ThemedPhoneField> {
  final _formKey = GlobalKey<FormState>();
  String _fullNumber = '';

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          BrakzonPhoneField(
            initialCountry: 'US',
            rtlEnabled: false,
            onPhoneNumberChanged: (value) => _fullNumber = value,
            decoration: InputDecoration(
              labelText: 'Phone Number',
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
              ),
            ),
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // Simple length check – replace with real validation if needed
                if (_fullNumber.length < 7) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Enter a valid phone number')),
                  );
                } else {
                  debugPrint('Submitted number: $_fullNumber');
                }
              }
            },
            child: const Text('Submit'),
          ),
        ],
      ),
    );
  }
}
Tip: Always test the widget on devices with RTL locales (e.g., Arabic or Hebrew) to verify that the flag picker and text alignment behave as expected.

Mistakes to Avoid

  • Assuming the widget validates the number format. Add your own validation if you need E.164 compliance.
  • Loading the full country list on low‑memory platforms without trimming it. Use allowedCountries to keep the list lean.
  • Hard‑coding country codes in UI strings. Leverage customCountryLabels to keep translations centralized.

Where to Find More Information

For the latest API reference, example projects, and issue tracking, visit the package page on Pub.dev:

If you encounter unexpected behavior, consult the official documentation or open an issue on the repository linked from the Pub page.

Conclusion

The brakzon_phone_field Flutter package removes the friction of building a global phone input field. By following the installation steps, applying the basic example, and customizing as needed, you can deliver a smooth, localized experience for users worldwide.

Frequently Asked Questions

Does brakzon_phone_field validate phone numbers automatically?

No. The widget formats the number and adds the country dial code, but it does not perform full E.164 validation. Add your own validator if strict format checks are required.

Can I limit the list of countries displayed in the picker?

Yes. The package allows you to provide a custom list (e.g., via an `allowedCountries` property). Refer to the official docs for the exact API.

Is the widget compatible with web and desktop platforms?

The package is built to work on all Flutter platforms, including Android, iOS, web, and desktop.

How do I enable RTL mode for languages like Arabic or Persian?

Set the `rtlEnabled` property to `true`. The widget will automatically align text and the country selector for right‑to‑left languages.

Where can I find the latest version and changelog?

Visit the package page on Pub.dev: https://pub.dev/packages/brakzon_phone_field. The page includes version history, changelog, and migration notes.