How can you set title and icon for a flutter web app?

Question

What I'm trying to do is build a flutter web app that, when displayed in the browser, the tab shows an icon and a title (as currently it only shows the world icon and the localhost... title).

Actual Result :

Desired Result :

Edit: I can now add the title, as this is set in the main function

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: Icon(Icons.menu, color: Colors.white,),
      title: Text(_your title here_),
    )
    ...
  );
}

So, the only thing I need to edit is the favicon

Arpent

appbar is not for the favicon and title beacause appbar in screen widget so you have to find out that widget in flutter – Wineskin

If you want to change title dynamically check this answer – Crone

Answer 1

In order to change the title to what you desire, you need to add the parameter title (Which is a String) to your MaterialApp widget.

return MaterialApp(
  title: "MyTitle", 
  home: MyHomeWidget());

Brezin

Answer 2

Assuming you already have a favicon.ico file, placing it inside the your_project_dir/web folder alongside index.html as shown below is enough for the browser to pick it up.

Following is the result of placing a favicon.ico in the web folder. Make sure to do a clean build.

In other case you can manually mention it using the link tag inside your index.html as explained here in this Wikipedia page.

Armagh

Is there any way to dynamically set the link and the title of the index.html page? When opening a website built with Flutter, I need to get the business's details from my API, and set the favicon to be the business's logo & the title to be the name of the business. – Lording

Answer 3

• Edit title

it is the simplest. just use the Title widget on each page or directly inside the materialApp constructor and set title string key to the title text you need. like this:

...
Title(
  color: myColors, //not  important  in web but still required
  title: 'web  page title',
  child: myChildWidget,
),
...

• Edit icon

If your app is only for the web, use the dart:html library to perform change using DOM access. something like this

import 'dart:html';
...
...
updateIcon(String assetIcon){
      LinkElement link = (document.querySelector("link[rel*='icon']") ??
          document.createElement('link')) as LinkElement;
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = assetIcon;
}

if your application is multi-platform, you need to create separate main file for the web like main_web.dart. and declare the previous function inside this file. Now, anywhere you need to set up the icon you just need to call the method after checking the platform using the keyword kIsWeb.

Ex: change icon inside page

...
initState(){
    super.initSate();
    if(kIsWeb){
      WebMixin.updateIcon("assets/home_icon.png"); //WebMixin is just a helper.  replace  it by your  one.
    }
}
...

Kinnon

Thanks for mentioning Title widget. So undermentioned but it's super helpful. – Prohibitive

Answer 4

You could set the onGenerateTitle property of your MaterialApp widget, and provide a callback function to build your title. The onGenerateTitle callback is called each time the WidgetsApp rebuilds. This is useful if you want the title of your page to change dynamically or if you want to produce a localized title.

MaterialApp(
  ...
  onGenerateTitle: (BuildContext context) {
    return AppLocalizations.of(context).myTitle;
  }
  ...
);

Shithead

can you please tell me about AppLocatizations what it is? – Captivity

docs.flutter.dev/development/accessibility-and-localization/… You would need to configure your application to have localized pieces of text by doing something like this. – Shithead

Answer 5

If you're wondering how to change the app name on your device's homepage, you can update the "name" and "short_name" values in web/manifest.json:

"name": "Ideasky",
"short_name": "Ideasky",

Staley

How are name & short_name used differently? When are each used? – Antiquarian

Answer 6

In addition to setting the title in the MaterialApp instance in your dart code, you should have a look at the web/manifest.json file also.

This contains the name of the PWA icon which is created when someone installs it on their device.

Phosphorus