Building an app for iOS and Android? This guide will get you up and running with Flutter & Firebase, plus a few optional superpowers for serious app developers. https://fireship.io/snippets/install-flutterfire/

00:00 Initial Setup
01:46 Android Setup
03:41 iOS Setup
05:01 Analytics
07:02 Performance
08:08 Crashlytics
10:10 Distribution
11:08 Firestore Emulator

Full Flutter Course https://fireship.io/courses/flutter-firebase/
FlutterFire Docs https://firebase.google.com/docs/flutter/setup

#firebase #flutter

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:09:58.775Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
b57cd0d2-ae54-403b-a420-2349757c0258
0ec8025b7f20f3fdae2c3d5539b37b4bf41a3d4385ba2eea98b412c13a39969f
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Perfect tech stacks are rare in an imperfect world, but I think the Flutter Firebase stack is about as close as you can get.
Today's tutorial is a setup guide for developers building a serious mobile app, Flutter and Firebase.
You'll learn the basic setup steps for iOS and Android, how to set up a local development environment using the new Firebase Emulator suite, then we'll implement analytics to understand our users, Crashlytics and performance to improve the quality of our app, and finally, we'll look at app distribution to test our builds before they get in the hands of actual users on the app stores.
By the end of this video, you should have a solid foundation for building pretty much anything you can imagine with the Flutter Firestack.
If anyone wants to develop an app with me, I'm down.
We'll be starting this video with a basic setup, but if you wanna jump ahead to the fun stuff, check out the timestamps in the video description.
Cap.
As you can see here in Versus Code, I have a freshly generated Flutter app.
If you're not sure how to get to this point, check out the official install instructions for Flutter.
From there, we'll open up the pubspec YAML file and go to the dependencies section.
Firebase maintains a variety of different plugins for Flutter.
The only one that's actually required is Firebase core.
Everything else, you can just pick and choose as needed.
Most apps will use Firestore as well as Firebase Auth, and I'm also including the Google sign in plugin to support that sign in method.
From there, we have analytics, and we'll also throw in performance and Crashlytics.
I'll explain what all these do in more detail throughout the video.
In this demo, you'll notice I'm leaving the version numbers empty.
However, it would be a good idea to peg these dependencies to a specific version just so they don't break when you update things.
You'll find the latest version for each plugin in the Firebase docs.
That takes care of our initial Flutter setup.
Now we need a Firebase project.
If you're brand new to Firebase, I'd recommend checking out my Firebase basics video.
Oh, and by the way, if things are going too fast in this video, make sure to follow along with the full write up on Fireship IO that breaks everything down step by step.
But at this point, we just need a project in the cloud that we can link to our front end app.
Now it's time to configure this app for Android.
From the settings tab in the Firebase console, we'll add a new Android app.
Cap.
We need to decide on a bundle ID, which is like a reverse domain name.
So in my case, it would be io.fireship followed by the app name.
The bundle ID needs to be unique and it will be shared across iOS and Android, so make sure to choose it carefully.
Below that, you'll notice it gives us the option for an sha one certificate.
Cap.
It's technically optional.
However, you will need one if you're using phone sign in or Google sign in on Android.
Back in Versus Code, let's open up a terminal session and then we'll CD into the Android directory.
There's a script in there that we can run to generate the sha one certificate for us.
That'll generate a bunch of output, and then at the bottom, you can find the SHA one certificate for the debug Android test variant.
So go ahead and copy that and then paste it into the Firebase console.
Go ahead and create the app, and then it will ask you to download the Google services JSON file.
Download and save it into the Android app directory.
This file contains your Firebase project information, so it can be identified by the Android app.
From there, you can just click throughout the other steps, and then you should see your app created in the Firebase console.
Let's head back to Versus Code and find the Android build Gradle file.
In the dependencies object, you'll wanna add a class path for the Google dependency of version 4.3.3.
Then what's kind of confusing here is you have a second build.gradle file in the app directory.
Go into that file and then add this line to apply the Google services plug in directly below the plug in for the Android application.
Then moving down a few lines, you'll see a default config object.
You'll want to update the application ID to use the bundle ID that you created in the Firebase console.
And then one last thing that we'll do here that's optional, but might be an issue that you run into in the future is enable multidex.
Firebase provides a lot of functionality, which means a lot of classes and methods in your code.
MultiDex simply allows you to support a large number of references.
So let's go ahead and enable it, and then we'll add it as a dependency down here at the bottom as well.
And now we should be good to go with Android.
Flutter Run should build your app without errors at this point.
Now we're ready to move on to the iOS setup, which is a bit easier, especially if you're familiar with Xcode.
In the Flutter project, in the iOS directory, you'll find an Xcode workspace file.
Now go ahead and open up the project in Xcode.
Keep in mind that you do need to have a Mac device in order to do this.
However, there are ways to build Flutter apps for iOS without having a Mac.
However, that's beyond the scope of this video.
In the general settings, you'll want to go in and enter your bundle identifier.
Then under signing and certificates, you'll wanna go in there and make sure that you have a valid signing certificate for your Apple developer account.
If you don't have 1 or not sure what that is, you can follow the official documentation on the Apple developer site.
The next thing we'll do is go back to the Firebase console and this time add a new iOS app.
This time, we just need to add a bundle ID and then it will give us an info dashplist file to download.
Go ahead and open that file in finder and then drag it over to the runner slash runner directory in the Xcode project.
At this point, you should be able to click the play button in code or run Flutter run from the command line and the app should build successfully.
Now at this point, your app is good to go for both iOS and Android with the basic setup.
Cap, but if you're building a serious app here that you plan on launching to the app stores, there's probably a few other Firebase features that you want to take advantage of.
The first one we'll look at is Firebase Analytics, which is just a proxy for Google Analytics.
Basic usage of Google Analytics simply collects metadata about your users, like where they're located, what type of device they're using, what screens they view, and so on.
Now this data by itself is very interesting to look at and provides a ton of insight about your users.
But the really awesome thing about Firebase is that you can easily take action based on this data.
Here's an example.
If you've ever used the Reddit app, you might notice that you start getting occasions based on a subreddit that you're interested in.
You could do the same thing in your own app with Firebase by collecting analytics data about the topics users are interested in and then send notifications to that specific audience.
You can even custom tailor the app experience at runtime using remote config and a bunch of other advanced stuff beyond that as well.
The first thing you'll wanna do is make sure you have analytics enabled on the Firebase console if you didn't do it when you set up the initial project.
In our Flutter code, we'll then import the Firebase Analytics package and then declare a global variable for analytics.
Then we can define that variable in our main function as an instance of Firebase Analytics.
It will automatically start collecting some basic information about your users, but you can also add custom events to it as well.
You'll notice on analytics but there's a bunch of built in methods and I recommend using these built in methods if they fit your needs.
However, in many cases, you may just have your very own custom event, in which case you can call analytics log event with the name of the event and then some optional metadata that you want to collect beyond that.
In this example here, I have this logic set up in a method so that every time we click this button here in the UI, it will log an analytics event.
Now in this very simple app, we have one screen, but your app will likely have multiple screens with Flutter's navigator.
In my full Flutter course on Fireship, we have multiple screens.
And in order to easily track analytics for each screen, we have a navigation observer setup that automatically tracks every screen view as you can see here in the source code on GitHub.
And that's just another really easy thing you'll wanna do that adds a lot of value to your code base.
Now let's move on to the next Firebase superpower, performance.
Basically, it's a tool that allows you to measure the duration of time for different things that happen in your app.
By default, it will measure the app startup time, but you can also set up your own custom traces for any logic in your code.
Now the awesome thing about this is that it collects and aggregates all this data over time.
So if you have a certain trace that's running and and then suddenly that trace becomes much longer.
It's going to create an issue for you automatically, and that means you can hopefully address it before it turns into bad reviews in the app stores.
In addition, it's segmented by app version, country, and so on, allowing you to understand how this data trends over time.
Including Firebase performance in your code will set up the automatic traces, and then we can set up our own custom trace in this method here.
1st, we create a new instance of a trace by calling Firebase performance instance, new trace, and give it a unique name.
When we're ready to start it, we call the start method, and in this case, we'll await a future for 5 seconds, and then we'll stop the trace.
When you click the button, it runs that performance trace in the background, and then you'll find data about that trace in the Firebase console.
So performance is one thing, but if your app is crashing or throwing errors, that's an even bigger problem.
A few years ago, Firebase acquired Fabric from Twitter, and one of the key features in Fabric was Crashlytics.
It's a service that allows you to detect errors that happen in your application in production.
And that's really important because if a user downloads your app and it immediately throws an error, Well, what they're going to do is leave a bad review in the app store.
Before we set up Crashlytics, I first want to warn you that the setup I'm showing you here might be slightly different than what you see in the official documentation.
But I can tell you that as of today, the implementation I'm showing you here works.
To set it up on Android, we'll first wanna go to the Android directory to the build Gradle file.
Under dependencies, you'll add the Firebase Crashlytics Gradle class path.
Next, we'll go to the app level build Gradle file and first apply the plugin of Firebase Crashlytics and then we'll go down to our dependencies and add the implementation for Firebase Crashlytics.
At this point, run the Flutter clean command to wipe out any cache data and then restart the application.
In our source code, we'll implement Crashlytics and then we'll reference the Crashlytics instance and set enable dev mode to true.
Now, dev mode is really only intended to verify that Crashlytics reporting is working properly.
So after you start getting reports in the dashboard, you can set that to false for most of your development.
Now what we want to happen at this point is for Crashlytics to catch every error that's thrown by the Flutter framework, and we can handle that by listening to the Flutter error on error event, and that's basically all we need to do to get comprehensive error reporting across our entire app.
For example, if we have a method that throws a Flutter error, we should see that error reported in Firebase after we click this button.
If we go up to the Firebase dashboard, you may not see any error reports at first because by default, it filters everything by fatal errors.
But in the case of a Flutter app, everything is considered a non fatal error.
When you click on an event, It will tell you how many users are affected by that event and how often it's happening and on what devices.
In addition, it will tell you the line of code that's affected and provide a stack trace for the error so so you can immediately pinpoint where this is happening.
I can tell you from experience that this data is extremely valuable.
So many bad reviews on the app stores are related to uncaught errors and crashes.
If you do client work, you'll have a lot less anxiety knowing that you can catch things like this before they become a major issue.
And speaking of catching things early, Firebase has yet another awesome feature called app distribution.
This feature allows you to easily distribute and test both an iOS and Android app on real devices without having to jump through all the hoops on Google Play or Apple TestFlight.
If you've ever released to the App Store before, then you know it takes 24 hours or more to get your app approved and there's a bunch of forms you have to fill out.
It's just a really annoying process.
Allow me to demonstrate with Android.
First, we'll run a production build for our app by running flutter build apk.
That'll take a minute, and then you should see the app dot apk file in the build directory.
From there, you can go to the Firebase console under app distribution and upload your APK there.
Once uploaded, you can either create an invite link or you can set up testers and groups.
In this case, I'll just add hello at fireship I o as a tester.
Then I can go back to the releases tab and distribute this app to the tester.
The The tester should immediately get an email with instructions about how to run the app.
And now something that would normally take the better part of a day now just takes a few seconds.
At this point, we have a solid foundation for building a serious app, but there's one more bonus topic that I wanna show you, and that's setting up the Firebase Emulator Suite to have a mock database in your local environment so you don't have to create real data in the cloud when developing.
In the past, most Firebase developers would create multiple projects, one for development and one for production.
However, managing multiple Firebase projects can be pretty tedious, and that's especially true for Flutter apps simply because you're targeting multiple platforms.
Here's how we can use the Emulator Suite in our local project.
1st, install the Firebase command line tools.
I'm using Node.
Js to do that.
Next, I'm running Firebase init to connect our project to the cloud.
The tool I'm interested in here is emulators.
There are multiple emulators for things like Cloud Functions and Pub Sub, but for now, we'll just emulate the database, so we'll choose Firestore in this case.
You can select the default options for everything else.
That gives us access to the Firebase emulators colon start command.
If we follow the link to local host 4,000, you can see we have the Firestore emulator running and then it has a UI that's similar to what you would see on the Firebase console.
The key difference is that the data in this database is stored on your local device.
So you can safely create database records without incurring billing or polluting your production project.
Now we just need to tell our Flutter source code to use this local data instead of the real Firestore database, and the way we do that is by modifying the settings on the Firestore plug in.
You can only do that after the widgets have been initialized.
So you wanna put this code somewhere like a knit state when you know that the widget tree has been initialized.
Cap.
We'll want the host to point to our local instance of Firestore.
If using an Android emulator, you'll want it to point to this IP address 10.0.
2 dot 2, but anywhere else, you should be able to just use local host 8080.
From there, you can set the options for SSL and persistence to false.
Now Now when we run the app, you'll notice that the data it uses is from the local Firestore instance and not the actual cloud that we pay for.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to even more Flutter Firebase content.
Thanks for watching, and I will see you in the next one.

Speaker 0: Perfect tech stacks are rare in an imperfect world, but I think the Flutter Firebase stack is about as close as you can get. Today's tutorial is a setup guide for developers building a serious mobile app, Flutter and Firebase. You'll learn the basic setup steps for iOS and Android, how to set up a local development environment using the new Firebase Emulator suite, then we'll implement analytics to understand our users, Crashlytics and performance to improve the quality of our app, and finally, we'll look at app distribution to test our builds before they get in the hands of actual users on the app stores. By the end of this video, you should have a solid foundation for building pretty much anything you can imagine with the Flutter Firestack. If anyone wants to develop an app with me, I'm down.

We'll be starting this video with a basic setup, but if you wanna jump ahead to the fun stuff, check out the timestamps in the video description. Cap. As you can see here in Versus Code, I have a freshly generated Flutter app. If you're not sure how to get to this point, check out the official install instructions for Flutter. From there, we'll open up the pubspec YAML file and go to the dependencies section.

Firebase maintains a variety of different plugins for Flutter. The only one that's actually required is Firebase core. Everything else, you can just pick and choose as needed. Most apps will use Firestore as well as Firebase Auth, and I'm also including the Google sign in plugin to support that sign in method. From there, we have analytics, and we'll also throw in performance and Crashlytics.

I'll explain what all these do in more detail throughout the video. In this demo, you'll notice I'm leaving the version numbers empty. However, it would be a good idea to peg these dependencies to a specific version just so they don't break when you update things. You'll find the latest version for each plugin in the Firebase docs. That takes care of our initial Flutter setup.

Now we need a Firebase project. If you're brand new to Firebase, I'd recommend checking out my Firebase basics video. Oh, and by the way, if things are going too fast in this video, make sure to follow along with the full write up on Fireship IO that breaks everything down step by step. But at this point, we just need a project in the cloud that we can link to our front end app. Now it's time to configure this app for Android.

From the settings tab in the Firebase console, we'll add a new Android app. Cap. We need to decide on a bundle ID, which is like a reverse domain name. So in my case, it would be io.fireship followed by the app name. The bundle ID needs to be unique and it will be shared across iOS and Android, so make sure to choose it carefully.

Below that, you'll notice it gives us the option for an sha one certificate. Cap. It's technically optional. However, you will need one if you're using phone sign in or Google sign in on Android. Back in Versus Code, let's open up a terminal session and then we'll CD into the Android directory.

There's a script in there that we can run to generate the sha one certificate for us. That'll generate a bunch of output, and then at the bottom, you can find the SHA one certificate for the debug Android test variant. So go ahead and copy that and then paste it into the Firebase console. Go ahead and create the app, and then it will ask you to download the Google services JSON file. Download and save it into the Android app directory.

This file contains your Firebase project information, so it can be identified by the Android app. From there, you can just click throughout the other steps, and then you should see your app created in the Firebase console. Let's head back to Versus Code and find the Android build Gradle file. In the dependencies object, you'll wanna add a class path for the Google dependency of version 4.3.3. Then what's kind of confusing here is you have a second build.gradle file in the app directory.

Go into that file and then add this line to apply the Google services plug in directly below the plug in for the Android application. Then moving down a few lines, you'll see a default config object. You'll want to update the application ID to use the bundle ID that you created in the Firebase console. And then one last thing that we'll do here that's optional, but might be an issue that you run into in the future is enable multidex. Firebase provides a lot of functionality, which means a lot of classes and methods in your code.

MultiDex simply allows you to support a large number of references. So let's go ahead and enable it, and then we'll add it as a dependency down here at the bottom as well. And now we should be good to go with Android. Flutter Run should build your app without errors at this point. Now we're ready to move on to the iOS setup, which is a bit easier, especially if you're familiar with Xcode.

In the Flutter project, in the iOS directory, you'll find an Xcode workspace file. Now go ahead and open up the project in Xcode. Keep in mind that you do need to have a Mac device in order to do this. However, there are ways to build Flutter apps for iOS without having a Mac. However, that's beyond the scope of this video.

In the general settings, you'll want to go in and enter your bundle identifier. Then under signing and certificates, you'll wanna go in there and make sure that you have a valid signing certificate for your Apple developer account. If you don't have 1 or not sure what that is, you can follow the official documentation on the Apple developer site. The next thing we'll do is go back to the Firebase console and this time add a new iOS app. This time, we just need to add a bundle ID and then it will give us an info dashplist file to download.

Go ahead and open that file in finder and then drag it over to the runner slash runner directory in the Xcode project. At this point, you should be able to click the play button in code or run Flutter run from the command line and the app should build successfully. Now at this point, your app is good to go for both iOS and Android with the basic setup. Cap, but if you're building a serious app here that you plan on launching to the app stores, there's probably a few other Firebase features that you want to take advantage of. The first one we'll look at is Firebase Analytics, which is just a proxy for Google Analytics.

Basic usage of Google Analytics simply collects metadata about your users, like where they're located, what type of device they're using, what screens they view, and so on. Now this data by itself is very interesting to look at and provides a ton of insight about your users. But the really awesome thing about Firebase is that you can easily take action based on this data. Here's an example. If you've ever used the Reddit app, you might notice that you start getting occasions based on a subreddit that you're interested in.

You could do the same thing in your own app with Firebase by collecting analytics data about the topics users are interested in and then send notifications to that specific audience. You can even custom tailor the app experience at runtime using remote config and a bunch of other advanced stuff beyond that as well. The first thing you'll wanna do is make sure you have analytics enabled on the Firebase console if you didn't do it when you set up the initial project. In our Flutter code, we'll then import the Firebase Analytics package and then declare a global variable for analytics. Then we can define that variable in our main function as an instance of Firebase Analytics.

It will automatically start collecting some basic information about your users, but you can also add custom events to it as well. You'll notice on analytics but there's a bunch of built in methods and I recommend using these built in methods if they fit your needs. However, in many cases, you may just have your very own custom event, in which case you can call analytics log event with the name of the event and then some optional metadata that you want to collect beyond that. In this example here, I have this logic set up in a method so that every time we click this button here in the UI, it will log an analytics event. Now in this very simple app, we have one screen, but your app will likely have multiple screens with Flutter's navigator.

In my full Flutter course on Fireship, we have multiple screens. And in order to easily track analytics for each screen, we have a navigation observer setup that automatically tracks every screen view as you can see here in the source code on GitHub. And that's just another really easy thing you'll wanna do that adds a lot of value to your code base. Now let's move on to the next Firebase superpower, performance. Basically, it's a tool that allows you to measure the duration of time for different things that happen in your app.

By default, it will measure the app startup time, but you can also set up your own custom traces for any logic in your code. Now the awesome thing about this is that it collects and aggregates all this data over time. So if you have a certain trace that's running and and then suddenly that trace becomes much longer. It's going to create an issue for you automatically, and that means you can hopefully address it before it turns into bad reviews in the app stores. In addition, it's segmented by app version, country, and so on, allowing you to understand how this data trends over time.

Including Firebase performance in your code will set up the automatic traces, and then we can set up our own custom trace in this method here. 1st, we create a new instance of a trace by calling Firebase performance instance, new trace, and give it a unique name. When we're ready to start it, we call the start method, and in this case, we'll await a future for 5 seconds, and then we'll stop the trace. When you click the button, it runs that performance trace in the background, and then you'll find data about that trace in the Firebase console. So performance is one thing, but if your app is crashing or throwing errors, that's an even bigger problem.

A few years ago, Firebase acquired Fabric from Twitter, and one of the key features in Fabric was Crashlytics. It's a service that allows you to detect errors that happen in your application in production. And that's really important because if a user downloads your app and it immediately throws an error, Well, what they're going to do is leave a bad review in the app store. Before we set up Crashlytics, I first want to warn you that the setup I'm showing you here might be slightly different than what you see in the official documentation. But I can tell you that as of today, the implementation I'm showing you here works.

To set it up on Android, we'll first wanna go to the Android directory to the build Gradle file. Under dependencies, you'll add the Firebase Crashlytics Gradle class path. Next, we'll go to the app level build Gradle file and first apply the plugin of Firebase Crashlytics and then we'll go down to our dependencies and add the implementation for Firebase Crashlytics. At this point, run the Flutter clean command to wipe out any cache data and then restart the application. In our source code, we'll implement Crashlytics and then we'll reference the Crashlytics instance and set enable dev mode to true.

Now, dev mode is really only intended to verify that Crashlytics reporting is working properly. So after you start getting reports in the dashboard, you can set that to false for most of your development. Now what we want to happen at this point is for Crashlytics to catch every error that's thrown by the Flutter framework, and we can handle that by listening to the Flutter error on error event, and that's basically all we need to do to get comprehensive error reporting across our entire app. For example, if we have a method that throws a Flutter error, we should see that error reported in Firebase after we click this button. If we go up to the Firebase dashboard, you may not see any error reports at first because by default, it filters everything by fatal errors.

But in the case of a Flutter app, everything is considered a non fatal error. When you click on an event, It will tell you how many users are affected by that event and how often it's happening and on what devices. In addition, it will tell you the line of code that's affected and provide a stack trace for the error so so you can immediately pinpoint where this is happening. I can tell you from experience that this data is extremely valuable. So many bad reviews on the app stores are related to uncaught errors and crashes.

If you do client work, you'll have a lot less anxiety knowing that you can catch things like this before they become a major issue. And speaking of catching things early, Firebase has yet another awesome feature called app distribution. This feature allows you to easily distribute and test both an iOS and Android app on real devices without having to jump through all the hoops on Google Play or Apple TestFlight. If you've ever released to the App Store before, then you know it takes 24 hours or more to get your app approved and there's a bunch of forms you have to fill out. It's just a really annoying process.

Allow me to demonstrate with Android. First, we'll run a production build for our app by running flutter build apk. That'll take a minute, and then you should see the app dot apk file in the build directory. From there, you can go to the Firebase console under app distribution and upload your APK there. Once uploaded, you can either create an invite link or you can set up testers and groups.

In this case, I'll just add hello at fireship I o as a tester. Then I can go back to the releases tab and distribute this app to the tester. The The tester should immediately get an email with instructions about how to run the app. And now something that would normally take the better part of a day now just takes a few seconds. At this point, we have a solid foundation for building a serious app, but there's one more bonus topic that I wanna show you, and that's setting up the Firebase Emulator Suite to have a mock database in your local environment so you don't have to create real data in the cloud when developing.

In the past, most Firebase developers would create multiple projects, one for development and one for production. However, managing multiple Firebase projects can be pretty tedious, and that's especially true for Flutter apps simply because you're targeting multiple platforms. Here's how we can use the Emulator Suite in our local project. 1st, install the Firebase command line tools. I'm using Node.

Js to do that. Next, I'm running Firebase init to connect our project to the cloud. The tool I'm interested in here is emulators. There are multiple emulators for things like Cloud Functions and Pub Sub, but for now, we'll just emulate the database, so we'll choose Firestore in this case. You can select the default options for everything else.

That gives us access to the Firebase emulators colon start command. If we follow the link to local host 4,000, you can see we have the Firestore emulator running and then it has a UI that's similar to what you would see on the Firebase console. The key difference is that the data in this database is stored on your local device. So you can safely create database records without incurring billing or polluting your production project. Now we just need to tell our Flutter source code to use this local data instead of the real Firestore database, and the way we do that is by modifying the settings on the Firestore plug in.

You can only do that after the widgets have been initialized. So you wanna put this code somewhere like a knit state when you know that the widget tree has been initialized. Cap. We'll want the host to point to our local instance of Firestore. If using an Android emulator, you'll want it to point to this IP address 10.0.

2 dot 2, but anywhere else, you should be able to just use local host 8080. From there, you can set the options for SSL and persistence to false. Now Now when we run the app, you'll notice that the data it uses is from the local Firestore instance and not the actual cloud that we pay for. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to even more Flutter Firebase content.

Thanks for watching, and I will see you in the next one.
Perfect tech stacks are rare in an imperfect world, but I think the Flutter Firebase stack is about as close as you can get. Today's tutorial is a setup guide for developers building a serious mobile app, Flutter and Firebase.
You'll learn the basic setup steps for iOS and Android, how to set up a local development environment using the new Firebase Emulator suite, then we'll implement analytics to understand our users, Crashlytics and performance to improve the quality of our app, and finally, we'll look at app distribution to test our builds before they get in the hands of actual users on the app stores. By the end of this video, you should have a solid foundation for building pretty much anything you can imagine with the Flutter Firestack. If anyone wants to develop an app with me, I'm down. We'll be starting this video with a basic setup, but if you wanna jump ahead to the fun stuff, check out the timestamps in the video description. Cap. As you can see here in Versus Code, I have a freshly generated Flutter app. If you're not sure how to get to this point, check out the official install instructions for Flutter.
video gaming
youtube
animation
software development
From there, we'll open up the pubspec YAML file and go to the dependencies section. Firebase maintains a variety of different plugins for Flutter. The only one that's actually required is Firebase core.
Everything else, you can just pick and choose as needed. Most apps will use Firestore as well as Firebase Auth, and I'm also including the Google sign in plugin to support that sign in method. From there, we have analytics, and we'll also throw in performance and Crashlytics. I'll explain what all these do in more detail throughout the video. In this demo, you'll notice I'm leaving the version numbers empty. However, it would be a good idea to peg these dependencies to a specific version just so they don't break when you update things.
software
google
You'll find the latest version for each plugin in the Firebase docs. That takes care of our initial Flutter setup. Now we need a Firebase project.
If you're brand new to Firebase, I'd recommend checking out my Firebase basics video. Oh, and by the way, if things are going too fast in this video, make sure to follow along with the full write up on Fireship IO that breaks everything down step by step. But at this point, we just need a project in the cloud that we can link to our front end app.
youtube
video gaming
Now it's time to configure this app for Android. From the settings tab in the Firebase console, we'll add a new Android app. Cap. We need to decide on a bundle ID, which is like a reverse domain name. So in my case, it would be io.fireship followed by the app name. The bundle ID needs to be unique and it will be shared across iOS and Android, so make sure to choose it carefully. Below that, you'll notice it gives us the option for an sha one certificate. Cap. It's technically optional. However, you will need one if you're using phone sign in or Google sign in on Android. Back in Versus Code, let's open up a terminal session and then we'll CD into the Android directory. There's a script in there that we can run to generate the sha one certificate for us.
That'll generate a bunch of output, and then at the bottom, you can find the SHA one certificate for the debug Android test variant. So go ahead and copy that and then paste it into the Firebase console. Go ahead and create the app, and then it will ask you to download the Google services JSON file. Download and save it into the Android app directory. This file contains your Firebase project information, so it can be identified by the Android app. From there, you can just click throughout the other steps, and then you should see your app created in the Firebase console.
google
Let's head back to Versus Code and find the Android build Gradle file. In the dependencies object, you'll wanna add a class path for the Google dependency of version 4.3.3. Then what's kind of confusing here is you have a second build.gradle file in the app directory. Go into that file and then add this line to apply the Google services plug in directly below the plug in for the Android application. Then moving down a few lines, you'll see a default config object. You'll want to update the application ID to use the bundle ID that you created in the Firebase console. And then one last thing that we'll do here that's optional, but might be an issue that you run into in the future is enable multidex. Firebase provides a lot of functionality, which means a lot of classes and methods in your code. MultiDex simply allows you to support a large number of references. So let's go ahead and enable it, and then we'll add it as a dependency down here at the bottom as well. And now we should be good to go with Android. Flutter Run should build your app without errors at this point. Now we're ready to move on to the iOS setup, which is a bit easier, especially if you're familiar with Xcode. In the Flutter project, in the iOS directory, you'll find an Xcode workspace file. Now go ahead and open up the project in Xcode. Keep in mind that you do need to have a Mac device in order to do this. However, there are ways to build Flutter apps for iOS without having a Mac. However, that's beyond the scope of this video. In the general settings, you'll want to go in and enter your bundle identifier.
Then under signing and certificates, you'll wanna go in there and make sure that you have a valid signing certificate for your Apple developer account. If you don't have 1 or not sure what that is, you can follow the official documentation on the Apple developer site. The next thing we'll do is go back to the Firebase console and this time add a new iOS app.
apple
This time, we just need to add a bundle ID and then it will give us an info dashplist file to download. Go ahead and open that file in finder and then drag it over to the runner slash runner directory in the Xcode project. At this point, you should be able to click the play button in code or run Flutter run from the command line and the app should build successfully. Now at this point, your app is good to go for both iOS and Android with the basic setup. Cap, but if you're building a serious app here that you plan on launching to the app stores, there's probably a few other Firebase features that you want to take advantage of.
The first one we'll look at is Firebase Analytics, which is just a proxy for Google Analytics. Basic usage of Google Analytics simply collects metadata about your users, like where they're located, what type of device they're using, what screens they view, and so on. Now this data by itself is very interesting to look at and provides a ton of insight about your users.
google
But the really awesome thing about Firebase is that you can easily take action based on this data. Here's an example. If you've ever used the Reddit app, you might notice that you start getting occasions based on a subreddit that you're interested in. You could do the same thing in your own app with Firebase by collecting analytics data about the topics users are interested in and then send notifications to that specific audience. You can even custom tailor the app experience at runtime using remote config and a bunch of other advanced stuff beyond that as well. The first thing you'll wanna do is make sure you have analytics enabled on the Firebase console if you didn't do it when you set up the initial project.
In our Flutter code, we'll then import the Firebase Analytics package and then declare a global variable for analytics. Then we can define that variable in our main function as an instance of Firebase Analytics. It will automatically start collecting some basic information about your users, but you can also add custom events to it as well. You'll notice on analytics but there's a bunch of built in methods and I recommend using these built in methods if they fit your needs. However, in many cases, you may just have your very own custom event, in which case you can call analytics log event with the name of the event and then some optional metadata that you want to collect beyond that.
data management
databases
programming
data
In this example here, I have this logic set up in a method so that every time we click this button here in the UI, it will log an analytics event. Now in this very simple app, we have one screen, but your app will likely have multiple screens with Flutter's navigator. In my full Flutter course on Fireship, we have multiple screens. And in order to easily track analytics for each screen, we have a navigation observer setup that automatically tracks every screen view as you can see here in the source code on GitHub. And that's just another really easy thing you'll wanna do that adds a lot of value to your code base.
visualization
animation
programming
artificial intelligence
Now let's move on to the next Firebase superpower, performance. Basically, it's a tool that allows you to measure the duration of time for different things that happen in your app. By default, it will measure the app startup time, but you can also set up your own custom traces for any logic in your code.
Now the awesome thing about this is that it collects and aggregates all this data over time. So if you have a certain trace that's running and and then suddenly that trace becomes much longer. It's going to create an issue for you automatically, and that means you can hopefully address it before it turns into bad reviews in the app stores.
mining
In addition, it's segmented by app version, country, and so on, allowing you to understand how this data trends over time. Including Firebase performance in your code will set up the automatic traces, and then we can set up our own custom trace in this method here. 1st, we create a new instance of a trace by calling Firebase performance instance, new trace, and give it a unique name. When we're ready to start it, we call the start method, and in this case, we'll await a future for 5 seconds, and then we'll stop the trace. When you click the button, it runs that performance trace in the background, and then you'll find data about that trace in the Firebase console.
So performance is one thing, but if your app is crashing or throwing errors, that's an even bigger problem. A few years ago, Firebase acquired Fabric from Twitter, and one of the key features in Fabric was Crashlytics. It's a service that allows you to detect errors that happen in your application in production. And that's really important because if a user downloads your app and it immediately throws an error, Well, what they're going to do is leave a bad review in the app store. Before we set up Crashlytics, I first want to warn you that the setup I'm showing you here might be slightly different than what you see in the official documentation.
software
But I can tell you that as of today, the implementation I'm showing you here works. To set it up on Android, we'll first wanna go to the Android directory to the build Gradle file. Under dependencies, you'll add the Firebase Crashlytics Gradle class path. Next, we'll go to the app level build Gradle file and first apply the plugin of Firebase Crashlytics and then we'll go down to our dependencies and add the implementation for Firebase Crashlytics. At this point, run the Flutter clean command to wipe out any cache data and then restart the application. In our source code, we'll implement Crashlytics and then we'll reference the Crashlytics instance and set enable dev mode to true. Now, dev mode is really only intended to verify that Crashlytics reporting is working properly. So after you start getting reports in the dashboard, you can set that to false for most of your development. Now what we want to happen at this point is for Crashlytics to catch every error that's thrown by the Flutter framework, and we can handle that by listening to the Flutter error on error event, and that's basically all we need to do to get comprehensive error reporting across our entire app. For example, if we have a method that throws a Flutter error, we should see that error reported in Firebase after we click this button. If we go up to the Firebase dashboard, you may not see any error reports at first because by default, it filters everything by fatal errors. But in the case of a Flutter app, everything is considered a non fatal error. When you click on an event, It will tell you how many users are affected by that event and how often it's happening and on what devices. In addition, it will tell you the line of code that's affected and provide a stack trace for the error so so you can immediately pinpoint where this is happening.
I can tell you from experience that this data is extremely valuable. So many bad reviews on the app stores are related to uncaught errors and crashes. If you do client work, you'll have a lot less anxiety knowing that you can catch things like this before they become a major issue.
customers
customer support
And speaking of catching things early, Firebase has yet another awesome feature called app distribution. This feature allows you to easily distribute and test both an iOS and Android app on real devices without having to jump through all the hoops on Google Play or Apple TestFlight. If you've ever released to the App Store before, then you know it takes 24 hours or more to get your app approved and there's a bunch of forms you have to fill out. It's just a really annoying process. Allow me to demonstrate with Android. First, we'll run a production build for our app by running flutter build apk. That'll take a minute, and then you should see the app dot apk file in the build directory. From there, you can go to the Firebase console under app distribution and upload your APK there. Once uploaded, you can either create an invite link or you can set up testers and groups. In this case, I'll just add hello at fireship I o as a tester. Then I can go back to the releases tab and distribute this app to the tester. The The tester should immediately get an email with instructions about how to run the app. And now something that would normally take the better part of a day now just takes a few seconds. At this point, we have a solid foundation for building a serious app, but there's one more bonus topic that I wanna show you, and that's setting up the Firebase Emulator Suite to have a mock database in your local environment so you don't have to create real data in the cloud when developing. In the past, most Firebase developers would create multiple projects, one for development and one for production. However, managing multiple Firebase projects can be pretty tedious, and that's especially true for Flutter apps simply because you're targeting multiple platforms. Here's how we can use the Emulator Suite in our local project. 1st, install the Firebase command line tools. I'm using Node. Js to do that.
Next, I'm running Firebase init to connect our project to the cloud. The tool I'm interested in here is emulators. There are multiple emulators for things like Cloud Functions and Pub Sub, but for now, we'll just emulate the database, so we'll choose Firestore in this case. You can select the default options for everything else.
software
That gives us access to the Firebase emulators colon start command. If we follow the link to local host 4,000, you can see we have the Firestore emulator running and then it has a UI that's similar to what you would see on the Firebase console.
The key difference is that the data in this database is stored on your local device. So you can safely create database records without incurring billing or polluting your production project. Now we just need to tell our Flutter source code to use this local data instead of the real Firestore database, and the way we do that is by modifying the settings on the Firestore plug in.
databases
data management
data
You can only do that after the widgets have been initialized. So you wanna put this code somewhere like a knit state when you know that the widget tree has been initialized. Cap. We'll want the host to point to our local instance of Firestore. If using an Android emulator, you'll want it to point to this IP address 10.0.
telecommunications
2 dot 2, but anywhere else, you should be able to just use local host 8080. From there, you can set the options for SSL and persistence to false.
Now Now when we run the app, you'll notice that the data it uses is from the local Firestore instance and not the actual cloud that we pay for. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to even more Flutter Firebase content. Thanks for watching, and I will see you in the next one.
streaming
youtube
Perfect tech stacks are rare in an imperfect world, but I think the Flutter Firebase stack is about as close as you can get. Today's tutorial is a setup guide for developers building a serious mobile app, Flutter and Firebase. You'll learn the basic setup steps for iOS and Android, how to set up a local development environment using the new Firebase Emulator suite, then we'll implement analytics to understand our users, Crashlytics and performance to improve the quality of our app, and finally, we'll look at app distribution to test our builds before they get in the hands of actual users on the app stores. By the end of this video, you should have a solid foundation for building pretty much anything you can imagine with the Flutter Firestack. If anyone wants to develop an app with me, I'm down. We'll be starting this video with a basic setup, but if you wanna jump ahead to the fun stuff, check out the timestamps in the video description. Cap. As you can see here in Versus Code, I have a freshly generated Flutter app. If you're not sure how to get to this point, check out the official install instructions for Flutter. From there, we'll open up the pubspec YAML file and go to the dependencies section. Firebase maintains a variety of different plugins for Flutter. The only one that's actually required is Firebase core. Everything else, you can just pick and choose as needed. Most apps will use Firestore as well as Firebase Auth, and I'm also including the Google sign in plugin to support that sign in method. From there, we have analytics, and we'll also throw in performance and Crashlytics. I'll explain what all these do in more detail throughout the video. In this demo, you'll notice I'm leaving the version numbers empty. However, it would be a good idea to peg these dependencies to a specific version just so they don't break when you update things. You'll find the latest version for each plugin in the Firebase docs. That takes care of our initial Flutter setup. Now we need a Firebase project. If you're brand new to Firebase, I'd recommend checking out my Firebase basics video. Oh, and by the way, if things are going too fast in this video, make sure to follow along with the full write up on Fireship IO that breaks everything down step by step. But at this point, we just need a project in the cloud that we can link to our front end app. Now it's time to configure this app for Android. From the settings tab in the Firebase console, we'll add a new Android app. Cap. We need to decide on a bundle ID, which is like a reverse domain name. So in my case, it would be io.fireship followed by the app name. The bundle ID needs to be unique and it will be shared across iOS and Android, so make sure to choose it carefully. Below that, you'll notice it gives us the option for an sha one certificate. Cap. It's technically optional. However, you will need one if you're using phone sign in or Google sign in on Android. Back in Versus Code, let's open up a terminal session and then we'll CD into the Android directory. There's a script in there that we can run to generate the sha one certificate for us. That'll generate a bunch of output, and then at the bottom, you can find the SHA one certificate for the debug Android test variant. So go ahead and copy that and then paste it into the Firebase console. Go ahead and create the app, and then it will ask you to download the Google services JSON file. Download and save it into the Android app directory. This file contains your Firebase project information, so it can be identified by the Android app. From there, you can just click throughout the other steps, and then you should see your app created in the Firebase console. Let's head back to Versus Code and find the Android build Gradle file. In the dependencies object, you'll wanna add a class path for the Google dependency of version 4.3.3. Then what's kind of confusing here is you have a second build.gradle file in the app directory. Go into that file and then add this line to apply the Google services plug in directly below the plug in for the Android application. Then moving down a few lines, you'll see a default config object. You'll want to update the application ID to use the bundle ID that you created in the Firebase console. And then one last thing that we'll do here that's optional, but might be an issue that you run into in the future is enable multidex. Firebase provides a lot of functionality, which means a lot of classes and methods in your code. MultiDex simply allows you to support a large number of references. So let's go ahead and enable it, and then we'll add it as a dependency down here at the bottom as well. And now we should be good to go with Android. Flutter Run should build your app without errors at this point. Now we're ready to move on to the iOS setup, which is a bit easier, especially if you're familiar with Xcode. In the Flutter project, in the iOS directory, you'll find an Xcode workspace file. Now go ahead and open up the project in Xcode. Keep in mind that you do need to have a Mac device in order to do this. However, there are ways to build Flutter apps for iOS without having a Mac. However, that's beyond the scope of this video. In the general settings, you'll want to go in and enter your bundle identifier. Then under signing and certificates, you'll wanna go in there and make sure that you have a valid signing certificate for your Apple developer account. If you don't have 1 or not sure what that is, you can follow the official documentation on the Apple developer site. The next thing we'll do is go back to the Firebase console and this time add a new iOS app. This time, we just need to add a bundle ID and then it will give us an info dashplist file to download. Go ahead and open that file in finder and then drag it over to the runner slash runner directory in the Xcode project. At this point, you should be able to click the play button in code or run Flutter run from the command line and the app should build successfully. Now at this point, your app is good to go for both iOS and Android with the basic setup. Cap, but if you're building a serious app here that you plan on launching to the app stores, there's probably a few other Firebase features that you want to take advantage of. The first one we'll look at is Firebase Analytics, which is just a proxy for Google Analytics. Basic usage of Google Analytics simply collects metadata about your users, like where they're located, what type of device they're using, what screens they view, and so on. Now this data by itself is very interesting to look at and provides a ton of insight about your users. But the really awesome thing about Firebase is that you can easily take action based on this data. Here's an example. If you've ever used the Reddit app, you might notice that you start getting occasions based on a subreddit that you're interested in. You could do the same thing in your own app with Firebase by collecting analytics data about the topics users are interested in and then send notifications to that specific audience. You can even custom tailor the app experience at runtime using remote config and a bunch of other advanced stuff beyond that as well. The first thing you'll wanna do is make sure you have analytics enabled on the Firebase console if you didn't do it when you set up the initial project. In our Flutter code, we'll then import the Firebase Analytics package and then declare a global variable for analytics. Then we can define that variable in our main function as an instance of Firebase Analytics. It will automatically start collecting some basic information about your users, but you can also add custom events to it as well. You'll notice on analytics but there's a bunch of built in methods and I recommend using these built in methods if they fit your needs. However, in many cases, you may just have your very own custom event, in which case you can call analytics log event with the name of the event and then some optional metadata that you want to collect beyond that. In this example here, I have this logic set up in a method so that every time we click this button here in the UI, it will log an analytics event. Now in this very simple app, we have one screen, but your app will likely have multiple screens with Flutter's navigator. In my full Flutter course on Fireship, we have multiple screens. And in order to easily track analytics for each screen, we have a navigation observer setup that automatically tracks every screen view as you can see here in the source code on GitHub. And that's just another really easy thing you'll wanna do that adds a lot of value to your code base. Now let's move on to the next Firebase superpower, performance. Basically, it's a tool that allows you to measure the duration of time for different things that happen in your app. By default, it will measure the app startup time, but you can also set up your own custom traces for any logic in your code. Now the awesome thing about this is that it collects and aggregates all this data over time. So if you have a certain trace that's running and and then suddenly that trace becomes much longer. It's going to create an issue for you automatically, and that means you can hopefully address it before it turns into bad reviews in the app stores. In addition, it's segmented by app version, country, and so on, allowing you to understand how this data trends over time. Including Firebase performance in your code will set up the automatic traces, and then we can set up our own custom trace in this method here. 1st, we create a new instance of a trace by calling Firebase performance instance, new trace, and give it a unique name. When we're ready to start it, we call the start method, and in this case, we'll await a future for 5 seconds, and then we'll stop the trace. When you click the button, it runs that performance trace in the background, and then you'll find data about that trace in the Firebase console. So performance is one thing, but if your app is crashing or throwing errors, that's an even bigger problem. A few years ago, Firebase acquired Fabric from Twitter, and one of the key features in Fabric was Crashlytics. It's a service that allows you to detect errors that happen in your application in production. And that's really important because if a user downloads your app and it immediately throws an error, Well, what they're going to do is leave a bad review in the app store. Before we set up Crashlytics, I first want to warn you that the setup I'm showing you here might be slightly different than what you see in the official documentation. But I can tell you that as of today, the implementation I'm showing you here works. To set it up on Android, we'll first wanna go to the Android directory to the build Gradle file. Under dependencies, you'll add the Firebase Crashlytics Gradle class path. Next, we'll go to the app level build Gradle file and first apply the plugin of Firebase Crashlytics and then we'll go down to our dependencies and add the implementation for Firebase Crashlytics. At this point, run the Flutter clean command to wipe out any cache data and then restart the application. In our source code, we'll implement Crashlytics and then we'll reference the Crashlytics instance and set enable dev mode to true. Now, dev mode is really only intended to verify that Crashlytics reporting is working properly. So after you start getting reports in the dashboard, you can set that to false for most of your development. Now what we want to happen at this point is for Crashlytics to catch every error that's thrown by the Flutter framework, and we can handle that by listening to the Flutter error on error event, and that's basically all we need to do to get comprehensive error reporting across our entire app. For example, if we have a method that throws a Flutter error, we should see that error reported in Firebase after we click this button. If we go up to the Firebase dashboard, you may not see any error reports at first because by default, it filters everything by fatal errors. But in the case of a Flutter app, everything is considered a non fatal error. When you click on an event, It will tell you how many users are affected by that event and how often it's happening and on what devices. In addition, it will tell you the line of code that's affected and provide a stack trace for the error so so you can immediately pinpoint where this is happening. I can tell you from experience that this data is extremely valuable. So many bad reviews on the app stores are related to uncaught errors and crashes. If you do client work, you'll have a lot less anxiety knowing that you can catch things like this before they become a major issue. And speaking of catching things early, Firebase has yet another awesome feature called app distribution. This feature allows you to easily distribute and test both an iOS and Android app on real devices without having to jump through all the hoops on Google Play or Apple TestFlight. If you've ever released to the App Store before, then you know it takes 24 hours or more to get your app approved and there's a bunch of forms you have to fill out. It's just a really annoying process. Allow me to demonstrate with Android. First, we'll run a production build for our app by running flutter build apk. That'll take a minute, and then you should see the app dot apk file in the build directory. From there, you can go to the Firebase console under app distribution and upload your APK there. Once uploaded, you can either create an invite link or you can set up testers and groups. In this case, I'll just add hello at fireship I o as a tester. Then I can go back to the releases tab and distribute this app to the tester. The The tester should immediately get an email with instructions about how to run the app. And now something that would normally take the better part of a day now just takes a few seconds. At this point, we have a solid foundation for building a serious app, but there's one more bonus topic that I wanna show you, and that's setting up the Firebase Emulator Suite to have a mock database in your local environment so you don't have to create real data in the cloud when developing. In the past, most Firebase developers would create multiple projects, one for development and one for production. However, managing multiple Firebase projects can be pretty tedious, and that's especially true for Flutter apps simply because you're targeting multiple platforms. Here's how we can use the Emulator Suite in our local project. 1st, install the Firebase command line tools. I'm using Node. Js to do that. Next, I'm running Firebase init to connect our project to the cloud. The tool I'm interested in here is emulators. There are multiple emulators for things like Cloud Functions and Pub Sub, but for now, we'll just emulate the database, so we'll choose Firestore in this case. You can select the default options for everything else. That gives us access to the Firebase emulators colon start command. If we follow the link to local host 4,000, you can see we have the Firestore emulator running and then it has a UI that's similar to what you would see on the Firebase console. The key difference is that the data in this database is stored on your local device. So you can safely create database records without incurring billing or polluting your production project. Now we just need to tell our Flutter source code to use this local data instead of the real Firestore database, and the way we do that is by modifying the settings on the Firestore plug in. You can only do that after the widgets have been initialized. So you wanna put this code somewhere like a knit state when you know that the widget tree has been initialized. Cap. We'll want the host to point to our local instance of Firestore. If using an Android emulator, you'll want it to point to this IP address 10.0. 2 dot 2, but anywhere else, you should be able to just use local host 8080. From there, you can set the options for SSL and persistence to false. Now Now when we run the app, you'll notice that the data it uses is from the local Firestore instance and not the actual cloud that we pay for. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to even more Flutter Firebase content. Thanks for watching, and I will see you in the next one.
Perfect
perfect
tech
tech
stacks
stacks
are
are
rare
rare
in
in
an
an
imperfect
imperfect
world,
world
but
but
I
i
think
think
the
the
Flutter
flutter
Firebase
firebase
stack
stack
is
is
about
about
as
as
close
close
as
as
you
you
can
can
get.
get
Today's
today's
tutorial
tutorial
is
is
a
a
setup
setup
guide
guide
for
for
developers
developers
building
building
a
a
serious
serious
mobile
mobile
app,
app
Flutter
flutter
and
and
Firebase.
firebase
You'll
you'll
learn
learn
the
the
basic
basic
setup
setup
steps
steps
for
for
iOS
ios
and
and
Android,
android
how
how
to
to
set
set
up
up
a
a
local
local
development
development
environment
environment
using
using
the
the
new
new
Firebase
firebase
Emulator
emulator
suite,
suite
then
then
we'll
we'll
implement
implement
analytics
analytics
to
to
understand
understand
our
our
users,
users
Crashlytics
crashlytics
and
and
performance
performance
to
to
improve
improve
the
the
quality
quality
of
of
our
our
app,
app
and
and
finally,
finally
we'll
we'll
look
look
at
at
app
app
distribution
distribution
to
to
test
test
our
our
builds
builds
before
before
they
they
get
get
in
in
the
the
hands
hands
of
of
actual
actual
users
users
on
on
the
the
app
app
stores.
stores
By
by
the
the
end
end
of
of
this
this
video,
video
you
you
should
should
have
have
a
a
solid
solid
foundation
foundation
for
for
building
building
pretty
pretty
much
much
anything
anything
you
you
can
can
imagine
imagine
with
with
the
the
Flutter
flutter
Firestack.
firestack
If
if
anyone
anyone
wants
wants
to
to
develop
develop
an
an
app
app
with
with
me,
me
I'm
i'm
down.
down
We'll
we'll
be
be
starting
starting
this
this
video
video
with
with
a
a
basic
basic
setup,
setup
but
but
if
if
you
you
wanna
wanna
jump
jump
ahead
ahead
to
to
the
the
fun
fun
stuff,
stuff
check
check
out
out
the
the
timestamps
timestamps
in
in
the
the
video
video
description.
description
Cap.
cap
As
as
you
you
can
can
see
see
here
here
in
in
Versus
versus
Code,
code
I
i
have
have
a
a
freshly
freshly
generated
generated
Flutter
flutter
app.
app
If
if
you're
you're
not
not
sure
sure
how
how
to
to
get
get
to
to
this
this
point,
point
check
check
out
out
the
the
official
official
install
install
instructions
instructions
for
for
Flutter.
flutter
From
from
there,
there
we'll
we'll
open
open
up
up
the
the
pubspec
pubspec
YAML
yaml
file
file
and
and
go
go
to
to
the
the
dependencies
dependencies
section.
section
Firebase
firebase
maintains
maintains
a
a
variety
variety
of
of
different
different
plugins
plugins
for
for
Flutter.
flutter
The
the
only
only
one
one
that's
that's
actually
actually
required
required
is
is
Firebase
firebase
core.
core
Everything
everything
else,
else
you
you
can
can
just
just
pick
pick
and
and
choose
choose
as
as
needed.
needed
Most
most
apps
apps
will
will
use
use
Firestore
firestore
as
as
well
well
as
as
Firebase
firebase
Auth,
auth
and
and
I'm
i'm
also
also
including
including
the
the
Google
google
sign
sign
in
in
plugin
plugin
to
to
support
support
that
that
sign
sign
in
in
method.
method
From
from
there,
there
we
we
have
have
analytics,
analytics
and
and
we'll
we'll
also
also
throw
throw
in
in
performance
performance
and
and
Crashlytics.
crashlytics
I'll
i'll
explain
explain
what
what
all
all
these
these
do
do
in
in
more
more
detail
detail
throughout
throughout
the
the
video.
video
In
in
this
this
demo,
demo
you'll
you'll
notice
notice
I'm
i'm
leaving
leaving
the
the
version
version
numbers
numbers
empty.
empty
However,
however
it
it
would
would
be
be
a
a
good
good
idea
idea
to
to
peg
peg
these
these
dependencies
dependencies
to
to
a
a
specific
specific
version
version
just
just
so
so
they
they
don't
don't
break
break
when
when
you
you
update
update
things.
things
You'll
you'll
find
find
the
the
latest
latest
version
version
for
for
each
each
plugin
plugin
in
in
the
the
Firebase
firebase
docs.
docs
That
that
takes
takes
care
care
of
of
our
our
initial
initial
Flutter
flutter
setup.
setup
Now
now
we
we
need
need
a
a
Firebase
firebase
project.
project
If
if
you're
you're
brand
brand
new
new
to
to
Firebase,
firebase
I'd
i'd
recommend
recommend
checking
checking
out
out
my
my
Firebase
firebase
basics
basics
video.
video
Oh,
oh
and
and
by
by
the
the
way,
way
if
if
things
things
are
are
going
going
too
too
fast
fast
in
in
this
this
video,
video
make
make
sure
sure
to
to
follow
follow
along
along
with
with
the
the
full
full
write
write
up
up
on
on
Fireship
fireship
IO
io
that
that
breaks
breaks
everything
everything
down
down
step
step
by
by
step.
step
But
but
at
at
this
this
point,
point
we
we
just
just
need
need
a
a
project
project
in
in
the
the
cloud
cloud
that
that
we
we
can
can
link
link
to
to
our
our
front
front
end
end
app.
app
Now
now
it's
it's
time
time
to
to
configure
configure
this
this
app
app
for
for
Android.
android
From
from
the
the
settings
settings
tab
tab
in
in
the
the
Firebase
firebase
console,
console
we'll
we'll
add
add
a
a
new
new
Android
android
app.
app
Cap.
cap
We
we
need
need
to
to
decide
decide
on
on
a
a
bundle
bundle
ID,
id
which
which
is
is
like
like
a
a
reverse
reverse
domain
domain
name.
name
So
so
in
in
my
my
case,
case
it
it
would
would
be
be
io.fireship
io.fireship
followed
followed
by
by
the
the
app
app
name.
name
The
the
bundle
bundle
ID
id
needs
needs
to
to
be
be
unique
unique
and
and
it
it
will
will
be
be
shared
shared
across
across
iOS
ios
and
and
Android,
android
so
so
make
make
sure
sure
to
to
choose
choose
it
it
carefully.
carefully
Below
below
that,
that
you'll
you'll
notice
notice
it
it
gives
gives
us
us
the
the
option
option
for
for
an
an
sha
sha
one
one
certificate.
certificate
Cap.
cap
It's
it's
technically
technically
optional.
optional
However,
however
you
you
will
will
need
need
one
one
if
if
you're
you're
using
using
phone
phone
sign
sign
in
in
or
or
Google
google
sign
sign
in
in
on
on
Android.
android
Back
back
in
in
Versus
versus
Code,
code
let's
let's
open
open
up
up
a
a
terminal
terminal
session
session
and
and
then
then
we'll
we'll
CD
cd
into
into
the
the
Android
android
directory.
directory
There's
there's
a
a
script
script
in
in
there
there
that
that
we
we
can
can
run
run
to
to
generate
generate
the
the
sha
sha
one
one
certificate
certificate
for
for
us.
us
That'll
that'll
generate
generate
a
a
bunch
bunch
of
of
output,
output
and
and
then
then
at
at
the
the
bottom,
bottom
you
you
can
can
find
find
the
the
SHA
sha
one
one
certificate
certificate
for
for
the
the
debug
debug
Android
android
test
test
variant.
variant
So
so
go
go
ahead
ahead
and
and
copy
copy
that
that
and
and
then
then
paste
paste
it
it
into
into
the
the
Firebase
firebase
console.
console
Go
go
ahead
ahead
and
and
create
create
the
the
app,
app
and
and
then
then
it
it
will
will
ask
ask
you
you
to
to
download
download
the
the
Google
google
services
services
JSON
json
file.
file
Download
download
and
and
save
save
it
it
into
into
the
the
Android
android
app
app
directory.
directory
This
this
file
file
contains
contains
your
your
Firebase
firebase
project
project
information,
information
so
so
it
it
can
can
be
be
identified
identified
by
by
the
the
Android
android
app.
app
From
from
there,
there
you
you
can
can
just
just
click
click
throughout
throughout
the
the
other
other
steps,
steps
and
and
then
then
you
you
should
should
see
see
your
your
app
app
created
created
in
in
the
the
Firebase
firebase
console.
console
Let's
let's
head
head
back
back
to
to
Versus
versus
Code
code
and
and
find
find
the
the
Android
android
build
build
Gradle
gradle
file.
file
In
in
the
the
dependencies
dependencies
object,
object
you'll
you'll
wanna
wanna
add
add
a
a
class
class
path
path
for
for
the
the
Google
google
dependency
dependency
of
of
version
version
4.3.3.
4.3.3
Then
then
what's
what's
kind
kind
of
of
confusing
confusing
here
here
is
is
you
you
have
have
a
a
second
second
build.gradle
build.gradle
file
file
in
in
the
the
app
app
directory.
directory
Go
go
into
into
that
that
file
file
and
and
then
then
add
add
this
this
line
line
to
to
apply
apply
the
the
Google
google
services
services
plug
plug
in
in
directly
directly
below
below
the
the
plug
plug
in
in
for
for
the
the
Android
android
application.
application
Then
then
moving
moving
down
down
a
a
few
few
lines,
lines
you'll
you'll
see
see
a
a
default
default
config
config
object.
object
You'll
you'll
want
want
to
to
update
update
the
the
application
application
ID
id
to
to
use
use
the
the
bundle
bundle
ID
id
that
that
you
you
created
created
in
in
the
the
Firebase
firebase
console.
console
And
and
then
then
one
one
last
last
thing
thing
that
that
we'll
we'll
do
do
here
here
that's
that's
optional,
optional
but
but
might
might
be
be
an
an
issue
issue
that
that
you
you
run
run
into
into
in
in
the
the
future
future
is
is
enable
enable
multidex.
multidex
Firebase
firebase
provides
provides
a
a
lot
lot
of
of
functionality,
functionality
which
which
means
means
a
a
lot
lot
of
of
classes
classes
and
and
methods
methods
in
in
your
your
code.
code
MultiDex
multidex
simply
simply
allows
allows
you
you
to
to
support
support
a
a
large
large
number
number
of
of
references.
references
So
so
let's
let's
go
go
ahead
ahead
and
and
enable
enable
it,
it
and
and
then
then
we'll
we'll
add
add
it
it
as
as
a
a
dependency
dependency
down
down
here
here
at
at
the
the
bottom
bottom
as
as
well.
well
And
and
now
now
we
we
should
should
be
be
good
good
to
to
go
go
with
with
Android.
android
Flutter
flutter
Run
run
should
should
build
build
your
your
app
app
without
without
errors
errors
at
at
this
this
point.
point
Now
now
we're
we're
ready
ready
to
to
move
move
on
on
to
to
the
the
iOS
ios
setup,
setup
which
which
is
is
a
a
bit
bit
easier,
easier
especially
especially
if
if
you're
you're
familiar
familiar
with
with
Xcode.
xcode
In
in
the
the
Flutter
flutter
project,
project
in
in
the
the
iOS
ios
directory,
directory
you'll
you'll
find
find
an
an
Xcode
xcode
workspace
workspace
file.
file
Now
now
go
go
ahead
ahead
and
and
open
open
up
up
the
the
project
project
in
in
Xcode.
xcode
Keep
keep
in
in
mind
mind
that
that
you
you
do
do
need
need
to
to
have
have
a
a
Mac
mac
device
device
in
in
order
order
to
to
do
do
this.
this
However,
however
there
there
are
are
ways
ways
to
to
build
build
Flutter
flutter
apps
apps
for
for
iOS
ios
without
without
having
having
a
a
Mac.
mac
However,
however
that's
that's
beyond
beyond
the
the
scope
scope
of
of
this
this
video.
video
In
in
the
the
general
general
settings,
settings
you'll
you'll
want
want
to
to
go
go
in
in
and
and
enter
enter
your
your
bundle
bundle
identifier.
identifier
Then
then
under
under
signing
signing
and
and
certificates,
certificates
you'll
you'll
wanna
wanna
go
go
in
in
there
there
and
and
make
make
sure
sure
that
that
you
you
have
have
a
a
valid
valid
signing
signing
certificate
certificate
for
for
your
your
Apple
apple
developer
developer
account.
account
If
if
you
you
don't
don't
have
have
1
1
or
or
not
not
sure
sure
what
what
that
that
is,
is
you
you
can
can
follow
follow
the
the
official
official
documentation
documentation
on
on
the
the
Apple
apple
developer
developer
site.
site
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
go
go
back
back
to
to
the
the
Firebase
firebase
console
console
and
and
this
this
time
time
add
add
a
a
new
new
iOS
ios
app.
app
This
this
time,
time
we
we
just
just
need
need
to
to
add
add
a
a
bundle
bundle
ID
id
and
and
then
then
it
it
will
will
give
give
us
us
an
an
info
info
dashplist
dashplist
file
file
to
to
download.
download
Go
go
ahead
ahead
and
and
open
open
that
that
file
file
in
in
finder
finder
and
and
then
then
drag
drag
it
it
over
over
to
to
the
the
runner
runner
slash
slash
runner
runner
directory
directory
in
in
the
the
Xcode
xcode
project.
project
At
at
this
this
point,
point
you
you
should
should
be
be
able
able
to
to
click
click
the
the
play
play
button
button
in
in
code
code
or
or
run
run
Flutter
flutter
run
run
from
from
the
the
command
command
line
line
and
and
the
the
app
app
should
should
build
build
successfully.
successfully
Now
now
at
at
this
this
point,
point
your
your
app
app
is
is
good
good
to
to
go
go
for
for
both
both
iOS
ios
and
and
Android
android
with
with
the
the
basic
basic
setup.
setup
Cap,
cap
but
but
if
if
you're
you're
building
building
a
a
serious
serious
app
app
here
here
that
that
you
you
plan
plan
on
on
launching
launching
to
to
the
the
app
app
stores,
stores
there's
there's
probably
probably
a
a
few
few
other
other
Firebase
firebase
features
features
that
that
you
you
want
want
to
to
take
take
advantage
advantage
of.
of
The
the
first
first
one
one
we'll
we'll
look
look
at
at
is
is
Firebase
firebase
Analytics,
analytics
which
which
is
is
just
just
a
a
proxy
proxy
for
for
Google
google
Analytics.
analytics
Basic
basic
usage
usage
of
of
Google
google
Analytics
analytics
simply
simply
collects
collects
metadata
metadata
about
about
your
your
users,
users
like
like
where
where
they're
they're
located,
located
what
what
type
type
of
of
device
device
they're
they're
using,
using
what
what
screens
screens
they
they
view,
view
and
and
so
so
on.
on
Now
now
this
this
data
data
by
by
itself
itself
is
is
very
very
interesting
interesting
to
to
look
look
at
at
and
and
provides
provides
a
a
ton
ton
of
of
insight
insight
about
about
your
your
users.
users
But
but
the
the
really
really
awesome
awesome
thing
thing
about
about
Firebase
firebase
is
is
that
that
you
you
can
can
easily
easily
take
take
action
action
based
based
on
on
this
this
data.
data
Here's
here's
an
an
example.
example
If
if
you've
you've
ever
ever
used
used
the
the
Reddit
reddit
app,
app
you
you
might
might
notice
notice
that
that
you
you
start
start
getting
getting
occasions
occasions
based
based
on
on
a
a
subreddit
subreddit
that
that
you're
you're
interested
interested
in.
in
You
you
could
could
do
do
the
the
same
same
thing
thing
in
in
your
your
own
own
app
app
with
with
Firebase
firebase
by
by
collecting
collecting
analytics
analytics
data
data
about
about
the
the
topics
topics
users
users
are
are
interested
interested
in
in
and
and
then
then
send
send
notifications
notifications
to
to
that
that
specific
specific
audience.
audience
You
you
can
can
even
even
custom
custom
tailor
tailor
the
the
app
app
experience
experience
at
at
runtime
runtime
using
using
remote
remote
config
config
and
and
a
a
bunch
bunch
of
of
other
other
advanced
advanced
stuff
stuff
beyond
beyond
that
that
as
as
well.
well
The
the
first
first
thing
thing
you'll
you'll
wanna
wanna
do
do
is
is
make
make
sure
sure
you
you
have
have
analytics
analytics
enabled
enabled
on
on
the
the
Firebase
firebase
console
console
if
if
you
you
didn't
didn't
do
do
it
it
when
when
you
you
set
set
up
up
the
the
initial
initial
project.
project
In
in
our
our
Flutter
flutter
code,
code
we'll
we'll
then
then
import
import
the
the
Firebase
firebase
Analytics
analytics
package
package
and
and
then
then
declare
declare
a
a
global
global
variable
variable
for
for
analytics.
analytics
Then
then
we
we
can
can
define
define
that
that
variable
variable
in
in
our
our
main
main
function
function
as
as
an
an
instance
instance
of
of
Firebase
firebase
Analytics.
analytics
It
it
will
will
automatically
automatically
start
start
collecting
collecting
some
some
basic
basic
information
information
about
about
your
your
users,
users
but
but
you
you
can
can
also
also
add
add
custom
custom
events
events
to
to
it
it
as
as
well.
well
You'll
you'll
notice
notice
on
on
analytics
analytics
but
but
there's
there's
a
a
bunch
bunch
of
of
built
built
in
in
methods
methods
and
and
I
i
recommend
recommend
using
using
these
these
built
built
in
in
methods
methods
if
if
they
they
fit
fit
your
your
needs.
needs
However,
however
in
in
many
many
cases,
cases
you
you
may
may
just
just
have
have
your
your
very
very
own
own
custom
custom
event,
event
in
in
which
which
case
case
you
you
can
can
call
call
analytics
analytics
log
log
event
event
with
with
the
the
name
name
of
of
the
the
event
event
and
and
then
then
some
some
optional
optional
metadata
metadata
that
that
you
you
want
want
to
to
collect
collect
beyond
beyond
that.
that
In
in
this
this
example
example
here,
here
I
i
have
have
this
this
logic
logic
set
set
up
up
in
in
a
a
method
method
so
so
that
that
every
every
time
time
we
we
click
click
this
this
button
button
here
here
in
in
the
the
UI,
ui
it
it
will
will
log
log
an
an
analytics
analytics
event.
event
Now
now
in
in
this
this
very
very
simple
simple
app,
app
we
we
have
have
one
one
screen,
screen
but
but
your
your
app
app
will
will
likely
likely
have
have
multiple
multiple
screens
screens
with
with
Flutter's
flutter's
navigator.
navigator
In
in
my
my
full
full
Flutter
flutter
course
course
on
on
Fireship,
fireship
we
we
have
have
multiple
multiple
screens.
screens
And
and
in
in
order
order
to
to
easily
easily
track
track
analytics
analytics
for
for
each
each
screen,
screen
we
we
have
have
a
a
navigation
navigation
observer
observer
setup
setup
that
that
automatically
automatically
tracks
tracks
every
every
screen
screen
view
view
as
as
you
you
can
can
see
see
here
here
in
in
the
the
source
source
code
code
on
on
GitHub.
github
And
and
that's
that's
just
just
another
another
really
really
easy
easy
thing
thing
you'll
you'll
wanna
wanna
do
do
that
that
adds
adds
a
a
lot
lot
of
of
value
value
to
to
your
your
code
code
base.
base
Now
now
let's
let's
move
move
on
on
to
to
the
the
next
next
Firebase
firebase
superpower,
superpower
performance.
performance
Basically,
basically
it's
it's
a
a
tool
tool
that
that
allows
allows
you
you
to
to
measure
measure
the
the
duration
duration
of
of
time
time
for
for
different
different
things
things
that
that
happen
happen
in
in
your
your
app.
app
By
by
default,
default
it
it
will
will
measure
measure
the
the
app
app
startup
startup
time,
time
but
but
you
you
can
can
also
also
set
set
up
up
your
your
own
own
custom
custom
traces
traces
for
for
any
any
logic
logic
in
in
your
your
code.
code
Now
now
the
the
awesome
awesome
thing
thing
about
about
this
this
is
is
that
that
it
it
collects
collects
and
and
aggregates
aggregates
all
all
this
this
data
data
over
over
time.
time
So
so
if
if
you
you
have
have
a
a
certain
certain
trace
trace
that's
that's
running
running
and
and
and
and
then
then
suddenly
suddenly
that
that
trace
trace
becomes
becomes
much
much
longer.
longer
It's
it's
going
going
to
to
create
create
an
an
issue
issue
for
for
you
you
automatically,
automatically
and
and
that
that
means
means
you
you
can
can
hopefully
hopefully
address
address
it
it
before
before
it
it
turns
turns
into
into
bad
bad
reviews
reviews
in
in
the
the
app
app
stores.
stores
In
in
addition,
addition
it's
it's
segmented
segmented
by
by
app
app
version,
version
country,
country
and
and
so
so
on,
on
allowing
allowing
you
you
to
to
understand
understand
how
how
this
this
data
data
trends
trends
over
over
time.
time
Including
including
Firebase
firebase
performance
performance
in
in
your
your
code
code
will
will
set
set
up
up
the
the
automatic
automatic
traces,
traces
and
and
then
then
we
we
can
can
set
set
up
up
our
our
own
own
custom
custom
trace
trace
in
in
this
this
method
method
here.
here
1st,
1st
we
we
create
create
a
a
new
new
instance
instance
of
of
a
a
trace
trace
by
by
calling
calling
Firebase
firebase
performance
performance
instance,
instance
new
new
trace,
trace
and
and
give
give
it
it
a
a
unique
unique
name.
name
When
when
we're
we're
ready
ready
to
to
start
start
it,
it
we
we
call
call
the
the
start
start
method,
method
and
and
in
in
this
this
case,
case
we'll
we'll
await
await
a
a
future
future
for
for
5
5
seconds,
seconds
and
and
then
then
we'll
we'll
stop
stop
the
the
trace.
trace
When
when
you
you
click
click
the
the
button,
button
it
it
runs
runs
that
that
performance
performance
trace
trace
in
in
the
the
background,
background
and
and
then
then
you'll
you'll
find
find
data
data
about
about
that
that
trace
trace
in
in
the
the
Firebase
firebase
console.
console
So
so
performance
performance
is
is
one
one
thing,
thing
but
but
if
if
your
your
app
app
is
is
crashing
crashing
or
or
throwing
throwing
errors,
errors
that's
that's
an
an
even
even
bigger
bigger
problem.
problem
A
a
few
few
years
years
ago,
ago
Firebase
firebase
acquired
acquired
Fabric
fabric
from
from
Twitter,
twitter
and
and
one
one
of
of
the
the
key
key
features
features
in
in
Fabric
fabric
was
was
Crashlytics.
crashlytics
It's
it's
a
a
service
service
that
that
allows
allows
you
you
to
to
detect
detect
errors
errors
that
that
happen
happen
in
in
your
your
application
application
in
in
production.
production
And
and
that's
that's
really
really
important
important
because
because
if
if
a
a
user
user
downloads
downloads
your
your
app
app
and
and
it
it
immediately
immediately
throws
throws
an
an
error,
error
Well,
well
what
what
they're
they're
going
going
to
to
do
do
is
is
leave
leave
a
a
bad
bad
review
review
in
in
the
the
app
app
store.
store
Before
before
we
we
set
set
up
up
Crashlytics,
crashlytics
I
i
first
first
want
want
to
to
warn
warn
you
you
that
that
the
the
setup
setup
I'm
i'm
showing
showing
you
you
here
here
might
might
be
be
slightly
slightly
different
different
than
than
what
what
you
you
see
see
in
in
the
the
official
official
documentation.
documentation
But
but
I
i
can
can
tell
tell
you
you
that
that
as
as
of
of
today,
today
the
the
implementation
implementation
I'm
i'm
showing
showing
you
you
here
here
works.
works
To
to
set
set
it
it
up
up
on
on
Android,
android
we'll
we'll
first
first
wanna
wanna
go
go
to
to
the
the
Android
android
directory
directory
to
to
the
the
build
build
Gradle
gradle
file.
file
Under
under
dependencies,
dependencies
you'll
you'll
add
add
the
the
Firebase
firebase
Crashlytics
crashlytics
Gradle
gradle
class
class
path.
path
Next,
next
we'll
we'll
go
go
to
to
the
the
app
app
level
level
build
build
Gradle
gradle
file
file
and
and
first
first
apply
apply
the
the
plugin
plugin
of
of
Firebase
firebase
Crashlytics
crashlytics
and
and
then
then
we'll
we'll
go
go
down
down
to
to
our
our
dependencies
dependencies
and
and
add
add
the
the
implementation
implementation
for
for
Firebase
firebase
Crashlytics.
crashlytics
At
at
this
this
point,
point
run
run
the
the
Flutter
flutter
clean
clean
command
command
to
to
wipe
wipe
out
out
any
any
cache
cache
data
data
and
and
then
then
restart
restart
the
the
application.
application
In
in
our
our
source
source
code,
code
we'll
we'll
implement
implement
Crashlytics
crashlytics
and
and
then
then
we'll
we'll
reference
reference
the
the
Crashlytics
crashlytics
instance
instance
and
and
set
set
enable
enable
dev
dev
mode
mode
to
to
true.
true
Now,
now
dev
dev
mode
mode
is
is
really
really
only
only
intended
intended
to
to
verify
verify
that
that
Crashlytics
crashlytics
reporting
reporting
is
is
working
working
properly.
properly
So
so
after
after
you
you
start
start
getting
getting
reports
reports
in
in
the
the
dashboard,
dashboard
you
you
can
can
set
set
that
that
to
to
false
false
for
for
most
most
of
of
your
your
development.
development
Now
now
what
what
we
we
want
want
to
to
happen
happen
at
at
this
this
point
point
is
is
for
for
Crashlytics
crashlytics
to
to
catch
catch
every
every
error
error
that's
that's
thrown
thrown
by
by
the
the
Flutter
flutter
framework,
framework
and
and
we
we
can
can
handle
handle
that
that
by
by
listening
listening
to
to
the
the
Flutter
flutter
error
error
on
on
error
error
event,
event
and
and
that's
that's
basically
basically
all
all
we
we
need
need
to
to
do
do
to
to
get
get
comprehensive
comprehensive
error
error
reporting
reporting
across
across
our
our
entire
entire
app.
app
For
for
example,
example
if
if
we
we
have
have
a
a
method
method
that
that
throws
throws
a
a
Flutter
flutter
error,
error
we
we
should
should
see
see
that
that
error
error
reported
reported
in
in
Firebase
firebase
after
after
we
we
click
click
this
this
button.
button
If
if
we
we
go
go
up
up
to
to
the
the
Firebase
firebase
dashboard,
dashboard
you
you
may
may
not
not
see
see
any
any
error
error
reports
reports
at
at
first
first
because
because
by
by
default,
default
it
it
filters
filters
everything
everything
by
by
fatal
fatal
errors.
errors
But
but
in
in
the
the
case
case
of
of
a
a
Flutter
flutter
app,
app
everything
everything
is
is
considered
considered
a
a
non
non
fatal
fatal
error.
error
When
when
you
you
click
click
on
on
an
an
event,
event
It
it
will
will
tell
tell
you
you
how
how
many
many
users
users
are
are
affected
affected
by
by
that
that
event
event
and
and
how
how
often
often
it's
it's
happening
happening
and
and
on
on
what
what
devices.
devices
In
in
addition,
addition
it
it
will
will
tell
tell
you
you
the
the
line
line
of
of
code
code
that's
that's
affected
affected
and
and
provide
provide
a
a
stack
stack
trace
trace
for
for
the
the
error
error
so
so
so
so
you
you
can
can
immediately
immediately
pinpoint
pinpoint
where
where
this
this
is
is
happening.
happening
I
i
can
can
tell
tell
you
you
from
from
experience
experience
that
that
this
this
data
data
is
is
extremely
extremely
valuable.
valuable
So
so
many
many
bad
bad
reviews
reviews
on
on
the
the
app
app
stores
stores
are
are
related
related
to
to
uncaught
uncaught
errors
errors
and
and
crashes.
crashes
If
if
you
you
do
do
client
client
work,
work
you'll
you'll
have
have
a
a
lot
lot
less
less
anxiety
anxiety
knowing
knowing
that
that
you
you
can
can
catch
catch
things
things
like
like
this
this
before
before
they
they
become
become
a
a
major
major
issue.
issue
And
and
speaking
speaking
of
of
catching
catching
things
things
early,
early
Firebase
firebase
has
has
yet
yet
another
another
awesome
awesome
feature
feature
called
called
app
app
distribution.
distribution
This
this
feature
feature
allows
allows
you
you
to
to
easily
easily
distribute
distribute
and
and
test
test
both
both
an
an
iOS
ios
and
and
Android
android
app
app
on
on
real
real
devices
devices
without
without
having
having
to
to
jump
jump
through
through
all
all
the
the
hoops
hoops
on
on
Google
google
Play
play
or
or
Apple
apple
TestFlight.
testflight
If
if
you've
you've
ever
ever
released
released
to
to
the
the
App
app
Store
store
before,
before
then
then
you
you
know
know
it
it
takes
takes
24
24
hours
hours
or
or
more
more
to
to
get
get
your
your
app
app
approved
approved
and
and
there's
there's
a
a
bunch
bunch
of
of
forms
forms
you
you
have
have
to
to
fill
fill
out.
out
It's
it's
just
just
a
a
really
really
annoying
annoying
process.
process
Allow
allow
me
me
to
to
demonstrate
demonstrate
with
with
Android.
android
First,
first
we'll
we'll
run
run
a
a
production
production
build
build
for
for
our
our
app
app
by
by
running
running
flutter
flutter
build
build
apk.
apk
That'll
that'll
take
take
a
a
minute,
minute
and
and
then
then
you
you
should
should
see
see
the
the
app
app
dot
dot
apk
apk
file
file
in
in
the
the
build
build
directory.
directory
From
from
there,
there
you
you
can
can
go
go
to
to
the
the
Firebase
firebase
console
console
under
under
app
app
distribution
distribution
and
and
upload
upload
your
your
APK
apk
there.
there
Once
once
uploaded,
uploaded
you
you
can
can
either
either
create
create
an
an
invite
invite
link
link
or
or
you
you
can
can
set
set
up
up
testers
testers
and
and
groups.
groups
In
in
this
this
case,
case
I'll
i'll
just
just
add
add
hello
hello
at
at
fireship
fireship
I
i
o
o
as
as
a
a
tester.
tester
Then
then
I
i
can
can
go
go
back
back
to
to
the
the
releases
releases
tab
tab
and
and
distribute
distribute
this
this
app
app
to
to
the
the
tester.
tester
The
the
The
the
tester
tester
should
should
immediately
immediately
get
get
an
an
email
email
with
with
instructions
instructions
about
about
how
how
to
to
run
run
the
the
app.
app
And
and
now
now
something
something
that
that
would
would
normally
normally
take
take
the
the
better
better
part
part
of
of
a
a
day
day
now
now
just
just
takes
takes
a
a
few
few
seconds.
seconds
At
at
this
this
point,
point
we
we
have
have
a
a
solid
solid
foundation
foundation
for
for
building
building
a
a
serious
serious
app,
app
but
but
there's
there's
one
one
more
more
bonus
bonus
topic
topic
that
that
I
i
wanna
wanna
show
show
you,
you
and
and
that's
that's
setting
setting
up
up
the
the
Firebase
firebase
Emulator
emulator
Suite
suite
to
to
have
have
a
a
mock
mock
database
database
in
in
your
your
local
local
environment
environment
so
so
you
you
don't
don't
have
have
to
to
create
create
real
real
data
data
in
in
the
the
cloud
cloud
when
when
developing.
developing
In
in
the
the
past,
past
most
most
Firebase
firebase
developers
developers
would
would
create
create
multiple
multiple
projects,
projects
one
one
for
for
development
development
and
and
one
one
for
for
production.
production
However,
however
managing
managing
multiple
multiple
Firebase
firebase
projects
projects
can
can
be
be
pretty
pretty
tedious,
tedious
and
and
that's
that's
especially
especially
true
true
for
for
Flutter
flutter
apps
apps
simply
simply
because
because
you're
you're
targeting
targeting
multiple
multiple
platforms.
platforms
Here's
here's
how
how
we
we
can
can
use
use
the
the
Emulator
emulator
Suite
suite
in
in
our
our
local
local
project.
project
1st,
1st
install
install
the
the
Firebase
firebase
command
command
line
line
tools.
tools
I'm
i'm
using
using
Node.
node
Js
js
to
to
do
do
that.
that
Next,
next
I'm
i'm
running
running
Firebase
firebase
init
init
to
to
connect
connect
our
our
project
project
to
to
the
the
cloud.
cloud
The
the
tool
tool
I'm
i'm
interested
interested
in
in
here
here
is
is
emulators.
emulators
There
there
are
are
multiple
multiple
emulators
emulators
for
for
things
things
like
like
Cloud
cloud
Functions
functions
and
and
Pub
pub
Sub,
sub
but
but
for
for
now,
now
we'll
we'll
just
just
emulate
emulate
the
the
database,
database
so
so
we'll
we'll
choose
choose
Firestore
firestore
in
in
this
this
case.
case
You
you
can
can
select
select
the
the
default
default
options
options
for
for
everything
everything
else.
else
That
that
gives
gives
us
us
access
access
to
to
the
the
Firebase
firebase
emulators
emulators
colon
colon
start
start
command.
command
If
if
we
we
follow
follow
the
the
link
link
to
to
local
local
host
host
4,000,
4,000
you
you
can
can
see
see
we
we
have
have
the
the
Firestore
firestore
emulator
emulator
running
running
and
and
then
then
it
it
has
has
a
a
UI
ui
that's
that's
similar
similar
to
to
what
what
you
you
would
would
see
see
on
on
the
the
Firebase
firebase
console.
console
The
the
key
key
difference
difference
is
is
that
that
the
the
data
data
in
in
this
this
database
database
is
is
stored
stored
on
on
your
your
local
local
device.
device
So
so
you
you
can
can
safely
safely
create
create
database
database
records
records
without
without
incurring
incurring
billing
billing
or
or
polluting
polluting
your
your
production
production
project.
project
Now
now
we
we
just
just
need
need
to
to
tell
tell
our
our
Flutter
flutter
source
source
code
code
to
to
use
use
this
this
local
local
data
data
instead
instead
of
of
the
the
real
real
Firestore
firestore
database,
database
and
and
the
the
way
way
we
we
do
do
that
that
is
is
by
by
modifying
modifying
the
the
settings
settings
on
on
the
the
Firestore
firestore
plug
plug
in.
in
You
you
can
can
only
only
do
do
that
that
after
after
the
the
widgets
widgets
have
have
been
been
initialized.
initialized
So
so
you
you
wanna
wanna
put
put
this
this
code
code
somewhere
somewhere
like
like
a
a
knit
knit
state
state
when
when
you
you
know
know
that
that
the
the
widget
widget
tree
tree
has
has
been
been
initialized.
initialized
Cap.
cap
We'll
we'll
want
want
the
the
host
host
to
to
point
point
to
to
our
our
local
local
instance
instance
of
of
Firestore.
firestore
If
if
using
using
an
an
Android
android
emulator,
emulator
you'll
you'll
want
want
it
it
to
to
point
point
to
to
this
this
IP
ip
address
address
10.0.
10.0
2
2
dot
dot
2,
2
but
but
anywhere
anywhere
else,
else
you
you
should
should
be
be
able
able
to
to
just
just
use
use
local
local
host
host
8080.
8080
From
from
there,
there
you
you
can
can
set
set
the
the
options
options
for
for
SSL
ssl
and
and
persistence
persistence
to
to
false.
false
Now
now
Now
now
when
when
we
we
run
run
the
the
app,
app
you'll
you'll
notice
notice
that
that
the
the
data
data
it
it
uses
uses
is
is
from
from
the
the
local
local
Firestore
firestore
instance
instance
and
and
not
not
the
the
actual
actual
cloud
cloud
that
that
we
we
pay
pay
for.
for
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO
io
to
to
get
get
access
access
to
to
even
even
more
more
Flutter
flutter
Firebase
firebase
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The Flutteriva stack is recommended for developers to build a serious mobile app and set up local development environments. Flutter app setup for Android and iOS is discussed, including the need for a project in the cloud and enabling the Flutter Run app and adding a class path for the Google dependency. The speaker emphasizes the importance of testing app performance and creating a trace for it, as well as the use of using volatile and custom events to collect analytics data and set up analytics logs. The speaker also provides instructions on how to use the Emulator Suite in local projects and adjust settings for SSL and persistence.
Flutter Firebase Setup for Power Users
Perfect tech stacks are rare in an imperfect world, but I think the Flutter Firebase stack is about as close as you can get. Today's tutorial is a setup guide for developers building a serious mobile app, Flutter and Firebase. You'll learn the basic setup steps for iOS and Android, how to set up a local development environment using the new Firebase Emulator suite, then we'll implement analytics to understand our users, Crashlytics and performance to improve the quality of our app, and finally, we'll look at app distribution to test our builds before they get in the hands of actual users on the app stores. By the end of this video, you should have a solid foundation for building pretty much anything you can imagine with the Flutter Firestack. If anyone wants to develop an app with me, I'm down. We'll be starting this video with a basic setup, but if you wanna jump ahead to the fun stuff, check out the timestamps in the video description. Cap. As you can see here in Versus Code, I have a freshly generated Flutter app. If you're not sure how to get to this point, check out the official install instructions for Flutter. From there, we'll open up the pubspec YAML file and go to the dependencies section. Firebase maintains a variety of different plugins for Flutter. The only one that's actually required is Firebase core. Everything else, you can just pick and choose as needed. Most apps will use Firestore as well as Firebase Auth, and I'm also including the Google sign in plugin to support that sign in method. From there, we have analytics, and we'll also throw in performance and Crashlytics. I'll explain what all these do in more detail throughout the video. In this demo, you'll notice I'm leaving the version numbers empty. However, it would be a good idea to peg these dependencies to a specific version just so they don't break when you update things. You'll find the latest version for each plugin in the Firebase docs. That takes care of our initial Flutter setup. Now we need a Firebase project. If you're brand new to Firebase, I'd recommend checking out my Firebase basics video. Oh, and by the way, if things are going too fast in this video, make sure to follow along with the full write up on Fireship IO that breaks everything down step by step. But at this point, we just need a project in the cloud that we can link to our front end app. Now it's time to configure this app for Android. From the settings tab in the Firebase console, we'll add a new Android app. Cap. We need to decide on a bundle ID, which is like a reverse domain name. So in my case, it would be io.fireship followed by the app name. The bundle ID needs to be unique and it will be shared across iOS and Android, so make sure to choose it carefully. Below that, you'll notice it gives us the option for an sha one certificate. Cap. It's technically optional. However, you will need one if you're using phone sign in or Google sign in on Android. Back in Versus Code, let's open up a terminal session and then we'll CD into the Android directory. There's a script in there that we can run to generate the sha one certificate for us. That'll generate a bunch of output, and then at the bottom, you can find the SHA one certificate for the debug Android test variant. So go ahead and copy that and then paste it into the Firebase console. Go ahead and create the app, and then it will ask you to download the Google services JSON file. Download and save it into the Android app directory. This file contains your Firebase project information, so it can be identified by the Android app. From there, you can just click throughout the other steps, and then you should see your app created in the Firebase console. Let's head back to Versus Code and find the Android build Gradle file. In the dependencies object, you'll wanna add a class path for the Google dependency of version 4.3.3. Then what's kind of confusing here is you have a second build.gradle file in the app directory. Go into that file and then add this line to apply the Google services plug in directly below the plug in for the Android application. Then moving down a few lines, you'll see a default config object. You'll want to update the application ID to use the bundle ID that you created in the Firebase console. And then one last thing that we'll do here that's optional, but might be an issue that you run into in the future is enable multidex. Firebase provides a lot of functionality, which means a lot of classes and methods in your code. MultiDex simply allows you to support a large number of references. So let's go ahead and enable it, and then we'll add it as a dependency down here at the bottom as well. And now we should be good to go with Android. Flutter Run should build your app without errors at this point. Now we're ready to move on to the iOS setup, which is a bit easier, especially if you're familiar with Xcode. In the Flutter project, in the iOS directory, you'll find an Xcode workspace file. Now go ahead and open up the project in Xcode. Keep in mind that you do need to have a Mac device in order to do this. However, there are ways to build Flutter apps for iOS without having a Mac. However, that's beyond the scope of this video. In the general settings, you'll want to go in and enter your bundle identifier. Then under signing and certificates, you'll wanna go in there and make sure that you have a valid signing certificate for your Apple developer account. If you don't have 1 or not sure what that is, you can follow the official documentation on the Apple developer site. The next thing we'll do is go back to the Firebase console and this time add a new iOS app. This time, we just need to add a bundle ID and then it will give us an info dashplist file to download. Go ahead and open that file in finder and then drag it over to the runner slash runner directory in the Xcode project. At this point, you should be able to click the play button in code or run Flutter run from the command line and the app should build successfully. Now at this point, your app is good to go for both iOS and Android with the basic setup. Cap, but if you're building a serious app here that you plan on launching to the app stores, there's probably a few other Firebase features that you want to take advantage of. The first one we'll look at is Firebase Analytics, which is just a proxy for Google Analytics. Basic usage of Google Analytics simply collects metadata about your users, like where they're located, what type of device they're using, what screens they view, and so on. Now this data by itself is very interesting to look at and provides a ton of insight about your users. But the really awesome thing about Firebase is that you can easily take action based on this data. Here's an example. If you've ever used the Reddit app, you might notice that you start getting occasions based on a subreddit that you're interested in. You could do the same thing in your own app with Firebase by collecting analytics data about the topics users are interested in and then send notifications to that specific audience. You can even custom tailor the app experience at runtime using remote config and a bunch of other advanced stuff beyond that as well. The first thing you'll wanna do is make sure you have analytics enabled on the Firebase console if you didn't do it when you set up the initial project. In our Flutter code, we'll then import the Firebase Analytics package and then declare a global variable for analytics. Then we can define that variable in our main function as an instance of Firebase Analytics. It will automatically start collecting some basic information about your users, but you can also add custom events to it as well. You'll notice on analytics but there's a bunch of built in methods and I recommend using these built in methods if they fit your needs. However, in many cases, you may just have your very own custom event, in which case you can call analytics log event with the name of the event and then some optional metadata that you want to collect beyond that. In this example here, I have this logic set up in a method so that every time we click this button here in the UI, it will log an analytics event. Now in this very simple app, we have one screen, but your app will likely have multiple screens with Flutter's navigator. In my full Flutter course on Fireship, we have multiple screens. And in order to easily track analytics for each screen, we have a navigation observer setup that automatically tracks every screen view as you can see here in the source code on GitHub. And that's just another really easy thing you'll wanna do that adds a lot of value to your code base. Now let's move on to the next Firebase superpower, performance. Basically, it's a tool that allows you to measure the duration of time for different things that happen in your app. By default, it will measure the app startup time, but you can also set up your own custom traces for any logic in your code. Now the awesome thing about this is that it collects and aggregates all this data over time. So if you have a certain trace that's running and and then suddenly that trace becomes much longer. It's going to create an issue for you automatically, and that means you can hopefully address it before it turns into bad reviews in the app stores. In addition, it's segmented by app version, country, and so on, allowing you to understand how this data trends over time. Including Firebase performance in your code will set up the automatic traces, and then we can set up our own custom trace in this method here. 1st, we create a new instance of a trace by calling Firebase performance instance, new trace, and give it a unique name. When we're ready to start it, we call the start method, and in this case, we'll await a future for 5 seconds, and then we'll stop the trace. When you click the button, it runs that performance trace in the background, and then you'll find data about that trace in the Firebase console. So performance is one thing, but if your app is crashing or throwing errors, that's an even bigger problem. A few years ago, Firebase acquired Fabric from Twitter, and one of the key features in Fabric was Crashlytics. It's a service that allows you to detect errors that happen in your application in production. And that's really important because if a user downloads your app and it immediately throws an error, Well, what they're going to do is leave a bad review in the app store. Before we set up Crashlytics, I first want to warn you that the setup I'm showing you here might be slightly different than what you see in the official documentation. But I can tell you that as of today, the implementation I'm showing you here works. To set it up on Android, we'll first wanna go to the Android directory to the build Gradle file. Under dependencies, you'll add the Firebase Crashlytics Gradle class path. Next, we'll go to the app level build Gradle file and first apply the plugin of Firebase Crashlytics and then we'll go down to our dependencies and add the implementation for Firebase Crashlytics. At this point, run the Flutter clean command to wipe out any cache data and then restart the application. In our source code, we'll implement Crashlytics and then we'll reference the Crashlytics instance and set enable dev mode to true. Now, dev mode is really only intended to verify that Crashlytics reporting is working properly. So after you start getting reports in the dashboard, you can set that to false for most of your development. Now what we want to happen at this point is for Crashlytics to catch every error that's thrown by the Flutter framework, and we can handle that by listening to the Flutter error on error event, and that's basically all we need to do to get comprehensive error reporting across our entire app. For example, if we have a method that throws a Flutter error, we should see that error reported in Firebase after we click this button. If we go up to the Firebase dashboard, you may not see any error reports at first because by default, it filters everything by fatal errors. But in the case of a Flutter app, everything is considered a non fatal error. When you click on an event, It will tell you how many users are affected by that event and how often it's happening and on what devices. In addition, it will tell you the line of code that's affected and provide a stack trace for the error so so you can immediately pinpoint where this is happening. I can tell you from experience that this data is extremely valuable. So many bad reviews on the app stores are related to uncaught errors and crashes. If you do client work, you'll have a lot less anxiety knowing that you can catch things like this before they become a major issue. And speaking of catching things early, Firebase has yet another awesome feature called app distribution. This feature allows you to easily distribute and test both an iOS and Android app on real devices without having to jump through all the hoops on Google Play or Apple TestFlight. If you've ever released to the App Store before, then you know it takes 24 hours or more to get your app approved and there's a bunch of forms you have to fill out. It's just a really annoying process. Allow me to demonstrate with Android. First, we'll run a production build for our app by running flutter build apk. That'll take a minute, and then you should see the app dot apk file in the build directory. From there, you can go to the Firebase console under app distribution and upload your APK there. Once uploaded, you can either create an invite link or you can set up testers and groups. In this case, I'll just add hello at fireship I o as a tester. Then I can go back to the releases tab and distribute this app to the tester. The The tester should immediately get an email with instructions about how to run the app. And now something that would normally take the better part of a day now just takes a few seconds. At this point, we have a solid foundation for building a serious app, but there's one more bonus topic that I wanna show you, and that's setting up the Firebase Emulator Suite to have a mock database in your local environment so you don't have to create real data in the cloud when developing. In the past, most Firebase developers would create multiple projects, one for development and one for production. However, managing multiple Firebase projects can be pretty tedious, and that's especially true for Flutter apps simply because you're targeting multiple platforms. Here's how we can use the Emulator Suite in our local project. 1st, install the Firebase command line tools. I'm using Node. Js to do that. Next, I'm running Firebase init to connect our project to the cloud. The tool I'm interested in here is emulators. There are multiple emulators for things like Cloud Functions and Pub Sub, but for now, we'll just emulate the database, so we'll choose Firestore in this case. You can select the default options for everything else. That gives us access to the Firebase emulators colon start command. If we follow the link to local host 4,000, you can see we have the Firestore emulator running and then it has a UI that's similar to what you would see on the Firebase console. The key difference is that the data in this database is stored on your local device. So you can safely create database records without incurring billing or polluting your production project. Now we just need to tell our Flutter source code to use this local data instead of the real Firestore database, and the way we do that is by modifying the settings on the Firestore plug in. You can only do that after the widgets have been initialized. So you wanna put this code somewhere like a knit state when you know that the widget tree has been initialized. Cap. We'll want the host to point to our local instance of Firestore. If using an Android emulator, you'll want it to point to this IP address 10.0. 2 dot 2, but anywhere else, you should be able to just use local host 8080. From there, you can set the options for SSL and persistence to false. Now Now when we run the app, you'll notice that the data it uses is from the local Firestore instance and not the actual cloud that we pay for. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and consider becoming a pro member at Fireship IO to get access to even more Flutter Firebase content. Thanks for watching, and I will see you in the next one.
The Flutteriva stack is recommended for developers to build a serious mobile app and set up local development environments. Flutter app setup for Android and iOS is discussed, including the need for a project in the cloud and enabling the Flutter Run app and adding a class path for the Google dependency. The speaker emphasizes the importance of testing app performance and creating a trace for it, as well as the use of using volatile and custom events to collect analytics data and set up analytics logs. The speaker also provides instructions on how to use the Emulator Suite in local projects and adjust settings for SSL and persistence.