Flutter Web: MaterialApp Title changes every time I pop back - flutter

Question

Im building a personal website and everytime I pop back from Projects or Blog Page to my home page the Material App changes from the title i initially put it to the name of the folder carpet of the project. I still don't understand why this happens, so any help would be greatly appreciated.
Note: I'm using the Fluro package for my navigation route.
Image representation of how the MaterialApp Title changes
Blog Page =>Home Page
blog_page.dart
import 'package:flutter/material.dart';
class BlogPage extends StatefulWidget {
#override
_BlogPageState createState() => _BlogPageState();
}
class _BlogPageState extends State<BlogPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
body: WillPopScope(
onWillPop: () async => true,
child: Center(
child: FractionallySizedBox(
widthFactor: 0.8,
child: FittedBox(
fit: BoxFit.fill,
child: Center(
child: Text(
'Hello Stranger!',
style: Theme.of(context).textTheme.headline1,
),
),
),
),
),
),
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'package:webapp/router.dart';
void main() {
FluroRouter.setupRouter();
runApp(
MyApp(),
);
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Personal Website',
initialRoute: 'home',
onGenerateRoute: FluroRouter.router.generator,
);
}
}
home_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
import 'package:webapp/widgets/social_media.dart';
import 'package:webapp/widgets/wave_body.dart';
import 'package:webapp/widgets/custom_button_border.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
HomePage() {
timeDilation = 1.0;
}
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
Size size = new Size(
MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height,
);
return DesktopLayout();
}
}
class DesktopLayout extends StatelessWidget {
const DesktopLayout({
Key key,
#required this.size,
}) : super(key: key);
final Size size;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(47, 66, 83, 1.0),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Flexible(
flex: 1,
child: Container(),
),
Flexible(
flex: 1,
child: ProfessionalSocialMedia(),
),
Flexible(
flex: 1,
child: Container(),
),
Flexible(
flex: 1,
child: PersonalSocialMedia(),
),
Flexible(
flex: 1,
child: Container(),
),
],
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomButtonBorder(
stringText: 'Projects',
size: size,
onPressed: () {
Navigator.pushNamed(context, 'project');
},
),
SizedBox(
width: 50.0,
),
CustomButtonBorder(
stringText: 'Blog',
size: size,
onPressed: () {
Navigator.pushNamed(context, 'blog');
},
)
],
),
Stack(
children: [
WaveBody(
size: size,
xOffset: 0,
yOffset: 0,
color: Color.fromRGBO(21, 160, 132, 1.0),
),
],
),
],
),
);
}
}

Answer 1

The Fluro package could be easily be using the Title Widget which changes the Tab name.
That Widget takes a "title (String)" and a "color (Color)" and will update the name over the Tab.
If you're only using Flutter Web you can take advantage of the http class and also replace your url to match your title:
#override
void initState() {
super.initState();
window.history.pushState(null, 'Blog Page', 'blog-page');
}
That will update your URL to "https://my-url.com/blog-page" and adding the Title Widget your tab will say "Blog Page" as well.
#override
Widget build(BuildContext context) {
return Material(
child: Title(
title: 'Blog Page',
color: Colors.white,
child: Container(),
),
);
}
If by any reason you also need Mobile, change your: import 'dart:html'; for the library "universal_html": https://pub.dev/packages/universal_html