PR Type

New feature

BC Break

Yes, see CHANGELOG file

Description

Allow end user to define a custom validator

Sample

PhoneFormField(
  validator: (PhoneNumber? phoneNumber) {
    if (phoneNumber == null) {
      return null;
    }
    final PhoneParser parser = PhoneParser();
    if (!parser.validate(phoneNumber, PhoneNumberType.mobile)) {
      return 'not a mobile line';
    }
    if (!parser.validate(phoneNumber)) {
      return 'invalid format';
    }
  },
);

Hey, love the package, best I've found for a phone input in Flutter.

2 things:

1. What's the recommended way to require the field? I'd like to validate empty inputs as errors (I can see there is some discussion of this in #16).
2. Is it possible to always show the button with the flag and dial code in the input field, rather than only when it has focus or input?

Thanks.

• add properties :
  • favoriteCountries : list of isoCode to be displayed on top of the list
  • sortCountries : whether countries should be sorted by localised name
  • addFavoritesSeparator : whether a divider should be added between favorites and defaults countries
  • showCountryDialCode : whether the dial code should be displayed as ListTile subtitle
  • noResultMessage : the message displayed instead of the list when the search has no results
• add proxy properties for above properties in selector navigator classes
• add API docs on updated files
• fix countryFinder mismatch order on cleaning search after performing a search

Remaining things to do :

• [ ] write tests
• [ ] write translations for noResultMessage
• [ ] write documentation
• [ ] update example to handle favorites countries

Currently, the library exposes a flag withHint and inject AutofillHints.telephoneNumberNational if true. On iOS, I doesn't seem to work. I need to specify AutofillHints.telephoneNumber instead.

Can we simply expose the whole Iterable<String>? autofillHints instead of the bool flag?

The app theme input border is overriding the widgets input border as shown in the picture where the inner text field has a border even though it is using InputDecoration.collapsed which removes the border.

The solution I used is to wrap the widget with a Theme widget and reimplement the input decoration in the decoration parameter.

Is there another way to override the App default theme? I Would love to contribute and implement a proposed solution.

I would like to define some favorites countries so that my application users can find the mostly used countries in top of the list. Already started to implements that on my own.

Does this sound like a valuable feature for you ?

Do you plan to add a format as you type feature ?

I would be pleased to help achieving this functionality however I don't find helpful data in your other metadata package to get easy information for this.

Hello,

I have added some new customization properties to the CountrySelectorNavigator which are the following:

• For the CountryList, properties to customize the titleStyle & subtitleStyle for all the CountrySelectorNavigators, not just the BottomSheetNavigator, and a property to customize the scrollPhysics of the list.
• For the SearchBox, properties to customize the InputDecoration, TextStyle, and Search Icon Color`.

I hope you like them.

Thanks ❤ Moaz El-sawaf

First of all, thank you for this amazing Flutter/Dart package!

There is an odd issue where for some reason, the flag icon and country code number is placed on the right side of the field, but the invisible dropdown button is still on the left side.

v4.6.0 and below:

v5.0.0 and greater:

Note: the dropdown button looks grey only because I tabbed onto it - normally it is transparent.

Using the PhoneFormField in a bottomsheet with a PhoneController. When reopening the bottomsheet (using the same PhoneController), we get this error:

// _StreamControllerLifeCycle interface

  StreamSubscription<T> _subscribe(void onData(T data)?, Function? onError,
      void onDone()?, bool cancelOnError) {
    if (!_isInitialState) {
      throw StateError("Stream has already been listened to.");
    }

Specifically, the line throw StateError("Stream has already been listened to."); gets triggered. It looks like once a value is pulled once, the stream no longer emits values, even if the controlled has yet to be disposed. Is this issue known? What is the current workaround? Thank you for your help!

Is there any specific reason to pass through so few arguments to the textfield? https://github.com/cedvdb/phone_form_field/blob/dev/lib/src/widgets/phone_field.dart#L150

The TextField has much more arguments that user would like to pass

I made a feature using suffix-icon that can clear the text from the field if the IconButton was clicked. But it seems PhoneFormField doesn't have a clear() method like TextFormField does. How can I clear the value from the input field?

Hi there, I hope you are doing well.

There is a bug with the flagSize of the country selector for draggableBottomSheet. when I try to set flagSize for the icon on doesn't work properly. It is getting the flag in a wrong shape.

To reproduce it, just try to set a size for the flag into on country selector navigator and you will be able to see that the size does not change.

Hey, There is a bug that occurs when the phone number itself is empty.

The iso 2 always resets itself to the default country. So choosing the country doesn't affect the form field - it stays with the same default country.

Only after typing some digits, and trying to change the country, then it works. But after removing all digits, it resets to default country.

I think the best behaviour is to keep the chosen country no matter what happens. Only at the initialization of the form field, the default country should be used (after checking there is no initial form value).

Thanks

Hello I am using your package in a particular context. Because we use bloc pattern, we develop this packages that facilitate bloc integration with form . I want to integrate your package to build phone number field and it works fine except the reset functionnality. It throws an TypeErrorImpl, it is like null value is no longer accepted in the controller. But it seems to work fine in your example. So it is more an call for help than an issue. In the picture you can see the error throwed, and some other picture that works fine

Here is the implementation

` import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_floc/flutter_floc.dart'; import 'package:phone_form_field/phone_form_field.dart';

class PhoneFormFieldBlocBuilder extends StatefulWidget { /// Fieldname to map with a field of the parent FormBloc in the widget tree final String fieldName; final String? hint; final IsoCode? initialCountryCode; final InputDecoration decoration;

PhoneFormFieldBlocBuilder({ Key? key, required this.fieldName, this.decoration = const InputDecoration(), this.hint, this.initialCountryCode, }) : super(key: key);

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

class _PhoneFormFieldBlocBuilderState extends State { late PhoneController _controller;

@override void initState() { super.initState(); _controller = PhoneController(null); _controller.addListener(() => setState(() {})); }

void dispose() { super.dispose(); _controller.dispose(); }

@override Widget build(BuildContext context) { return BlocConsumer<T, FormBlocState>( buildWhen: (previous, current) => previous.fields[widget.fieldName] != current.fields[widget.fieldName], builder: (context, state) { return PhoneFormField( controller: _controller, decoration: _buildDecoration(context), validator: PhoneValidator.none, countrySelectorNavigator: CountrySelectorNavigator.modalBottomSheet(), defaultCountry: widget.initialCountryCode != null ? widget.initialCountryCode! : IsoCode.FR, onChanged: (phone) { print(phone!.international); context.read().updateField(widget.fieldName, OurPhoneNumber(isoCode: phone!.isoCode, nsn: phone.nsn)); }, ); }, listener: (context, state) { if (context.read().state.status == FormStatus.pure) { print("pure");

      if (_controller.value == null) {
        print("null");
      } else {
        // _controller.value = PhoneNumber(
        //     isoCode: widget.initialCountryCode != null
        //         ? widget.initialCountryCode!
        //         : IsoCode.FR,
        //     nsn: '');

        _controller.reset();
      }
    }
  },
);

}

InputDecoration _buildDecoration(BuildContext context) { return widget.decoration.copyWith( errorText: context.read().fieldError(widget.fieldName), ); } }

`

Hope we can found a solution =

I can set the input through the controller e.g. phoneNumberController.value = PhoneNumber.fromRaw(123); But after this when I call the parent Form's validate() method then PhoneFormField() validator becomes active, if I edit the number a little e.g. erase the last digit and then type it again then the validate() method of the parent Form widget works as intended