I have a project that Flutter and i need to use field Intl phone number, after i try to explore the solution, i found the package :
https://pub.dev/packages/intl_phone_number_input/example
after i install the package and try to use the package, it look good on my local, but after i deploy to firebase, i got error :
error is on method getPhoneNumber when call package method PhoneNumber.getRegionInfoFromPhoneNumber(number);
here is my code :
import 'package:flutter/material.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';
class LeadForm extends StatefulWidget {
const LeadForm();
@override
State<LeadForm> createState() => _LeadFormState();
}
class _LeadFormState extends State<LeadForm> {
final _formKey = GlobalKey<FormState>();
TextEditingController mobilePhoneController = TextEditingController();
PhoneNumber hpnumber = PhoneNumber(isoCode: 'ID', dialCode: "62", phoneNumber: "+625212345678");
@override
void dispose() {
super.dispose();
mobilePhoneController.dispose();
}
@override
void initState() {
super.initState();
WidgetsBinding.instance
.addPostFrameCallback((_){
getData();
});
}
Future<PhoneNumber> getPhoneNumber(String phoneNumber) async {
PhoneNumber number = PhoneNumber();
try{
number =
await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber); //error on here
}catch(e){
print(e);
}
return number;
}
getData() async {
try{
var newnumber = await getPhoneNumber("+6285387654321");
hpnumber = newnumber;
mobilePhoneController.text = hpnumber.phoneNumber == null ? "" : hpnumber.parseNumber();
setState(() {});
}catch(e){
//do something
}
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: Form(
key: _formKey,
child: SingleChildScrollView(
padding: EdgeInsets.fromLTRB(0, 4, 0, 16),
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 32),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 8, vertical:0),
child: InternationalPhoneNumberInput(
onInputChanged:(value) async {
print("on input changed ${value.toString()}");
},
onFieldSubmitted: (String value){
print("on field submited $value");
},
selectorConfig: SelectorConfig(
selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
setSelectorButtonAsPrefixIcon: true,
leadingPadding: 5
),
spaceBetweenSelectorAndTextField :0,
textAlignVertical :TextAlignVertical.center,
isEnabled: true,
ignoreBlank: false,
selectorTextStyle: TextStyle(color: Colors.black),
initialValue: hpnumber,
textFieldController: mobilePhoneController,
formatInput: false,
autoFocus: false,
keyboardType:
TextInputType.numberWithOptions(signed: true, decimal: true),
inputDecoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical:8),
filled: true,
label: Text("Phone"),
border:
OutlineInputBorder(borderRadius: BorderRadius.circular(5))),
onSaved: (phoneNumber) async {
if(phoneNumber.phoneNumber != null && phoneNumber.phoneNumber != ""){
phoneNumber = await getPhoneNumber(phoneNumber.phoneNumber!);
}
print("on save submited ${phoneNumber.toString()}");
}
),
),
)
],
),
),
],
),
),
)
),
),
],
);
}
}
here is my dependecies i install :
intl_phone_number_input: ^0.7.3+1
libphonenumber_plugin: ^0.3.1 //i install this because got error on method getphonenumber
i Also already add script on index.html as instruction in pub.dev
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Rental Application">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="rental_application">
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="512x512" href="icons/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.ico" />
<title>Test</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script src="assets/packages/libphonenumber_plugin/js/libphonenumber.js"></script>
<script src="assets/packages/libphonenumber_plugin/js/stringbuffer.js"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
Flutter sdk version i use:
Flutter 3.13.6 • channel stable
Am I missing something? I would be glad for any help.
After i try below solution, and it work well:
just run
flutter clean
after that rebuild and deploy again