Flutter firebase realtime database in web

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.

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.

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.

Just incase someone is still looking for another workaround for flutter web Realtime database issue, I have a simple and pretty straight forward solution...

I did some digging and if(kIsWeb) seems to work.

First

add the firebase package that supports Realtime database for web and firebase_databe package for android|ios.

Second

initialize firebase

void main() async {
await Firebase.initializeApp();
}

Third

import as follows

import 'package:firebase_database/firebase_database.dart';
import 'package:firebase/firebase.dart' as fb;

Fourth

An example on how to read Realtime database data for android-ios / web. Here I am adding images to a carousel slider.

List<SliderImage> sliderList = [];

void getSliderData() async {
FirebaseDatabase firebaseDatabaseference = FirebaseDatabase.instance;
firebaseDatabaseference.setPersistenceEnabled(true);
firebaseDatabaseference.setPersistenceCacheSizeBytes(10000000);



//for web
if (kIsWeb) {
  fb.DatabaseReference databaseRef = fb.database().ref("Slider");
  await databaseRef.onValue.listen((event) {
    fb.DataSnapshot dataSnapshot = event.snapshot;
    sliderList.clear();
    this.setState(() {
      for (var value in dataSnapshot.val()) {
        sliderList.add(new SliderImage.fromJson(value));
      }
    });
  });
  // for android and ios
} else {
  DatabaseReference databaseReference = firebaseDatabaseference.reference();

  databaseReference.keepSynced(true);
  await databaseReference
      .child("Slider")
      .once()
      .then((DataSnapshot dataSnapshot) {
    sliderList.clear();
    this.setState(() {
      for (var value in dataSnapshot.value) {
        sliderList.add(new SliderImage.fromJson(value));
      }
    });
  });
}

}

The carousel slider

CarouselSlider.builder(
      itemCount: sliderList.length,
      options: CarouselOptions(
        autoPlay: true,
        aspectRatio: 16 / 9,
        viewportFraction: 1,
        enlargeCenterPage: false,
        enlargeStrategy: CenterPageEnlargeStrategy.height,
      ),
      itemBuilder: (context, index, realIdx) {
        return Container(
          child: Center(
              child: Image.network(sliderList[index].image, loadingBuilder:
                  (BuildContext context, Widget child,
                      ImageChunkEvent loadingProgress) {
            if (loadingProgress == null) return child;
            return Center(
              child: CircularProgressIndicator(
                valueColor:
                    new AlwaysStoppedAnimation<Color>(Colors.black54),
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded /
                        loadingProgress.expectedTotalBytes
                    : null,
              ),
            );
          }, fit: BoxFit.cover, width: 1000)),
        );
      },
    ));

SliderImage model class

class SliderImage {
 String image;

 SliderImage(this.image);

 SliderImage.fromJson(var value) {
   this.image = value['image'];
 }
}

Similar approach can be applied to Listview.builder. cheers 😀😀😀😀😀😀😀😀