intl_phone_number_input
intl_phone_number_input copied to clipboard
Cursor Alignment in Initial Value
Describe the bug The package is not aligning the cursor to the end when initialValue first appears.
Package version 0.7.0+2
Flutter version 2.5.0
To Reproduce Steps to reproduce the behavior: 1- Create and pass an initialValue (PhoneNumber) to the widget after an async work. 2- The cursor is at the beginning instead of the end.
Expected behavior I guess it is better to align the cursor always to the end unless the user taps a specific index.
Hello Everyone Is there any updates on this issue? I am facing it too
Hello Everyone Is there any updates on this issue? I am facing it too
Can you try this code sample as a temporary solution @noororfahly13 ?
import 'package:flutter/material.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';
class PhoneInputScreen extends StatefulWidget {
const PhoneInputScreen({Key? key}) : super(key: key);
@override
_PhoneInputScreenState createState() => _PhoneInputScreenState();
}
class _PhoneInputScreenState extends State<PhoneInputScreen> {
PhoneNumber _initialPhone = PhoneNumber(dialCode: '90', isoCode: 'TR');
bool isAlignedFirst = false;
final TextEditingController _phoneController = TextEditingController();
@override
void initState() {
super.initState();
_phoneController.addListener(() {
if (_phoneController.text.isNotEmpty && !isAlignedFirst) {
_phoneController.selection = TextSelection.fromPosition(
TextPosition(offset: _phoneController.text.length));
isAlignedFirst = true;
}
});
}
Future<void> _setPhone() async {
try {
final PhoneNumber phoneNum =
await PhoneNumber.getRegionInfoFromPhoneNumber('+905538265342');
setState(() {
_initialPhone = phoneNum;
isAlignedFirst = false;
});
} on Exception catch (err) {
// print(err);
}
}
@override
Widget build(BuildContext context) => Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InternationalPhoneNumberInput(
onInputChanged: (PhoneNumber val) {},
textFieldController: _phoneController,
initialValue: _initialPhone,
autoFocusSearch: true,
),
TextButton(
onPressed: () async => _setPhone(),
child: const Text('SET PHONE NUMBER'),
),
],
),
),
),
);
}
In onInputChanged method, add the following line
numCont.selection = TextSelection.collapsed(offset: numCont.text.length);
and numCont is your own TextEditingController.
Here is the full code:
onInputChanged: (PhoneNumber number) {
numCont.selection = TextSelection.collapsed(offset: numCont.text.length);
},