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

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());

Answer 2

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;
  }
  ...
);

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.
    }
}
...

Answer 4

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",