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 fire stack well if anyone wants to develop an app with me i'm down we'll be starting this video with the basic setup but if you want to jump ahead to the fun stuff check out the time stamps in the video description as you can see here in vs 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 pub spec 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 and 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 we need to decide on a bundle id which is like a reverse domain name so in my case it would be io dot 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 sha1 certificate it's technically optional however you will need one if you're using phone sign-in or google sign-in on android back in vs 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-1 certificate for us that'll generate a bunch of output and then at the bottom you can find the sha-1 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 through all the other steps and then you should see your app created in the firebase console let's head back to vs code and find the android build gradle file in the dependencies object you'll want to 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 plugin directly below the plugin 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 multi-dex 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 want to go in there and make sure that you have a valid signing certificate for your apple developer account if you don't have one 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-plist file to download go ahead and open that file in finder and then drag it over to the runner runner directory in the xcode project at this point you should be able to click the play button in xcode 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 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 notifications 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 want to 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 that 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 set up 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 want to 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's 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 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 we'll set up the automatic traces and then we can set up our own custom trace in this method here first 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 five 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 want to 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 cached 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 devmode to true now devmode 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 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 test flight 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.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 io as a tester then i can go back to the releases tab and distribute this app to the tester 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 want to 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 first 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 emulator's colon start command if we follow the link to localhost 4000 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 plugin you can only do that after the widgets have been initialized so you want to put this code somewhere like a nit state when you know that the widget tree has been initialized 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.2 but anywhere else you should be able to just use localhost 8080. from there you can set the options for ssl and persistence to false 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 going to 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

Channel: Fireship

Views: 79,297

Keywords: app development, lesson, tutorial, flutter, app dev, learn to code, firebase, flutterfire, firestore

Id: Mx24wiPilHg

Length: 12min 59sec (779 seconds)

Published: Tue Aug 11 2020