Change Page Title Dynamically in Flutter Web with Example

In this tutorial, 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.

Full App Example:

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

Output Screenshot:

In this way, you can change the title of page at browser tab dynamically or programmatically in Flutter Web. 

#flutter