nonstopio
Published in

nonstopio

Flutter web: Change page titles dynamically

When we run the flutter web app on the tab of the browser we see “Flutter Demo” by default, But we can change it through MaterialApp Widget like this.

MaterialApp(
title: 'My App',
color: Colors.red,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
Default title
After Changing to My App

This will remain the same throughout. But we needed it to change each time user goes to a new screen or changes the tab. we came across two different methods of changing titles.

Using SystemChrome
SystemChrome class provides setApplicationSwitcherDescription method that will change the title. It can be used by the setWebTitle() method when have to change the title.

void setWebTitle(String titleName) {
SystemChrome.setApplicationSwitcherDescription(
ApplicationSwitcherDescription(
label: titleName,
primaryColor: 0xffaaaaaa, // Color is required
),
);
}

Using title widget
The title widget is a simple solution. Just need to wrap any widget with the title

Title(
color: 0xffaaaaaa, // Color is required
title: 'Flutter New Title',
child: Scaffold(
appBar: AppBar( title: Text("New Title"),),
body : ...
),
);
}

Complete Code :

--

--

--

A Bespoke Engineering Studio

Recommended from Medium

Bringing onResume/viewDidAppear onPause/viewDidDisappear to Flutter

100 days of Android Development — Day 2

Android Material Component: Toolbar vs DisplayCutout

Introduction to Paging 3.0 in the MAD Skills Series

Write your first Appium Test for Android

Avoiding Fake Fonts in Android

Beautiful Bottom Navigation Bar In Flutter App-Android And Flutter IOS-Dart Flutter

How To Run Android Applications On Windows or PC.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajan Metaliya

Rajan Metaliya

More from Medium

Flutter: Gradient in app bar

Understanding State in Flutter for Beginners

Making 2048 Game in Flutter by using Explicit Animations — Part 2

Theme Switching & Persisting in Flutter using cubits and Stream