I am creating a flutter web app ,I want to connect my flutter web project with cloud firestore, is there any to connect my project to cloud firestore
I have try import cloud_firestore: ^0.12.5+2 in pubspec.yaml.
Because op depends on cloud_firestore >=0.3.0 which requires the Flutter SDK, version solving failed.
You can now use official cloud_firestore plugin in flutter web, just follow the instructions in readme page to integrate plugin.
The FlutterFire plugin that you found only targets iOS or Android.
If you're targeting the web, use the firebase-dart plugin.
Also see a similar answer I gave yesterday here: Is there a Dart interface to Firestore - with API as in https://firebase.google.com/docs/firestore/quickstart?
You need to add the following dependency to your package manager:
cloud_firestore: 0.13.4
There are a couple of extra steps to take when configuring for web. These involve adding some script references to your index.html file with Google's SDK reserved URL's (this assumes you will be deploying to google hosting or at least serving locally for testing purposes).
<script src="/__/firebase/7.9.2/firebase-app.js"></script>
<script src="/__/firebase/7.9.2/firebase-auth.js"></script>
<script src="/__/firebase/7.9.2/firebase-firestore.js"></script
<script src="/__/firebase/init.js"></script>
I previously wrote a step by step guide to connecting a Flutter Web app to Google Cloud Firestore, including an example contact form.
Refs :
https://medium.com/#mat_wright/connecting-a-flutter-web-form-to-google-cloud-firestore-f6bf7aa28f99
https://firebase.google.com/docs/hosting/reserved-urls
enter link description here
For configuring Firestore and Firebase for Flutter Web this link will help a lot. I have tried to document all the steps required to configure: Configure Firestore & Firebase with Flutter Web
maybe you need add
dependencies:
firebase_web: ^5.0.9
to your pubspec.yaml.
this page can help you https://pub.dev/packages/firebase_web
Related
I have a current Flutter project which is linked to a Firebase project and is reading and writing from a Realtime Database. My issue is that I have used the wrong project and now want to switch my Flutter app to use a different Project's Realtime Database. Is it possible to switch the Firebase project my app is currently linked to and if so how do I go about doing that?
Thanks
The FlutterFire CLI is a great tool for quickly configuring Firebase resources for Flutter projects and it could be used to switch the Firebase project to which the configuration files in your Flutter project are pointed.
First you could want to set up the FlutterFire CLI by following the instructions on the Firebase site:
Install the Firebase CLI.
Log into Firebase using the Google account under which you have the new Firebase project you want to switch to set up by running the following command: firebase login
Install the FlutterFire CLI by running the following command from any directory: dart pub global activate flutterfire_cli
Then, after getting the FlutterFire CLI set up, it would probably be a good idea to make sure your current Firebase configuration is backed up some how, either using version control or manually.
Finally, to switch your Flutter configuration to a different Firebase project, run flutterfire configure and follow the steps in the workflow, making sure to select the new Firebase project.
is there an approach to have something like a method channel on Flutter web apps to call to the javascript host?
Yes. JS Interop apparently works fine. Some of the pub packages use it to link flutter web with native JS libs. I think the early firebase packages worked that way as well. Details linked from https://dart.dev/web/js-interop.
I have a Flutter web app that uses firebase and I have two firebase projects(dev and prod).
I'll like to set up Flavors for this project(just web no mobile).
In mobile, I can use different GoogleService-Info.plist or google-services.json files for either flavor but I could not find anyway to do this on the web app as the configuration is done in the index.html file. Is there any way to do this? Maybe have different HTML files and specify which of them to be bundled while running the app?
Thanks.
You can use Firebase SDK auto-configuration. By relying on the reserved Hosting URL, you can deploy the same code to multiple Firebase projects.
On each of your Firebase projects, go to Project Overview -> Project settings. See here
Under "Your apps" select your web app. If you haven't, link your web app to a firebase hosting site.
In Firebase SDK snippet, select the automatic option. See here
Replace your current firebase configuration on index.html to:
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.21.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.21.0/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
That's it, this will allow you to use the same index.html for different flavors.
More Info here
See Flutter Firebase - Setting different deployment targets for iOS, Android, and Web.
This explains doing flavors for iOS and Android and Firebase SDK auto-configuration for the Web.
The mapbox gl package page lists it as suitable for web applications (mapbox_gl).
I tried running the example as a web application, but I encounter the error Error creating mapbox_gl_example|lib/move_camera.ddc.dill
Error creating kernel summary for module:mapbox_gl_example|lib/move_camera.ddc.dill
.
So, my question is, is the flutter package mapbox_gl actually able to be run as a web application as the tags "FLUTTER ANDROID IOS WEB" suggest (is there something I must configure), or is it really not web capable as may be indicated by the fact that the actual description mentions nothing of web capability?
Update: The mapbox_gl flutter plugin now has web support merged into master on Github. If you don't want to wait until web support is released to pub.dev, you can depend on the Github repo directly with this dependency in pubspec.yaml:
mapbox_gl:
git:
url: git://github.com/tobrun/flutter-mapbox-gl.git
Outdated answer: Unfortunately, it doesn't support web yet (although PRs are welcome if you want to contribute). The reason it was listed as supporting web (like many other plugins) was that flutter changed the way plugins declare their supported platforms in the pubspec.yaml file. The mapbox_gl package has since been updated on pub.dev and now correctly shows that it only supports Android and iOS.
I'm setting up a new flutter-web application but I can't add dependencies that I could do in flutter.
for example I want to add font-awesome-flutter to the project but get this error!
font_awesome_flutter: 8.5.0
Because font_awesome_flutter >=8.0.0 depends on flutter any from sdk which is forbidden, font_awesome_flutter >=8.0.0 is forbidden.
So, because salema depends on font_awesome_flutter 8.5.0, version solving failed.
since flutter-web is not still stable and its in technical stage, a simple way for using library in flutter-web which has been working for me is to add the library resources manually. you just need to copy everything inside the lib folder of the library in your own project.
in order to access the library's resources go to https://pub.dev/flutter and search for the library you want and then find the library's github repo in the about section.
flutter_web does not have a plugin system yet. Temporarily, we provide
access to dart:html, dart:js, dart:svg, dart:indexed_db and other web
libraries that give you access to the vast majority of browser APIs.
However, expect that these libraries will be replaced by a different
plugin API.
Source:
https://github.com/flutter/flutter_web/blob/master/README.md
In short, Flutter dependencies are not supported by Flutter Web at this time.