Flutter Flavors, App Icons, and Firebase Tutorial

when developing apps it's very important to separate out your development and production environments app flavors allow us to create multiple versions of our app with the same code base making it easy to create and test new features without the risk of destroying production data in this video you'll learn how to create three android and ios flavors development staging and production development is for you to create new features staging is for your team and stakeholders to test out the app before it goes to production and production is for the end user you'll also learn how to generate an app icon for each flavor using the flutter launcher icons package and link each flavor to a different firebase project make sure to smash the like button and subscribe as it really helps out the channel if you want to learn how to build real world apps with flutter check out my courses at launchclub.io and with that let's get into it in a new flutter project called flavors example the first thing we'll do is create a new file called app.dart app.dart contains a stateless widget called app that takes in a flavor string this will be displayed as a title in our app bar so we know which flavor the app we're running you can also use the package info plus package to view your app's name and package name now let's delete our existing main.dart and create three entry points to our app main underscore development.dart main staging.dart and main underscore production.dart all of these files call run app app and pass in the corresponding flavor string you can add flavor specific code to each main file such as loading environment variables or enabling app analytics to run a specific main file we can type in our terminal flutter run dash dash target lib slash and then the name of the main file once we add our android and ios flavors to customize app names and icons later on in the video we'll also have to include the flavor we want to run with dash dash flavor and the name of the flavor however there are two problems with this one it gets annoying to type this out whenever we need to run a different app build and two running this command in the terminal won't allow us to use vs code's debugger luckily both of these are easily fixable with the launch.json file at the root of our project create a launch.json file inside of a folder called vs code we have three configurations one for each flavor each configuration has a name request type program and arguments now when we go to the run tab we see our three launch configurations when we tap run we get an error about not being able to use the flavor option so let's add our build flavors next adding build flavors to android is pretty straightforward inside of our app level build.gradle we add our product flavors for production staging and dev the name of our app for each build is defined in the res value line and our application id has a suffix for staging and dev our current application id is com.example.flavor's example this means our bundle identifiers will become.example.flavor's example for production com.example.flavorsexample.stg for staging and com.example.flavorsexample.dev for development in our android manifest we set the android colon label to at string forward slash app underscore name to set our app's app name ios build configurations are more complicated than android and can only be done in xcode so be sure to follow along closely in xcode let's create two new schemes called development and staging that both target runner rename the original runner to production next we have to go into the runner project and duplicate the debug release and profile configurations for development and staging add the dash production suffix to the original configuration now let's go into managed schemes and edit the development and staging schemes to point to the correct build configurations production already points to our production configurations which means we don't have to change it in the build settings of target runner make sure all and combined are selected and search for bundle identifier here we set each configuration's bundle identifier finally we set our app's display name by creating a user-defined variable called app underscore display underscore name note that if your app display name is longer than 12 characters the spaces will be removed we use this variable in our info.plist by creating a new key cf bundle display name and setting it to app underscore display underscore name wrapped in parentheses with a dollar sign we're ready to add our app icons i've downloaded 3 images and cropped them to 1024 by 1024 pixels create assets and icons folders and drag your images in in our pubspec.yaml let's add the flutter launcher icons package as a dev dependency this package will generate all the icon sizes for android and ios and put them into the correct folders we have to create a configuration file for each of our flavors each file is named flutter underscore launcher underscore icons dash the flavorname.yaml and points to the flavor icon in the assets icons folder set android and ios to true to override the existing flutter launcher icon for both platforms and define the icon image path we can generate our flavor icons with flutter pub run flutter launcher icons colon main f flutter launcher icons asterisk when you submit your ios app to the ios app store it's important that your app icon does not have an alpha channel so your app doesn't get rejected we can add remove underscore alpha underscore ios colon true to the yaml files and regenerate the icons android is all good to go we see the generated icons in their respective folders but we need to complete an additional step for ios in xcode we see our three app icons in the assets folder let's go into the targets build settings and search for asset here we set the correct app icon for each schema i've run all three flavors on android and ios and all three apps have the correct name app icon and app or bundle identifier every apps app bar displays the flavor string we passed into each main file at this point i'm assuming you already have firebase setup in your project if not you can follow along with this video i made covering how to set up firebase for android and ios in firebase create three firebase projects development staging and production all with the proper bundle identifiers we want our development flavor to use the development project staging to use the staging project and production to use the production project for android we would normally add our single google services json to the android app folder but because we need to keep track of three different google services files we create development staging and production folders these folders were automatically created when we generated our app icons move the corresponding google services files into each folder our android app knows which file to refer to when running because our flavor names match our folder names for ios we're going to do something similar and first create a folder called config with development staging and production folders nested inside move the corresponding google service info plus into each folder now drag the config folder into the top level of the ios folder in xcode and make sure to copy the files when we run our app xcode will always look for the google service info plus in the runner folder so we need to go to build phases and add a run script that copies the correct google service info plist to that location when the app is run let's rename the script i got the script from this great medium article that i'll link in the description paste the script into the box and now we're done we've successfully hooked up our app flavors to different firebase projects [Music] you learned how to set up flavors in your flutter project generate a unique icon for each flavor and point each flavor to a different firebase project remember to leave a like and subscribe and for complete flutter courses check out my website launchclub.io thanks for watching and i'll see you in the next one [Music] you

Channel: Marcus Ng

Views: 49,920

Keywords: flutter flavors firebase, flutter flavors android, flutter flavors ios, flutter launcher icons, flutter app icon, flutter firebase production, flutter tutorial, flutter vscode flavors, flutter environment, flutter multiple apps, flutter app versions, flutter tips, flutter production, flutter ios android, flutter best practices, flavors in flutter, flutter build flavors, flutter flavors example, advanced flutter, flutter advanced tips, flutter pro tips, flutter flavors

Id: Vhm1Cv2uPko

Length: 9min 39sec (579 seconds)

Published: Fri Oct 08 2021