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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close