flutter - 如何在 Flutter Web 中动态更改 App 标题？

Question

Web应用程序通常在选项卡的标题中反射(reflect)当前显示的内容。
将 title parameter提供给 MaterialApp 或 WidgetsApp 意味着如果不重建整个树就无法更改它，即在返回setState的顶层调用MaterialApp。

MaterialApp(
  title: 'Web app title',
  ...,
)

我希望能够随时在应用程序中的任何位置更改应用程序标题。我怎么做？

Answer 1

Flutter 中的动态应用标题
应用标题 可以是 在所有平台上使用 SystemChrome.setApplicationSwitcherDescription 动态更改:

@override
Widget build(BuildContext context) {
    SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
      label: 'Dynamic web app title',
      primaryColor: Theme.of(context).primaryColor.value,
    ));


  return Container(...);
}

SystemChrome 可用于 import 'package:flutter/services.dart'; 并且您想在 setApplicationSwitcherDescription 方法 中调用 build 。
这也是 Title 的做法(参见 source code )，这是 WidgetsApp 、 MaterialApp 等使用的小部件。
因此，您也可以使用 Title 小部件而不是自己访问 SystemChrome:

@override
Widget build(Context context) {
  return Title(
    label: 'Dynamic app title',
    primaryColor: Theme.of(context).primaryColor,
    child: ..,
  );
}

labellabel 参数非常简单:它完全映射到 title 中的 MaterialApp 并且只是一个 String 。primaryColorprimaryColor 将确定系统可能在应用程序切换器中使用的颜色，例如Android 上最近的标题栏颜色。
这是一个 int 而不是 的 Color ，这就是为什么您需要调用 Color.value 将您的原色转换为整数。
干扰其他 Title s
您可能会问自己，在设置 setApplicationSwitcherDescription 上的 Title 属性时调用 title 或插入 MaterialApp 小部件是否会导致任何问题。
答案是: 没有 因为树中最深处的小部件将设置标题。本质上，即使整个应用程序重建，假设您在子进程中调用它，您的 setApplicationSwitcherDescription 也会在 MaterialApp 之后调用，因此您将覆盖 MaterialApp 标题。