How to dynamically change the App Title in Flutter Web?

Dynamic app title in Flutter

The app title can be dynamically changed on all platforms using SystemChrome.setApplicationSwitcherDescription:

@override
Widget build(BuildContext context) {
    SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
      label: 'Dynamic web app title',
      primaryColor: Theme.of(context).primaryColor.value,
    ));
  return Container(...);
}

SystemChrome becomes available with import 'package:flutter/services.dart'; and you want to call setApplicationSwitcherDescription in your build method.

This is also how Title does it (see source code), which is the widget used by WidgetsApp, MaterialApp, etc.

Thus, you can also use a Title widget instead of accessing SystemChrome yourself:

@override
Widget build(Context context) {
  return Title(
    label: 'Dynamic app title',
    primaryColor: Theme.of(context).primaryColor,
    child: ..,
  );
}

label

The label parameter is pretty straight forward: it maps exactly to what title is in your MaterialApp and just a String.

primaryColor

The primaryColor will determine the color the system might use in the application switcher, e.g. the title bar color in recents on Android.
This is an int instead of a Color, which is why you need to call Color.value to convert your primary color to an integer.

Interference with other Titles

You might ask yourself if calling setApplicationSwitcherDescription or inserting a Title widget when the title property on MaterialApp is set can cause any problems.
The answer is: no because the widget that is the deepest down in the tree will set the title. Essentially, even if the whole app rebuilds, your setApplicationSwitcherDescription will be called after that of MaterialApp assuming you are calling it in a child and therefore you will override the MaterialApp title.