Issue
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?
Solution
UPDATE 2021
Web support for firebase database is now supported. See PR here.
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, firebase_auth, cloud_firestore, and firebase_functions are supported in flutter web apps.
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. At the time of this edit, firebase_storage is the next plugin on the web roadmap.
Answered By – Corey Cole
Answer Checked By – Marie Seifert (FlutterFixes Admin)