Flutter问题解决方案插件flutter_issue_108697_workaround的使用

Flutter Issue 108697导致在页面刷新时无法恢复状态。flutter_issue_108697_workaround插件通过直接从浏览器的历史记录API获取状态来解决这个问题。

示例

此应用在页面刷新时保留了文本内容。可运行的项目示例可以在以下链接中找到：示例代码

使用方法

在你的RouteInformationParser中添加以下代码：

import 'package:flutter/widgets.dart';
import 'package:flutter_issue_108697_workaround/flutter_issue_108697_workaround.dart'; // ADDED

class MyRouteInformationParser extends RouteInformationParser<Configuration> {
  @override
  Future<Configuration> parseRouteInformation(RouteInformation routeInformation) async {
    routeInformation = apply108697Workaround(routeInformation);                        // ADDED
    return Configuration(routeInformation.location, routeInformation.state);
  }

  @override
  RouteInformation restoreRouteInformation(Configuration configuration) {
    return RouteInformation(
      location: configuration.location,
      state: configuration.state,
    );
  }
}

该方法命名刻意显得笨拙，以便你在阅读代码时能定期注意到它，并检查Flutter是否已经修复了这个问题，从而可以移除这个变通方案。

解决方案详情

如果不是在Web环境下，什么也不做。

在Web环境中，如果RouteInformation.state不为null，则什么也不做。

否则，直接通过浏览器的历史记录API检查状态，如下所示：

final stateJson = js.context.callMethod(
  'eval',
  ['JSON.stringify(history.state.state)'],
);

return RouteInformation(
  location: routeInformation.location,
  state: jsonDecode(stateJson),
);

完整示例Demo

以下是完整的示例代码，展示了如何使用flutter_issue_108697_workaround插件：

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

void main() => runApp(MyApp());

final _controller = TextEditingController();

class Configuration {
  final String? location;
  final Object? state;

  Configuration(this.location, this.state);

  @override
  toString() => '$location $state';
}

class MyRouterDelegate extends RouterDelegate<Configuration>
    with ChangeNotifier {
  MyRouterDelegate() {
    _controller.addListener(notifyListeners);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('This field is preserved on page refresh')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: TextField(controller: _controller),
        ),
      ),
    );
  }

  @override
  Future<bool> popRoute() async => true;

  @override
  Future<void> setNewRoutePath(configuration) async {
    final state = configuration.state;
    if (state is! Map) return;
    _controller.text = state['text'] ?? '';
    notifyListeners();
  }

  @override
  Configuration get currentConfiguration {
    return Configuration('/', {'text': _controller.text});
  }
}

final delegate = MyRouterDelegate();

class MyRouteInformationParser extends RouteInformationParser<Configuration> {
  @override
  Future<Configuration> parseRouteInformation(RouteInformation ri) async {
    ri = apply108697Workaround(ri); // Remove this line, and text is lost.
    return Configuration(ri.location, ri.state);
  }

  @override
  RouteInformation restoreRouteInformation(Configuration configuration) {
    return RouteInformation(
      location: configuration.location,
      state: configuration.state,
    );
  }
}

final parser = MyRouteInformationParser();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: delegate,
      routeInformationParser: parser,
      debugShowCheckedModeBanner: false,
    );
  }
}

通过上述步骤和代码示例，您可以有效地使用flutter_issue_108697_workaround插件来解决Flutter中的状态恢复问题。