flutterlibphonenumber

Flutter : lipphonenumber_plugin not working after deploy to firebase (hosting)


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);

enter image description here

Here is my local result : enter image description here

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.


Solution

  • After i try below solution, and it work well:

    just run

    flutter clean
    

    after that rebuild and deploy again