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

Question

Web 应用程序通常在选项卡的标题中反映当前显示的内容。

将title参数提供给 a MaterialApporWidgetsApp意味着我不能在不重建整个树的情况下更改它，即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它（见源代码），这是由所使用的小部件WidgetsApp，MaterialApp等等。

因此，您还可以使用Title小部件而不是访问SystemChrome自己：

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

label

该label参数非常简单：它完全映射到title您的内容MaterialApp并且只是一个String.

primaryColor

这primaryColor将决定系统可能在应用程序切换器中使用的颜色，例如 Android 上最近的标题栏颜色。
这是 anint而不是a Color，这就是为什么您需要调用Color.value将原色转换为整数的原因。

干扰其他Title小号

您可能会问自己，在设置属性 on时调用setApplicationSwitcherDescription或插入Title小部件是否会导致任何问题。 答案是：不，因为树中最深处的小部件将设置标题。从本质上讲，即使整个应用程序重建，您会后的所谓假设你在呼唤它的孩子，你会因此覆盖的称号。titleMaterialApp
setApplicationSwitcherDescriptionMaterialAppMaterialApp