Flutter Tutorial - Flavors in Flutter | Create different apps for different environments

hi friends welcome to flutter Junction and today we are going to learn how to use flavors in flutter and flavors in flutter refers to the practice of creating multiple versions of the same application with different configurations these configurations can include different assets a bearing points app icons and other resources specific to particular environment for example an application that is intended for release on both IOS and Android platforms may need different API endpoints for its platform and its platform may have different requirements for app icons foreign are particularly useful for developing teams and that need to create multiple version of the same application for different environments for example a team may need to create a production version of an application with different configurations and resources then our development for testing version with build flavors develops developers can easily switch between these buttons and ensure that each button is customized to meet the specific requirements of the target environment suppose also you are working on a SAS project unless the school management system where every school share almost a same functionality but with different app icons in points and resources and you need to upload them to the Play Store independently in this case also for flavors in front of coming to use flavors also allows us to create build apps with different application IDs with their respective data and features and you can upload them differently on the Play Store and App Store right and this is our final applications are working we shall be upgrading two players one useful one and other is equal to and they're gonna have different app icons and the different app names and when you click on it they're gonna have the different resources and the app titles also you can see we have the different app writer and the different image also and let's go to the school tape is cool to and they have you can see the the icon is different and the image resource from school one and is cool to are different and this is our final applications have been looking right now let's get back to the project and before that if you haven't subscribed the channel don't forget to subscribe and press the Bell icon and if you like this video don't forget to like comment and send it to the Friends right and for that uh we're gonna use the two packages one is a flutter ribbon pod and other is flutter launcher icons for changing the app icons into the project so first let's import our packages into the application go to the process.tml file and then paste this packages and run pocket after upgrade is finished we're gonna import some resources into the SS folder so for that I am going to create the new folder inside the root project directory and name it SS and inside SS I'm gonna create two other directories one would be app icons and other would be images and here I'm gonna drag and drop the data I'm gonna the resources of the project I already have the items let's place the icon first I'm gonna drag and drop to the app icons and then refactor it close it and then inside the images also I'm gonna drag and drop these items and place them in the images folder right and in the processor 30 ml file I'm gonna give the path to them to the SS items let's close them right and let's comment down here you can see assets and be sure to have the right indentation should be reset slash app icons slash and asset slash Images slash and then run object and after the pop gate is success I'm going to close this and then let's collapse all and go to the I'm gonna rename it to the main underscore command dot dot right and then I'm gonna delete all these items we don't need this and I'm gonna rename to the main common and then after that let's create the new file named config flavor foreign reverse the DOT here we're gonna Define what things are going to be dynamic into the flavors for that and you can find it all the quotes in the description below you can find it and you can see we have the different in points you can see we are going to have different app titles if the endpoints image location and then the theme and the default theme would be light you can see here and the default app title will be a plot tutorial and the image location will be default image.jpg and you can find this code in the description below you can find it right and come back to the main problem here we initialize this config threat that flavor config provider and then in main common we're gonna pass copy this and then paste it here and then name it config let's import it right and we're gonna use the reverbot for State Management and let's initialize this config provider yeah and we need to import uh flutter reverbot let's import it right now inside the round app we need to repetitivity provider scope and I'm gonna remove it and paste it here you can see we have wrap the Maya pretty provided scope as we are using the floater reward point for State Management and and then come back to this application right now let's create the my app and my app gonna extend the consumer widget because we are using reverbot as the reset management so you can see my app is extending the consumer widget and here we are initializing this a config provider you can see and we are reading the value from this config provider whatever the the value is coming from this flavor country we're gonna place it here and then we are reading it from here from my app and inside my app you can see the title will be coming from this our state and the theme is also would be coming from the state and then the home page and our home page is also going to be extending the consumer widget then here we are going to pass the app titles and the theme you can see and images you can see we are action in the consumer widget and we are in the build we have the ref here and this is a type of context for flutter River quad so inside the app bar we are getting the app title from the state you can see from this step and from this image assets also we are getting this image location from the state right after main common you can see now we're gonna create the different main files for different flavors so for that inside the leaf I'm gonna create the new file and name it main School one dot Dot and also the other file main School 2. so we we are creating the different main file for different flavors here we're gonna have two flavors so I am creating the two flavors uh two main file for different two flavors so in many school one I already have some of the exercise done you can see I am running I have the main function and this would be the entry point for the main school one flavor and I'm gonna import with and then also flavor config right and then with theme data we need to import symmetry right here we are passing the different balance here you have foreign API endpoints would be different and the image location would be one dot PNG and the theme would be like with primary color you can see a bit waste and the background theme color upper theme color would be brown color similarly for main is equal to you can find the code in the description below okay let's import it sorry right and here you can see the app title is equal to image location would be the two dot PNG we have different images for two different flavors inside the application and app items should be also different API inputs also and this time our is equal to theme would be done so now we need to configure the entry point of the application so for that I'm gonna delete the main command and go to the plus icon and then plot up and name it school one and then entry point would be live and for school one it would be main school one and then it would be restless flavor and school one and then apply and similarly let's add the other configuration for is equal to and name would be I would name it is equal to and entry point I live and it will be mainly school to and uh additional run arguments will be just as flavor score two and just click on apply you can see we have created two configurations one for school one you can see and the entry point would be main school one that dot and additional arguments flavor and it would be school one similarly for school two also that would be equal to and the E 2.23 main is equal to and the name is equal to yeah and then click on OK and now you're gonna have different configuration for different schools right now we gonna consider them in the native that means we need to go to the this Android folder and we need to run them we need to pass the different Arguments for these flavors okay let's delete this test we don't need this right now onto the app Android app and build at Gradle here we're gonna configure the different properties of our flavor so after default config here I'm gonna add the different flavors you can see the flavor Dimensions is app and be sure you you are using the right typo and if you are using the wrong and you will get this one and you should be flutter Dimensions that would be app and the product flavor should be here we have two flavors that is school one and equal to and we are using two different flavors and you can see and this application ID would be copy this and then the application ID would be this application ID dot school one and similarly for is equal to you can find this application ID here copy this paste it here and then Dot and then the different package then one is for uh for flavor exclu one I am using school one and four flavor is equal to I am using School two so you can see here so after configuration of the builted Gradle let's go to this Source Main and resource and the values here I am going to create the new string resource and it would be strings Dot XML and here I'm going to create this string resource with the app name you can see and the default app name would be default app name and then I'm gonna go to the Android manifest.xml and I'm gonna provide the labor to this app name so for that it would be at the right string slash app underscore name and be sure this app name is same as this key you defined here and you can also copy and paste it here right now after that let's go to the Source folder and for different flavors we need to create the different directory for school one I am going to create the new SQL one directory inside the source and then for SQL to new directory School two and inside this cool one I'm gonna create the directory press slash values similarly for SQL to press slash values and inside the values I'm gonna create the new file name strings Dot XML and here we're gonna Define the app name for the school one and for a school one same as the main string you can see we are we have given the default app name here and here we are giving the school one so this manifest gonna take the different app name for different flavors you can see we are giving the path to the this app name similarly for is equal to I'm going to create the new file same as school one strings dot XML paste it here and then name it two so these are going to be the app names for our two different environments that is school one and school two now it's time to run the application so first I'm gonna run the select is equal one and then run SQL 1 flavor and you can see the application is working fine you can see the app bar is cool one you can see the title just close this close okay you can see we are passing the school one here we have the app title of school one and then the image location is one dot PNG let's open it you can see the image is also working so let's build similarly for score two and then run it and it is installing command yeah Bingo you can see we have the default icon here we are going to change it first let's check if it is working or not right we have the school to have title and then the different image you can see the different image we are just passed and it is working so like this you can build flavors for different environments right now you can see we have the default water icon for our project now we're gonna change it right so for that let's get to the root folder okay here I'm gonna create the new file named flutter launcher underscore icons under dash is called one dot yaml file and we're gonna have the different items for different uh flavors so you need to create the different launcher icons fine so I'm going to create here and then I'm gonna pass the values you can see and we are using flutter launcher icons for updating our app icons right and you can see the app icons it should be one okay and similarly for school two I'm gonna create the new file and name it Slaughter launcher icons School dot School two dot tml file you can see this is school one and this is equal to and I'm gonna paste it sorry copy it paste it here and then the different image for B is equal to now after this you need to run the command so that this icons would get walking so for that okay it is not files are not here scorpion paste it paste them and provide to write now after that you need to run the code launcher icons that means plot this file name and then Main and then you can see flutter launcher icons asterisk this is the file name and you can see flutter launcher icons that means the thing we are the package we are using here this slotted launcher icons we are running flot and problem and this package and then name and then that's flavors that means we have two different flavors and that having two files the flutter launcher icons is called one that yaml another is equal to the yaml and then we are providing flutter launcher icons you can see flutter launcher icons and after that we are giving hashtag so that it works for both the flavor you can see it has worked and to check if it is working or not you can go to the Android file app source and the files for different flavors you can see we have this Min map yeah you can see IC launcher is changing for school one and similarly for school two it is also changing right now let's run them again and check if they are working or not you can see we have two different same default icons of flutter now we're gonna change them and it is running you can see it is not changing let's see why it is not changing [Music] School two right let's get back and you can see the logo it change for is equal to and inside we have is equal to lower changing and similarly let's run for school one also foreign yeah and you can see it is the logo is the school one it is different and it is working and when you will imagine you can see different logos for different apps and let's get back and here we can see two different logos for two different environments and with two different titles so this is how you can add flavors to the flutter apps and if you have any queries regarding this video you can ping me a comment or you can mail me a contact at front assumption.com and if you like this video don't forget to like comment and share to the friends and don't forget to subscribe and press the Bell icon so that you can get notified and upcoming awesome videos and if you want any uh written documentation you can visit flutter.com and you can find big content for this uh tutorial also you can find the different tutorials regarding the flutter you can go and get to yourself right and if you like this video don't forget to like comment and subscribe and share it to the Friends thank you happy birthday [Music]

Channel: Flutter Junction

Views: 8,213

Keywords: flutter, flutter tutorial, demo projects, learn flutter, dart, flutter video, flutter projects, projects in flutter, flutter basics, flutter fo beginners, learnflutter, basic in flutter, programming, learn programming, programming for beginners, flutter course, dart course, flutter full course, flutter tutorial for beginners, app developement, bloc, blocinflutter, statemanagement, state management, statemanagementinflutter, riverpod, riverpodinflutter, getx, getxinflutter, coding, app

Id: 3tiy5M26H8c

Length: 24min 20sec (1460 seconds)

Published: Mon Apr 10 2023