Flutter Web：浏览器刷新按钮致应用重启至闪屏，如何改为刷新当前组件状态？

浏览器刷新本质是重新加载整个Flutter应用，无法直接做到"仅刷新当前Widget状态"，但可以通过状态持久化+路由恢复的方式，让用户体验上近似局部刷新，跳过闪屏和登录流程，直接回到之前的页面并恢复状态。

1. 依赖准备 #

使用shared_preferences实现Web端的本地状态存储（Web端会映射到浏览器的localStorage）：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2

2. 登录状态与路由持久化 #

登录成功时保存用户状态和当前路由：

import 'package:shared_preferences/shared_preferences.dart';

// 登录成功后调用
Future<void> saveSession(String userId) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setBool('isLoggedIn', true);
  await prefs.setString('userId', userId);
  // 同时记录当前路由
  final currentRoute = ModalRoute.of(Navigator.of(context))?.settings.name ?? '/home';
  await prefs.setString('currentRoute', currentRoute);
}

3. 启动时恢复状态与路由 #

在应用启动前读取本地存储，直接跳转到之前的页面：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();
  
  final isLoggedIn = prefs.getBool('isLoggedIn') ?? false;
  final initialRoute = isLoggedIn 
      ? prefs.getString('currentRoute') ?? '/home' 
      : '/login';

  runApp(MyApp(initialRoute: initialRoute));
}

class MyApp extends StatelessWidget {
  final String initialRoute;

  const MyApp({super.key, required this.initialRoute});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: initialRoute,
      routes: {
        '/login': (context) => const LoginScreen(),
        '/home': (context) => const HomeScreen(),
        '/profile': (context) => const ProfileScreen(),
      },
      // 添加路由观察者，自动记录路由变化
      navigatorObservers: [RouteTracker()],
    );
  }
}

4. 自动跟踪路由变化 #

实现路由观察者，每次页面跳转时自动更新本地存储的当前路由：

class RouteTracker extends RouteObserver<PageRoute<dynamic>> {
  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    if (route is PageRoute) {
      _updateCurrentRoute(route.settings.name ?? '');
    }
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    if (previousRoute is PageRoute) {
      _updateCurrentRoute(previousRoute.settings.name ?? '');
    }
  }

  Future<void> _updateCurrentRoute(String route) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('currentRoute', route);
  }
}

5. 页面内恢复状态 #

在需要恢复状态的页面，初始化时读取本地数据或重新请求接口恢复状态：

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _userProfile = '';

  @override
  void initState() {
    super.initState();
    _loadUserProfile();
  }

  Future<void> _loadUserProfile() async {
    final prefs = await SharedPreferences.getInstance();
    final userId = prefs.getString('userId');
    if (userId != null) {
      // 模拟从API获取用户数据，恢复页面状态
      final profile = await _fetchUserProfile(userId);
      setState(() {
        _userProfile = profile;
      });
    }
  }

  Future<String> _fetchUserProfile(String userId) async {
    await Future.delayed(const Duration(milliseconds: 400));
    return '用户ID：$userId | 昵称：Flutter开发者';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: Center(
        child: Text(_userProfile.isEmpty ? '加载中...' : _userProfile),
      ),
    );
  }
}

6. 登出时清除状态 #

登出时清空本地存储，确保下次启动回到登录页：

Future<void> logout(BuildContext context) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.clear();
  if (mounted) {
    Navigator.pushReplacementNamed(context, '/login');
  }
}

内容的提问来源于stack exchange，提问作者Muhammad Umair