Menu
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?
950
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.
69
The FlutterFire plugins were originally built to work in native mobile apps for iOS and Android. Support for the web platform is being added to the plugins as we speak, but it will take some time before all Firebase products are covered.
You can check which modules are currently compatible with Flutter for web in this list of available FlutterFire plugins on the Github repo.
To use Firebase in Flutter for the web on other features, use the firebase-dart plugin. This means that you'll need separate code for web and for mobile, but you may be able to isolate the differences in just a small part of your app.
34
I had the same problem and decided to do something about it. So I went ahead and made https://pub.dev/packages/firebase_db_web_unofficial . It's easy to set up and integrate into your code.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
