How to Change Page Title Dynamically in Flutter Web

In this example, you will learn to change the title of the page dynamically when the page opens or after opening the page with a button click or programmatically. Page title which is displayed on a browser tab, or simply content of <title> tag in HTML.

MaterialApp(
  title: "Main Title"
)

To set the title of the website globally for all pages, pass the string on the "title" attribute of the MaterialApp widget.

Now, look below to change the title of specific pages, or change the title programmatically with a button click.

Widget build(BuildContext context) {
    return  Title( 
      title: "Home Page",
      color: Colors.redAccent, //no importance here but required
      child:Scaffold()
    );
}

You can use Title() widget at the root during the widget build like above to set the title of the page.

import 'package:flutter/services.dart';

SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
  label: "My Home Page",
  primaryColor: Theme.of(context).primaryColor.value, // This line is required
));

Use this code, if you want to update the page title on tab in Flutter Web.

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

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Main Title",
      initialRoute: "/",
      routes: {
        "/":(context)=>Home(),
        "/about":(context)=>About()
        //add more pages here
      },
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  @override
  Widget build(BuildContext context) {
    return  Title( 
      title: "Home Page",
      color: Colors.redAccent, //no importance here but required
      child:Scaffold(
          appBar: AppBar( 
             title: Text("This is Home Page"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          body: Container(
              padding: EdgeInsets.all(30),
              child: Column(
                 children: [
                    ElevatedButton(
                      onPressed: (){
                          Navigator.pushNamed(context, "/about");
                      }, 
                      child: Text("Open About Page")
                    ),

                    Padding(padding: EdgeInsets.all(15)),

                    ElevatedButton(
                      onPressed: (){
                            SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
                              label: "My Home Page",
                              primaryColor: Theme.of(context).primaryColor.value, // This line is required
                            ));
                      }, 
                      child: Text("Change Title")
                    ),

                 ],
              ),
          ),
       )
    );
  }
}

class About extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Title(
      title: "About Us",
      color: Colors.red, //no importance here but required
      child:Scaffold(
        appBar: AppBar(
          title:Text("This is About Page")
        ),
      )
     );
  }
}