How to Dynamically Change Page Title in Flutter Web

Changing the page title in Flutter Web is a bit different than what you might be used to on the web. You can’t just change the text of the title tag – you need to use another tool to update the title element.

The title property of the MaterialApp class is used to specify the string that is displayed in the app bar. The title can be any length, but it is typically short so that it takes up less space on the screen. The title can also be null, in which case the app bar will not display a title.

MaterialApp(
  title: 'Home Page',
  home: MyHomePage(),
)

If the page’s content is static, we can just set the title property and forget. However, when the content changes like when a user switches articles on the same page, it is required to change’s page’s title to reflect what the user is reading.

Our solution is to use SystemChrome.setApplicationSwitcherDescription method in package:flutter/services.dart.

SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
      label: article.title,
      primaryColor: Theme.of(context).primaryColor.value,
    ));