路由未在Flutter Web应用程序中按预期进行更新

Question

我有一个用Flutter编写的Web应用程序，其中的路由没有按我期望的那样更新。

上下文

该应用最初是为移动设备编写的，但现在我正尝试将其转换为Web应用。该应用程序的基本体系结构没有更改，但是该应用程序在Chrome上的行为与在Android / iOS上的行为不同。我将在下面解释。

建筑

应用初始化如下：

1. 顶级runApp函数返回一个“ _ServiceLayer”类，该类基本上只是实例化可以通过Provider接口在整个应用程序中访问的一堆服务。在我的简化示例中，我只创建了一个增加计数器的单一服务。
2. 下一层是“ _Dispatcher”小部件，该小部件实际上是从一项服务确定应用程序状态的。
3. 根据应用程序的状态，我返回一个具有不同initialRoute的MaterialApp。如果应用程序状态发生变化，则_Dispatcher处于侦听状态，并将使用不同的initialRoute生成一个新的MaterialApp。

工作示例

// main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  return runApp(_ServiceLayer());
}

class CounterService extends ChangeNotifier {
  int counter = 0;
  increment() {
    counter += 1;
    notifyListeners();
  }
} 

class _ServiceLayer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CounterService(), lazy: false),
      ],
      child: _Dispatcher(),
    );
  }
}

class _Dispatcher extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    _app(String initialRoute) {
      return myMaterialApp(initialRoute);
    }

    int current_value = context.select((CounterService c) => c.counter);
    if (current_value % 2 == 0) return _app('even');
    if (current_value % 2 == 1) return _app('odd');

    return _app('error'); // should never get here, so did not implement
  }
}

class myMaterialApp extends StatelessWidget {
  String initialRoute;

  myMaterialApp(this.initialRoute);

  @override
  Widget build(BuildContext context) {
    print("Generating $initialRoute route"); // <-- ALTERNATES EVEN & ODD
    return MaterialApp(
      title: 'Example',
      initialRoute: initialRoute,
      routes: {
        'even': (BuildContext context) => EvenPage(), 
        'odd': (BuildContext context) => OddPage(), 
      },
    );
  }
}

class EvenPage extends Page {
  String title = 'Even';
}

class OddPage extends Page {
  String title = 'Odd';
}

abstract class Page extends StatelessWidget { 
  String title;

  @override
  Widget build(BuildContext context) {
    var counterService = Provider.of<CounterService>(context, listen: false);
    int ctr = counterService.counter;
    return Column(
      children: [
        Text(title), // <-- ALWAYS SAYS EVEN
        Text("Counter = ${ctr}"),
        RaisedButton(
          child: Text("Press me"),
          onPressed: () {
            counterService.increment();
          }
        ),
      ],
    ); 
  }
}

问题

问题是这样的：如果您反复按该按钮，计数器将按预期增加，并且控制台中的打印语句将在偶数和奇数之间交替显示：

Generating even route
Generating odd route
Generating even route
etc.

这似乎意味着在每次按钮按下时都会重新创建MaterialApp，这是预期的行为。 但是，页面标题始终为“偶”，好像根本没有构建OddPage！

Flutter Doctor

Flutter医生的输出如下：

[✓] Flutter (Channel beta, 1.20.0-7.4.pre, on Mac OS X 10.15.3 19D76, locale en-US)
    • Flutter version 1.20.0-7.4.pre at ...
    • Framework revision 916c3ac648 (3 days ago), 2020-08-01 09:01:12 -0700
    • Engine revision d6ee1499c2
    • Dart version 2.9.0 (build 2.9.0-21.10.beta)


[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at ...
    • Platform android-29, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.8.4

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] Connected device (2 available)
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

问题

1. 这是怎么回事？是否正在生成新的MaterialApp？
2. 您提出不同的设计吗？我考虑了是否要通过initialRoute有效地生成_Dispatcher的工作来生成单个MaterialApp，但是由于种种原因，我不记得我没有追求它。也许我应该重新考虑这种方法？