Flutter Web: Firestore CRUD
Tags: flutterweb, flutter, firestore, tutorial
Published: 2020-01-04 13:43:53

Updated [21/08/2020]: [cloud_firestore major changes](https://pub.dev/packages/cloud_firestore/changelog)

{% youtube Ue_dIKOMcb4 %}

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:

```dart
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:

```html
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):

```html
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
```dart
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](https://firebase.flutter.dev/docs/overview)

And TADA! You're free to use firestore CRUD functions whenever you like, in your mobile app, and web app as per usual.
```dart
import 'package:cloud_firestore/cloud_firestore.dart';

FirebaseFirestore.instance.collection('diaries').add(data)

FirebaseFirestore.instance.collection('diaries').doc('monday').update(data)

FirebaseFirestore.instance.collection('diaries').doc('monday').delete()
```