Flutter Web: 2 Ways to Change Page Title Dynamically

Last updated on July 1, 2021 A Goodman Loading... Post a comment

By default, the page title of a Flutter web app is controlled by the title property of the MaterialApp widget but what if you want to update it when the app is running? This article shows you a couple of different approaches that can be used to change the page title programmatically on events like route change, button pressed, etc.

1. Using the Title widget

The Title widget might be the fastest solution. There are many ways that you can implement this widget, such as making it a wrapper for Scaffold like this:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Title(
      color: Colors.blue, // This is required
      title: 'A wonderful title',
      child: Scaffold(
        /* ... */
      ),
    );
  }
}

Full Example

Preview

In this example, we will change the page title after each time the button in the center of the screen is pressed. The value of the new title is the time it was updated.

The final code:

// main.dart
// Kindacode.com
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _title = 'The First Title';

  @override
  Widget build(BuildContext context) {
    return Title(
      title: _title,
      color: Colors.blue, // This is required
      child: Scaffold(
        body: Center(
          child: TextButton(
            onPressed: () {
              setState(() {
                _title = DateTime.now().toString();
              });
            },
            child: Text(
              'Change Title',
              style: TextStyle(fontSize: 30),
            ),
          ),
        ),
      ),
    );
  }
}

2. Using the SystemChrome API

The SystemChrome class provides the setApplicationSwitcherDescription method that can help us get the job done. Just create a function named changePageTitle and call it each time you want to update the page title:

import 'package:flutter/services.dart';

void setPageTitle(String title, BuildContext context) {
  SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
    label: title,
    primaryColor: Theme.of(context).primaryColor.value, // This line is required
  ));
}

Example

Preview

We will change the page title when navigating between two pages, HomePage and AboutPage. Take a look at it in action on Chrome and Safari:

The complete code:

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

// This function is used to update the page title
void setPageTitle(String title, BuildContext context) {
  SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
    label: title,
    primaryColor: Theme.of(context).primaryColor.value, // This line is required
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Kindacode.com', // This is the default title
        theme: ThemeData(
          primarySwatch: Colors.deepPurple,
        ),
        home: HomePage());
  }
}

// Home Page
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    setPageTitle('Home Page', context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to the About page'),
          onPressed: () async {
            await Navigator.of(context)
                .push(MaterialPageRoute(builder: (_) => AboutPage()));

            // Set the page title when go back
            setPageTitle('Welcome Back to Home Page', context);
          },
        ),
      ),
    );
  }
}

// About Page
class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    setPageTitle('About Page', context);
    return Scaffold(
      appBar: AppBar(
        title: Text('About Us'),
      ),
      body: Center(
        child: Text('About Screen'),
      ),
    );
  }
}

Conclusion

You’ve learned more than one technique to dynamically set the page title of a web app. Flutter is aweasome and there are many things to learn about. Continue moving and keep the ball rolling by taking a look at the following articles:

You can also check out our Flutter category page, or Dart category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles