Updated [21/08/2020]: cloud_firestore major changes

Now, all Flutter Firebase documentation is in the new link: https://firebase.flutter.dev/docs/overview

Firstly, import the latest cloud_firestore and firebase core dependency in your pubspec.yaml file:



In pubspec . yaml ... dependencies: cloud_firestore: < latest version > firebase_core: < latest version >

Secondly, add the Firebase and Firestore JS SDK in your web/index.html file:



In index.html... <body> <script src= "https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js" ></script> <script src= "https://www.gstatic.com/firebasejs/7.9.1/firebase-firestore.js" ></script> <script src= "main.dart.js" type= "application/javascript" ></script> </body>

Third, initialise Firebase, also in your index.html file with the Firebase keys (that can be found in Firebase settings):



In index.html... <body> <!-- Previously loaded Firebase SDKs --> <!-- ADD THIS BEFORE YOUR main.dart.js SCRIPT --> <script> // TODO: Replace the following with your app's Firebase project configuration. // See: https://support.google.com/firebase/answer/7015592 var firebaseConfig = { apiKey : " ... " , authDomain : " [YOUR_PROJECT].firebaseapp.com " , databaseURL : " https://[YOUR_PROJECT].firebaseio.com " , projectId : " [YOUR_PROJECT] " , storageBucket : " [YOUR_PROJECT].appspot.com " , messagingSenderId : " ... " , appId : " 1:...:web:... " , measurementId : " G-... " }; // Initialize Firebase firebase . initializeApp ( firebaseConfig ); </script> <!-- END OF FIREBASE INIT CODE --> <script src= "main.dart.js" ></script> </body>

Lastly, initialise firebase in your flutter main.dart file



import 'package:flutter/material.dart' ; // Import the firebase_core plugin import 'package:firebase_core/firebase_core.dart' ; void main ( ) { runApp ( App ()); } class App extends StatelessWidget { // Create the initilization Future outside of `build`: final Future < FirebaseApp > _initialization = Firebase . initializeApp (); @override Widget build ( BuildContext context ) { return FutureBuilder ( // Initialize FlutterFire: future: _initialization , builder: ( context , snapshot ) { // Check for errors if ( snapshot . hasError ) { return SomethingWentWrong (); } // Once complete, show your application if ( snapshot . connectionState == ConnectionState . done ) { return MyAwesomeApp (); } // Otherwise, show something whilst waiting for initialization to complete return Loading (); }, ); } }

*Code above was from FlutterFire documentation

And TADA! You're free to use firestore CRUD functions whenever you like, in your mobile app, and web app as per usual.

