Flutter实现启动网络检测跳转离线页及解决相关编译报错

分为编译错误修复、无网跳转离线下载页实现两部分：

一、编译报错修复 #

报错核心原因是你使用的Flutter版本为3.0+空安全版本，而依赖的两个第三方包flutter_translate:3.1.0、percent_indicator:4.2.1没有适配新版Flutter的API变更与空安全规则，可按优先级选以下方案修复：

• 优先方案：升级依赖版本
  打开项目根目录下的pubspec.yaml文件，将两个依赖更新到适配新版Flutter的最新稳定版本，之后执行命令重新拉取依赖即可：

  flutter pub get
  

• 临时修复方案（无法升级依赖时使用）：
  1. 按报错路径找到flutter_translate包下的device_locale.dart文件第11行，原代码：

     final deviceLocales = WidgetsBinding.instance.window.locales;
     

     替换为新版API兼容写法：

     final deviceLocales = WidgetsBinding.instance.platformDispatcher.locales;
     

     新版Flutter已废弃window直接访问属性，统一迁移到platformDispatcher下，原写法同时不符合空安全访问规则。
  2. 按报错路径找到percent_indicator包下的linear_percent_indicator.dart文件第162行，原错误代码：

     WidgetsBinding?.instance.addPostFrameCallback((_) {
     

     替换为正确写法：

     WidgetsBinding.instance.addPostFrameCallback((_) {
     

     原代码错误将可空标记加在了类名WidgetsBinding上，属于语法错误，WidgetsBinding类本身不可空，初始化后instance实例非空，直接去掉类名后的错误?标记即可。
• 修复后如果仍有编译缓存问题，执行清理命令重编译：

  flutter clean
  flutter pub get
  flutter run
  

二、无网自动跳转离线下载页实现 #

按以下步骤实现，同时支持启动时检测、使用过程中网络变化实时跳转：

1. 添加官方维护的网络状态检测依赖
   打开pubspec.yaml，加入connectivity_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^5.0.2

执行flutter pub get拉取依赖。
2. 实现全局路由与网络监听逻辑
在项目入口main.dart中编写如下逻辑，核心是通过全局NavigatorKey实现无context跳转，同时监听网络状态实时切换页面：

import 'package:flutter/material.dart';
import 'package:connectivity_plus/connectivity_plus.dart';
// 替换为你自己项目的首页、下载页导入路径
import 'home_page.dart';
import 'download_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final Connectivity _connectivity = Connectivity();
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  @override
  void initState() {
    super.initState();
    // 启动时首次检测网络状态
    _checkInitNetwork();
    // 注册网络状态持续监听
    _connectivity.onConnectivityChanged.listen(_handleNetworkChange);
  }

  Future<void> _checkInitNetwork() async {
    final initStatus = await _connectivity.checkConnectivity();
    _handleNetworkChange(initStatus);
  }

  void _handleNetworkChange(ConnectivityResult status) {
    if (status == ConnectivityResult.none) {
      // 无网时跳转下载页，清空路由栈禁止返回
      _navigatorKey.currentState?.pushAndRemoveUntil(
        MaterialPageRoute(builder: (context) => const DownloadPage()),
        (route) => false,
      );
    } else {
      // 有网时跳转正常首页，清空路由栈
      _navigatorKey.currentState?.pushAndRemoveUntil(
        MaterialPageRoute(builder: (context) => const HomePage()),
        (route) => false,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: _navigatorKey,
      title: '你的应用名称',
      theme: ThemeData(primarySwatch: Colors.blue),
      // 初始展示加载页，等网络检测完成自动跳转对应页面
      home: const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      ),
    );
  }
}

• 注意事项：
  • 如果需要识别「已连接WiFi/移动网络但实际无法访问公网」的假连网状态，可以在检测到网络连接非none时，加一步公网连通性校验（比如发起一次对公共域名的轻量请求），避免误判。
  • 路由跳转时务必清空栈，防止无网状态下用户通过返回键进入需要联网的页面。

内容的提问来源于stack exchange，提问作者Techno Hub