Flutter Web：MaterialApp Title 每次弹出时都会改变

Question

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

注意：我正在使用 Fluro 包作为我的导航路线。

MaterialApp 标题如何变化的图像表示

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

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

该小部件采用“标题（字符串）”和“颜色（颜色）”，并将更新选项卡上的名称。

如果您只使用 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(),
      ),
    );
  }

如果出于任何原因您还需要移动设备，请更改您的： import 'dart:html';对于图书馆“universal_html”：https://pub.dev/packages/universal_html