flutter web realtime database does not work

Question

i am trying to run my flutter web app with firebase realtime database but whenever i run the app a keep getting this error

Error: MissingPluginException(No implementation found for method Query#observe on channel plugins.flutter.io/firebase_database)

my index.html file looks like this

<!DOCTYPE html>
<html>

<head>
    <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    Fore more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
  -->
    <base href="/">

    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="A new Flutter project.">

    <!-- 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="altec_web">
    <link rel="apple-touch-icon" href="icons/Icon-192.png">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="favicon.png" />

    <title>altec_web</title>
    <link rel="manifest" href="manifest.json">
</head>

<body>
    <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('flutter-first-frame', function() {
                navigator.serviceWorker.register('flutter_service_worker.js');
            });
        }
    </script>
    <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-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>

    <script>
        var firebaseConfig = {
            apiKey: ".......",
            authDomain: "......",
            databaseURL: ".....",
            projectId: "......",
            storageBucket: "....",
            messagingSenderId: "....",
            appId: ".......",
            measurementId: "........",
        };

        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.database();
    </script>
    <script src="main.dart.js" type="application/javascript"></script>
</body>

</html>

my dependencies

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.40.2
  syncfusion_flutter_charts: ^18.1.55
  flutter_svg: ^0.22.0
  syncfusion_flutter_gauges: ^18.1.55
  firebase_core: ^0.7.0
  firebase_auth: "^0.20.1"
  cupertino_icons: ^1.0.2
  google_fonts: ^1.1.2
  supercharged: ^2.1.1
  simple_animations: ^4.0.1
  firebase_db_web_unofficial: ^0.0.2
  cached_network_image: ^2.5.1
  firebase_database: ^6.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

i first thought that the issue was caused by the firebase package, but i have checked there GitHub page and found that firebase realtime dose support flutter web

any idea what is the issue ?

Looking at the example linked from the docs, I see that they only import main.dart.js into their HTML, and leave the importing of the specific SDKs to the library, based on the config and imports in the dart code. I recommend giving that a try. — Frank van Puffelen
– Frank van Puffelen, Commented Dec 23, 2021 at 17:25

Frank van Puffelen · Accepted Answer · 2021-12-23 17:26:25Z

Looking at the example linked from the docs, I see that they only import main.dart.js into their HTML:

<script src="main.dart.js" type="application/javascript"></script>

and leave the importing of the specific SDKs to the library, based on the config and imports in the dart code:

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:firebase_database/ui/firebase_animated_list.dart';
import 'package:flutter/foundation.dart' show defaultTargetPlatform, kIsWeb;
import 'package:flutter/material.dart';

...

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: const FirebaseOptions(
      apiKey: 'AIzaSyAHAsf51D0A407EklG1bs-5wA7EbyfNFg0',
      appId: '1:448618578101:ios:2bc5c1fe2ec336f8ac3efc',
      messagingSenderId: '448618578101',
      projectId: 'react-native-firebase-testing',
      databaseURL: 'https://react-native-firebase-testing.firebaseio.com',
      storageBucket: 'react-native-firebase-testing.appspot.com',
    ),
  );
  ...

I recommend giving that a try.

Collectives™ on Stack Overflow

flutter web realtime database does not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related