Flutter with firebase realtime database mobile and web

Question

i am trying to follow the idea in this post: Flutter firebase realtime database in web , to make my mobile app works on web too, using firebase realtime database.

I added import 'package:flutter/foundation.dart' show kIsWeb; to check if is web. I added (firebase_database: ^7.1.1 for mobile) and (firebase: ^9.0.1 for web) packages. I added the imports in the index.html:

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>

I did one query and run for web and it worked fine, but when i back to run to mobile i could not.

/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/storage.dart:2:8: Error: Not found: 'dart:html'
import 'dart:html';
       ^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:2:8: Error: Not found: 'dart:html'
import 'dart:html';
       ^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/js-0.6.3/lib/js.dart:8:1: Error: Not found: 'dart:js'
export 'dart:js' show allowInterop, allowInteropCaptureThis;
^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/js-0.6.3/lib/js_util.dart:8:1: Error: Not found: 'dart:js_util'
export 'dart:js_util';
^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/auth.dart:340:25: Error: The method 'allowInterop' isn't defined for the class 'Auth'.
 - 'Auth' is from 'package:firebase/src/auth.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/auth.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final nextWrapper = allowInterop((firebase_interop.UserJsImpl? user) {
                        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/auth.dart:344:26: Error: The method 'allowInterop' isn't defined for the class 'Auth'.
 - 'Auth' is from 'package:firebase/src/auth.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/auth.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final errorWrapper = allowInterop((e) => changeController.addError(e));
                         ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/auth.dart:374:9: Error: The method 'allowInterop' isn't defined for the class 'Auth'.
 - 'Auth' is from 'package:firebase/src/auth.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/auth.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
        allowInterop((firebase_interop.UserJsImpl? user) {
        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/auth.dart:377:9: Error: The method 'allowInterop' isn't defined for the class 'Auth'.
 - 'Auth' is from 'package:firebase/src/auth.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/auth.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
        allowInterop(idTokenChangedController.addError),
        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart:156:9: Error: The method 'allowInterop' isn't defined for the class 'DatabaseReference<T>'.
 - 'DatabaseReference' is from 'package:firebase/src/database.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
        allowInterop((update) => jsify(transactionUpdate(dartify(update))));
        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart:158:28: Error: The method 'allowInterop' isn't defined for the class 'DatabaseReference<T>'.
 - 'DatabaseReference' is from 'package:firebase/src/database.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final onCompleteWrap = allowInterop(
                           ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart:291:26: Error: The method 'allowInterop' isn't defined for the class 'Query<T>'.
 - 'Query' is from 'package:firebase/src/database.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final callbackWrap = allowInterop((
                         ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart:320:30: Error: The method 'allowInterop' isn't defined for the class 'Query<T>'.
 - 'Query' is from 'package:firebase/src/database.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    jsObject.once(eventType, allowInterop(
                             ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart:397:24: Error: The method 'allowInterop' isn't defined for the class 'DataSnapshot'.
 - 'DataSnapshot' is from 'package:firebase/src/database.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/database.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final actionWrap = allowInterop((d) => action(DataSnapshot.getInstance(d)));
                       ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart:71:25: Error: The method 'allowInterop' isn't defined for the class 'Messaging'.
 - 'Messaging' is from 'package:firebase/src/messaging.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final nextWrapper = allowInterop((payload) {
                        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart:74:26: Error: The method 'allowInterop' isn't defined for the class 'Messaging'.
 - 'Messaging' is from 'package:firebase/src/messaging.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final errorWrapper = allowInterop(controller.addError);
                         ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart:81:25: Error: The method 'allowInterop' isn't defined for the class 'Messaging'.
 - 'Messaging' is from 'package:firebase/src/messaging.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final nextWrapper = allowInterop((payload) {
                        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart:92:25: Error: The method 'allowInterop' isn't defined for the class 'Messaging'.
 - 'Messaging' is from 'package:firebase/src/messaging.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final nextWrapper = allowInterop((_) => null);
                        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart:93:26: Error: The method 'allowInterop' isn't defined for the class 'Messaging'.
 - 'Messaging' is from 'package:firebase/src/messaging.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/messaging.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final errorWrapper = allowInterop((e) {
                         ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/storage.dart:312:25: Error: The method 'allowInterop' isn't defined for the class 'UploadTask'.
 - 'UploadTask' is from 'package:firebase/src/storage.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/storage.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final nextWrapper = allowInterop(
                        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/storage.dart:318:26: Error: The method 'allowInterop' isn't defined for the class 'UploadTask'.
 - 'UploadTask' is from 'package:firebase/src/storage.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/storage.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final onCompletion = allowInterop(() {
                         ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/storage.dart:329:9: Error: The method 'allowInterop' isn't defined for the class 'UploadTask'.
 - 'UploadTask' is from 'package:firebase/src/storage.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/storage.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
        allowInterop(_changeController.addError),
        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/top_level.dart:195:7: Error: Method not found: 'hasProperty'.
  if (js.hasProperty(error, 'message')) {
      ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/top_level.dart:196:21: Error: Method not found: 'getProperty'.
    final message = js.getProperty(error, 'message');
                    ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:51:24: Error: Method not found: 'getProperty'.
    map[key] = dartify(util.getProperty(jsObject, key));
                       ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:73:19: Error: Method not found: 'newObject'.
    final jsMap = util.newObject();
                  ^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:75:7: Error: Method not found: 'setProperty'.
      util.setProperty(jsMap, key, jsify(value));
      ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:97:12: Error: Method not found: 'allowInterop'.
    return allowInterop(dartObject);
           ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:105:5: Error: Method not found: 'callMethod'.
    util.callMethod(jsObject, method, args);
    ^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:120:19: Error: Method not found: 'promiseToFuture'.
    value = await util.promiseToFuture(thenable);
                  ^^^^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:122:9: Error: Method not found: 'hasProperty'.
    if (util.hasProperty(e, 'code')) {
        ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:133:22: Error: Method not found: 'allowInterop'.
    PromiseJsImpl<S>(allowInterop((
                     ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:145:5: Error: Method not found: 'allowInterop'.
    allowInterop(c.completeError);
    ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:153:22: Error: Method not found: 'getProperty'.
  String get code => util.getProperty(_source, 'code');
                     ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:156:25: Error: Method not found: 'getProperty'.
  String get message => util.getProperty(_source, 'message');
                        ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:159:22: Error: Method not found: 'getProperty'.
  String get name => util.getProperty(_source, 'name');
                     ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:162:32: Error: Method not found: 'getProperty'.
  Object get serverResponse => util.getProperty(_source, 'serverResponse');
                               ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:165:23: Error: Method not found: 'getProperty'.
  String get stack => util.getProperty(_source, 'stack');
                      ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:176:10: Error: Method not found: 'instanceof'.
  return util.instanceof(object, type);
         ^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:180:19: Error: Getter not found: 'window'.
  Object? start = window;
                  ^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/utils.dart:185:13: Error: Method not found: 'getProperty'.
    start = util.getProperty(start, item);
            ^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart:102:32: Error: The method 'allowInterop' isn't defined for the class 'Firestore'.
 - 'Firestore' is from 'package:firebase/src/firestore.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final updateFunctionWrap = allowInterop((transaction) =>
                               ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart:300:9: Error: The method 'allowInterop' isn't defined for the class 'DocumentReference'.
 - 'DocumentReference' is from 'package:firebase/src/firestore.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
        allowInterop((firestore_interop.DocumentSnapshotJsImpl snapshot) {
        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart:304:26: Error: The method 'allowInterop' isn't defined for the class 'DocumentReference'.
 - 'DocumentReference' is from 'package:firebase/src/firestore.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final errorWrapper = allowInterop((e) => controller.addError(e));
                         ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart:441:9: Error: The method 'allowInterop' isn't defined for the class 'Query<T>'.
 - 'Query' is from 'package:firebase/src/firestore.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
        allowInterop((firestore_interop.QuerySnapshotJsImpl snapshot) {
        ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart:445:26: Error: The method 'allowInterop' isn't defined for the class 'Query<T>'.
 - 'Query' is from 'package:firebase/src/firestore.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
    final errorWrapper = allowInterop((e) => controller.addError(e));
                         ^^^^^^^^^^^^
/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart:761:9: Error: The method 'allowInterop' isn't defined for the class 'QuerySnapshot'.
 - 'QuerySnapshot' is from 'package:firebase/src/firestore.dart' ('/C:/flutter/.pub-cache/hosted/pub.dartlang.org/firebase-9.0.1/lib/src/firestore.dart').
Try correcting the name to the name of an existing method, or defining a method named 'allowInterop'.
        allowInterop((s) => callback(DocumentSnapshot.getInstance(s)));
        ^^^^^^^^^^^^
U
nhandled exception:
FileSystemException(uri=org-dartlang-untranslatable-uri:dart%3Ahtml; message=Stand
ardFileSystem only supports file:* and data:* URIs)
#0      StandardFileSystem.entityForUri (package:front_end/src/api_prototype/standard_file_system.dart:36:7)
#1      asFileUri (package:vm/kernel_front_end.dart:59
9:37)
#2      writeDepfile (package:vm/kernel_front_end.dart:738:2
1)
<asynchronous suspension>
#3      FrontendCo
mpiler.compile (package:fron
tend_server/frontend_server.dart:562:9)
<asynchronous suspension>
#4  
    starter (package:flutter_frontend_server/server.dar
t:180:12)
<asynchronous suspension>
#5      main (file:///C:/b/s/w/ir/cache
/builder/src/flutter/flutter_frontend_server/bin/starter.dart:13:24)
<asynchronous suspension>



FAILURE: Build failed with an exception.

* Where:
Script 'C:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 1035

* What went wrong:
Execution failed for task ':app:compileFlutterBuildDebug'.
> Process 'command 'C:\flutter\bin\flutter.bat'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 13s
Exception: Gradle task assembleDebug failed with exit code 1

Answer 1

I removed firebase package. It was firebase 9.0.1 I think, and it worked

Answer 2

The official package now supports web, so we can use it for mobile and web. Thanks for all your help.