Flutter Web浏览器前进/后退按钮状态持久化问题求助

在Flutter Web中，有一个StatefulWidget会根据状态_changed切换视图：

class _HomePageState extends State<HomePage> {
  bool _changed = false;

  @override
  Widget build(BuildContext context) {
    return _changed ? View2() : View1();
  }
}

当将_changed改为true后，点击浏览器后退按钮再前进，组件并未创建全新的_HomePageState，依然显示修改后的状态，需要强制重建组件状态回到初始值。

Flutter Web在处理浏览器前进后退时，会复用路由栈中已存在的Widget实例及其对应的State，不会重新创建，因此之前修改的状态会被保留。

方法一：通过RouteAware监听路由生命周期重置状态 #

利用Flutter的RouteAware Mixin监听页面的路由状态，当页面从浏览器后退栈中被重新激活时，手动重置状态。

步骤1：配置RouteObserver #

在MaterialApp中添加RouteObserver到导航观察者列表：

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

void main() => runApp(const Application());

class Application extends StatelessWidget {
  const Application({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [routeObserver], // 添加路由观察者
      home: const HomePage(),
    );
  }
}

步骤2：在State中混入RouteAware并监听状态 #

修改_HomePageState，混入RouteAware，在页面被重新激活时重置状态：

class _HomePageState extends State<HomePage> with RouteAware {
  bool _changed = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 注册路由监听
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void didPopNext() {
    // 当页面从浏览器后退栈返回时，重置状态
    setState(() {
      _changed = false;
    });
    super.didPopNext();
  }

  @override
  void dispose() {
    // 取消注册监听
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(_changed ? "CHANGED" : "NOT CHANGED"),
          ElevatedButton(
            onPressed: () { setState(() { _changed = !_changed; }); },
            child: const Text("CHANGE"),
          ),
        ],
      ),
    );
  }
}

方法二：通过更换Widget Key强制重建状态 #

给HomePage设置唯一的Key，每次页面被重新激活时更换新的Key，Flutter会认为这是一个新的Widget实例，从而创建全新的State。

修改Application为StatefulWidget管理Key #

class Application extends StatefulWidget {
  const Application({super.key});

  @override
  State<Application> createState() => _ApplicationState();
}

class _ApplicationState extends State<Application> with RouteAware {
  late Key _homePageKey;
  final RouteObserver<PageRoute> _routeObserver = RouteObserver<PageRoute>();

  @override
  void initState() {
    super.initState();
    _homePageKey = UniqueKey();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void didPopNext() {
    // 更换Key，触发HomePage重建
    setState(() {
      _homePageKey = UniqueKey();
    });
    super.didPopNext();
  }

  @override
  void dispose() {
    _routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [_routeObserver],
      home: HomePage(key: _homePageKey), // 绑定Key
    );
  }
}

HomePage的代码只需确保接收Key参数即可：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

• 方法一适合需要保留Widget实例但重置状态的场景，更轻量；
• 方法二会完全重建Widget及其State，适合需要彻底重置组件的场景。

内容的提问来源于stack exchange，提问作者Kasata Ata