← Back to blog

What’s new in FlutterFire for Google I/O 2021

Remi Rousselet

Flutter Engineer & Open source maintainer

19th May, 2021

Need a custom tool? Invertase can help

Tired of investing in off-the-shelf software that doesn't quite fit your business? Invertase can build solutions tailored to your exact needs. Tell us what you're looking for here and we'll be in touch.

Along with the awesome Flutter and Firebase announcements made during Google I/O, the Invertase team is excited to announce the latest round of updates for the FlutterFire plugins.

Firebase SDK upgrades

The Firebase SDK versions used by FlutterFire plugins have been updated to the new versions released for Google I/O:

  • iOS now uses Firebase iOS 8.0.0 (changelog)
  • Android now uses Firebase Android BoM 28.0.1 (changelog)
  • Web now uses Firebase JS 8.6.1 (changelog)

Upgrading the web SDK

Upgrading Firebase plugins will not automatically upgrade the web SDK version that your application uses. You will have to manually upgrade your web/index.html file:

<html>
  ...
  <body>
-    <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
  </body>
</html>

If you’re not on the correct version of the Firebase JS SDK FlutterFire will now print a detailed warning about it during debug.

New plugin: Firebase App Check

A new exciting plugin was added to the FlutterFire family: firebase_app_check

App Check helps protect your backend resources (such as Cloud Storage) from abuse (such as billing fraud or phishing).

With App Check, devices running your app will use an app identity attestation provider to certify it is indeed your authentic app, and may also check that it’s running on an authentic, untampered device. This certification is attached to every request your app makes to your Firebase backend resources.

App Check currently supports Cloud Storage, Realtime Database, and Cloud Functions, with more Firebase products coming soon. See the Firebase documentation about App Check for more information.

Firebase Messaging: checking for browser support

Along with firebase_messaging 10.0.0, support was added for checking if the browser your application is running on supports Firebase Messaging.

This can be done with:

if (FirebaseMessaging.instance.isSupported) {
  // TODO do something only if FirebaseMessaging is supported.
}

This is equivalent to the API of the same name on the Firebase JS SDK.

Cloud Firestore: improving type-safety

With the release of cloud_firestore 2.0.0, withConverter was added on numerous classes.

This method help developers manipulate Firestore data in a type-safe way, by making read and write operations use a custom Dart class instead of a Map.

As an example, consider a collection of movies:

final moviesRef = FirebaseFirestore.instance.collection('movies');

One limitation with this syntax is, if we want to interact with this collection in any way, we will have to use Map. The downside is, as applications grow larger, this becomes error-prone. For example, nothing prevents us from doing:

// Adding a City to a list of movies does not make sense
moviesRef.add(City('London').toJson());

By using withConverter, we could instead define our collection as:

final moviesRef = FirebaseFirestore.instance
  .collection('movies')
  .withConverter<Movie>(
    fromFirestore: (snapshot, options) => Movie.fromJson(snapshot.data()!),
    toFirestore: (movie, options) => movie.toJson(),
  );

This changes the prototype of methods like get, set and snapshots to use a Movie instance instead of Map. A side-effect is that our previous mistake is no longer feasible:

// Compilation error, City cannot be assigned to Movie
moviesRef.add(City('London'));

// Ok!
moviesRef.add(Movie('star-wars'));

Cloud Firestore: data bundles

Firebase has recently introduced a neat new feature to Firestore called “data bundles” which can be read in-depth here. In a nutshell, it allows users to cache data snapshots with the intention of saving costs and decreasing app load-up speed. The FlutterFire Firestore package has recently updated its own API to include a handy method called loadBundle() to load these cached bundles. Here is an example of it in action:

// Grab your data bundle that you created using the
// Firebase Admin SDK from external resource:
final response = await http.get(url);
Uint8List buffer = Uint8List.fromList(response.body.codeUnits);

// Load the data-bundle into Firestore
FirebaseFirestore
  .instance
  .loadBundle(buffer);

// Consuming the data from cache
FirebaseFirestore
  .instance
  .collection('data-bundle-collection')
  .get(const GetOptions(source: Source.cache))
  .then((querySnapshot) {
    // Do something with your snapshot
  });

Cloud Firestore additionally supports named queries for data bundles. To learn how to name a query when creating your data bundle, read here. The FlutterFire Firestore package has added namedQueryGet() as an easy way to retrieve this data by name from Firestore cache. Here’s how that would look:

// Load data-bundle into cache as described in the previous code snippet
FirebaseFirestore.instance.loadBundle(buffer);

FirebaseFirestore.instance
  .namedQueryGet(
    'very-cool-data-name',
    options: const GetOptions(source: Source.cache),
  )
  .then((querySnapshot) {
    // Do something with your snapshot
  });

Cloud Storage: local emulator support

A Firebase Storage emulator was just announced at Google I/O that allows users to test their application’s Firebase Storage surface area quickly, locally, and without incurring Firebase Server costs. FlutterFire already supports connecting to the emulator in its latest release.

To begin, you must first set up the Firebase Storage emulator which can be read about here. The next step is to connect to the emulator via the FlutterFire Storage package by the following setup:

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

  // Immediately after initializing Firebase, setup the emulator
  await FirebaseStorage
    .instance
    .useEmulator(host: 'localhost', port: 9199);
}

// Every future upload or download via Flutterfire Storage
// is now scoped to the Storage emulator!

Codelabs

A new codelab for Flutter + Firebase was added: Get to know Firebase for Flutter.

Make sure to check it out to learn more about Firebase for Flutter!

Tune in to the “Get to know Firebase for Flutter Google I/O workshop” for more on this.

Flutter Favorite program

The following FlutterFire plugins are now part of the Flutter Favorite program:

  • cloud_firestore
  • cloud_functions
  • firebase_auth
  • firebase_core
  • firebase_crashlytics
  • firebase_messaging
  • firebase_storage

For a package to become a Flutter Favorite it needs to have passed several quality metrics and meet some high quality standards. This is great news for FlutterFire and shows the quality of work and level of commitment we’ve put into these packages over the past year.

That’s it for today. Have a great Google I/O 2021!

Remi Rousselet

Flutter Engineer & Open source maintainer

Categories

Tags