Flutter Tutorial - How To Change App Name And App Icon | For Flutter Web App

how to set within the browser the app name and app icon of your flutter web app we will also dynamically change the web app name while the flutter web app is running if you're new here subscribe to my channel and make sure to watch this video till the end let's get started by changing the app name within our browser therefore you simply go to your material app and here inside you have a property which is called title and then you can set here your new app name and now after we hot reload we have our new app name inside the only problem with this approach is if you load here your website for the first time then you see here shortly another name and then the name that we have defined to fix this issue simply copy here your app name and then go inside of the web folder within your flutter project and here you have then an index.html file and here inside you need to scroll a bit down to the title tag and here make sure that you put then your new name inside and you also have your emitter tag where you also need to put here then your app name inside and now after you refresh here your website you see that the app name stays always the same optionally you can also scroll here up and then you can go here to this meta description tag and then you can put here your new description inside and this description and also here the title itself is later displayed within the search engines in case you want to support progressive web apps with flutter then you can go here inside of this manifest json file and here you need to set then also the app name so simply put here your app name inside and here we have also descriptions so put here your description inside and with this the users that install your website as an android or ios app have then here your app name correctly displayed on their home screen next we want to set the app icon within our browser therefore go here to this fav icon io website and here you have a converter where you need to drag then your app icon inside which is for example a png or jpeg file so simply put it inside and then click on download after this open the zip file that you have downloaded and here inside you find then this fav icon icon file which you need to put then inside of the web folder and this other file fav icon png you can simply remove it and lastly you need to go inside of your index html file and then you scroll a bit down and here before the title i add then here to other tags so we add here two other link tags and here i put them every time this fav icon inside after this stop your flutter application and start it again and then you should see here this fav icon inside of your browser and again if you want to support with your flutter web app a progressive web application then you need to go to your manifest json file and here inside you see some icons and the icons are every time stored here within this icons folder which we have here within our web folder so here we have this icons folder and then we have here two different icons inside and these icons are later displayed within the home screen of your progressive web app therefore make sure that you put here these new icons inside that you have downloaded so here we have 192 and 512. therefore make sure that you rename them here to the name that is here within this folder already inside so it should be exactly the same name and also here for this other file you also have here then this new name inside which is matching here with this name and lastly you can then simply drag these files inside of your icons folder and then you replace these icons and with this we have here these different icons inside with different dimensions and lastly we want to look at how we can change the app name within our browser dynamically therefore every time if i click here on this update button right now i'm incrementing here a counter and here inside we want to change then dynamically our app name and i put here simply the counter inside so that you can every time see the change that we have changed our app name and secondly i create a method change app name where i put here then the app name inside let's now create here this change app name method and here inside we call then our system chrome and here you have this method set application switcher description where you need to set then first of all the label which is our app name and secondly you also have to supply here a color so make sure that you put this color inside otherwise you get an arrow and to make use of the system chrome you need to go here up and make sure that you have this flutter services imported and now we can try it out so if i click here on this update button you see that our app title is every time changing with the new counter inside and by the way if you liked this video then make sure to subscribe to my youtube channel

Channel: HeyFlutter․com

Views: 11,951

Keywords: app name, app name change, change app display name, change app display name - flutter, change app name, change app title, change the app display name, flutter, flutter app name change, flutter change app name, flutter change app name web, flutter set app name, flutter tutorial for beginners, flutter web change app name, how to change the app displayed name, web, change app name android, change app name ios

Id: drAeE4qKjDQ

Length: 5min 10sec (310 seconds)

Published: Thu Jun 24 2021