Flutter Web:MaterialApp标题每次我弹出时都会更改

Question

我正在建立一个个人网站，每次我从项目或博客页面返回主页时，材料应用程序都会从我最初放置的标题更改为项目的文件夹地毯名称。我仍然不明白为什么会发生这种情况，所以任何帮助都将不胜感激。

注意：我的导航路线使用Fluro软件包。

MaterialApp标题如何更改的图像表示

博客页面=>主页

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

Fluro包可以很容易地使用Title Widget来更改Tab名称。

该小工具需要一个"；title(字符串("；和一个"；color(color("；并将通过选项卡更新名称。

如果你只使用Flutter Web，你可以利用http类，也可以替换你的url以匹配你的标题：

 @override
  void initState() {
    super.initState();
    window.history.pushState(null, 'Blog Page', 'blog-page');
  }

这将把你的URL更新为"；https://my-url.com/blog-page"并且添加标题小部件，您的选项卡将显示"；博客页面"也

@override
  Widget build(BuildContext context) {
    return Material(
      child: Title(
        title: 'Blog Page',
        color: Colors.white,
        child: Container(),
      ),
    );
  }

如果出于任何原因您也需要Mobile，请更改您的：import"dart:html"；为图书馆"；universal.html"：https://pub.dev/packages/universal_html