Flutter启动页集成版本检测报错：'Null'不是Widget子类型

为啥会报这个错？ #

type 'Null' is not a subtype of type 'Widget' 说白了就是AnimatedSplashScreen要求nextScreen必须传一个有效的Widget，但你的逻辑里某个分支返回了null。比如当versionOK为false时，你只想着弹更新弹窗，没给nextScreen返回合法的Widget，导致类型不匹配。

具体怎么修？ #

方法1：搞个过渡页面专门处理版本检测 #

别直接在启动页的nextScreen里写复杂分支，先跳转到一个过渡页面，在这个页面里完成版本检测和跳转逻辑：

class VersionCheckPage extends StatefulWidget {
  @override
  _VersionCheckPageState createState() => _VersionCheckPageState();
}

class _VersionCheckPageState extends State<VersionCheckPage> {
  @override
  void initState() {
    super.initState();
    // 页面一加载就执行版本检测和跳转
    _handleVersionAndNavigation();
  }

  Future<void> _handleVersionAndNavigation() async {
    // 1. 获取是否看过引导页的状态
    bool show = await checkOnBoarding();
    // 2. 调用你的Remote Config版本检测逻辑，拿到versionOK
    bool versionOK = await _checkRequiredVersion();

    if (!versionOK) {
      // 弹不可关闭的更新弹窗
      showDialog(
        context: context,
        barrierDismissible: false, // 禁止点击空白关闭
        builder: (context) => AlertDialog(
          title: Text("必须更新"),
          content: Text("请前往应用商店更新到最新版本才能继续使用"),
          actions: [
            TextButton(
              onPressed: () {
                // 这里写跳转到应用商店的逻辑
              },
              child: Text("立即更新"),
            ),
          ],
        ),
      );
    } else {
      // 根据show值跳转到主页面或引导页
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => show ? MainScreen() : IntroScreen(),
        ),
      );
    }
  }

  Future<bool> _checkRequiredVersion() async {
    // 这里放你的Firebase Remote Config版本检测代码
    final remoteConfig = FirebaseRemoteConfig.instance;
    await remoteConfig.fetchAndActivate();
    String requiredVersion = remoteConfig.getString('required_version');
    // 对比当前版本和要求版本，返回是否符合要求
    return _compareVersions(requiredVersion);
  }

  bool _compareVersions(String requiredVersion) async {
    // 版本对比逻辑，比如拆分版本号数字逐一比较，这里给个示例
    PackageInfo packageInfo = await PackageInfo.fromPlatform();
    List<int> currentVersion = packageInfo.version.split('.').map(int.parse).toList();
    List<int> required = requiredVersion.split('.').map(int.parse).toList();
    
    // 简单的版本对比逻辑，你可以根据需求调整得更严谨
    if (currentVersion[0] > required[0]) return true;
    if (currentVersion[0] == required[0] && currentVersion[1] > required[1]) return true;
    if (currentVersion[0] == required[0] && currentVersion[1] == required[1] && currentVersion[2] >= required[2]) return true;
    return false;
  }

  @override
  Widget build(BuildContext context) {
    // 过渡页面可以显示加载动画，或者和启动页一样的布局
    return Scaffold(
      body: Center(child: CircularProgressIndicator()),
    );
  }
}

然后把启动页的nextScreen改成这个过渡页面：

AnimatedSplashScreen(
  splash: YourSplashLogoWidget(), // 你的启动页logo或动画
  nextScreen: VersionCheckPage(),
  // 其他配置比如动画时长、过渡效果等保持不变
);

方法2：用启动页的动画完成回调处理逻辑 #

直接利用AnimatedSplashScreen的onAnimationComplete回调，在启动动画结束后执行版本检测，nextScreen传个临时占位的Widget就行：

AnimatedSplashScreen(
  splash: YourSplashLogoWidget(),
  nextScreen: SizedBox.shrink(), // 临时占位，不会实际显示
  onAnimationComplete: () async {
    bool show = await checkOnBoarding();
    bool versionOK = await _checkRequiredVersion();

    if (!versionOK) {
      showDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) => AlertDialog(
          title: Text("需要更新"),
          content: Text("请更新到最新版本"),
          actions: [
            TextButton(
              onPressed: () { /* 跳应用商店 */ },
              child: Text("立即更新"),
            ),
          ],
        ),
      );
    } else {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => show ? MainScreen() : IntroScreen()),
      );
    }
  },
);

要注意的点 #

• AnimatedSplashScreen的nextScreen绝对不能传null，哪怕是临时占位也要给个合法的Widget。
• 版本检测和SharedPreferences的操作都是异步的，必须等它们执行完再处理导航，不然会出现状态不一致的问题。
• 弹窗设置barrierDismissible: false才能实现不可关闭的效果，防止用户跳过更新。

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