Flutter firebase realtime database in web

问题

I'm trying to get my flutter app working in the browser and it depends on firebase_database. There is not really any documentation for how to do this, but I'm making some assumptions based off the firebase_core and firebase_auth documentations:

https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_core/firebase_core_web
https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_auth/firebase_auth_web

My app is working on iOS and android, but I'm having trouble getting the database working in flutter web.

I've set up my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flutter WebRTC Demo</title>
</head>
<body>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-database.js"></script>
    <script>
        const firebaseConfig = {
            apiKey: '...',
            authDomain: '...',
            databaseURL: '...',
            projectId: '...',
            storageBucket: '...',
            messagingSenderId: '...',
            appId: '...'
        };
        firebase.initializeApp(firebaseConfig);
    </script>
    <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

But, when I try to use the firebase database, I get errors in the logs:

MissingPluginException(No implementation found for method DatabaseReference#set on channel plugins.flutter.io/firebase_database)
package:dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 196:49  throw_
package:flutter/src/services/platform_channel.dart 319:7                              invokeMethod
package:dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 47:50            onValue
package:dart-sdk/lib/async/zone.dart 1381:54                                          runUnary
package:dart-sdk/lib/async/future_impl.dart 139:18                                    handleValue
package:dart-sdk/lib/async/future_impl.dart 680:44                                    handleValueCallback
package:dart-sdk/lib/async/future_impl.dart 709:32                                    _propagateToListeners
package:dart-sdk/lib/async/future_impl.dart 524:5                                     [_completeWithValue]
package:dart-sdk/lib/async/future_impl.dart 554:7                                     callback
package:dart-sdk/lib/async/schedule_microtask.dart 43:11                              _microtaskLoop
package:dart-sdk/lib/async/schedule_microtask.dart 52:5                               _startMicrotaskLoop
package:dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 168:15           <fn>

Is there any way I can get the realtime database working in my flutter app on the web?

回答1:

The FlutterFire plugins only work in native mobile apps for iOS and Android. To use Firebase in Flutter for the web, use the firebase-dart plugin.

回答2:

In the main README in the flutterfire github, there is a "Web?" column that to note which plugins are ready for web.

Currently, only firebase_core and firebase_auth are supportted in flutter web apps. cloud_firestore is the next plugin on the roadmap, but not yet supported.

As @Frank van Puffelen mentioned, to use the full functionality of firebase in flutter web, use the firebase-dart wrapper library.

There is also a Flutter Web Plugins Project Board that shows which flutter plugins are on the roadmap, and what stage of development they are at.

回答3:

I also had a flutter app with firestore database working for both Android and iOS, waiting for the ability to get it work on the web. This person's GitHub demo helped me to get firestore database to work in my flutter web app. Link to GitHub: https://github.com/happyharis/linktree_demo There is also a YouTube video that can be helpful.

来源：https://stackoverflow.com/questions/59670753/flutter-firebase-realtime-database-in-web

标签

firebase

Flutter

firebase-realtime-database

flutter-web