Flutter使用命名路由时触发“null check operator used on a null value”错误

问题根源 #

你遇到的错误本质是MaterialApp内部对initialRoute做了非空校验——虽然你代码里没写!，但框架处理initialRoute时，若其值为null，内部会隐式执行空检查运算符强制解包，直接触发崩溃。

为什么用home就正常？因为home允许为null，框架会兜底处理；但initialRoute被框架默认为必须非空，一旦你初始化时返回了null（比如异步获取token还未完成，暂时无有效值），就会触发内部的空检查错误。

举个典型的错误场景（异步获取token时）：

String? initialRoute;

@override
void initState() {
  super.initState();
  _getToken().then((token) {
    initialRoute = token == null ? '/login' : '/home';
    setState(() {});
  });
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    initialRoute: initialRoute, // 初始化时为null，触发框架内部空检查
    routes: {
      '/login': (context) => LoginPage(),
      '/home': (context) => HomePage(),
    },
  );
}

这里MaterialApp第一次构建时initialRoute为null，框架内部会执行类似initialRoute!的操作，直接导致崩溃。

解决方案 #

方案1：用FutureBuilder等待token获取完成 #

将MaterialApp包裹在FutureBuilder中，等token异步获取完成后，再渲染带正确initialRoute的MaterialApp：

@override
Widget build(BuildContext context) {
  return FutureBuilder<String?>(
    future: _getToken(), // 你的token获取方法
    builder: (context, snapshot) {
      // 加载中显示闪屏页或加载动画
      if (snapshot.connectionState != ConnectionState.done) {
        return const Scaffold(body: Center(child: CircularProgressIndicator()));
      }
      final token = snapshot.data;
      return MaterialApp(
        initialRoute: token == null ? '/login' : '/home',
        routes: {
          '/login': (context) => LoginPage(),
          '/home': (context) => HomePage(),
        },
      );
    },
  );
}

方案2：用home属性配合Navigator跳转 #

保留home属性，先渲染一个过渡页（如闪屏页），在页面初始化后根据token判断跳转，完全避开initialRoute的非空限制：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: const SplashScreen(),
    routes: {
      '/login': (context) => LoginPage(),
      '/home': (context) => HomePage(),
    },
  );
}

// 闪屏页处理跳转逻辑
class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    _checkTokenAndNavigate();
  }

  void _checkTokenAndNavigate() async {
    final token = await _getToken();
    if (mounted) {
      Navigator.pushReplacementNamed(
        context,
        token == null ? '/login' : '/home',
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: CircularProgressIndicator()));
  }
}

方案3：确保initialRoute同步有值 #

如果你的token存储支持同步读取（不推荐依赖同步操作，仅适用于特定场景），可以直接在build方法中同步获取token，保证initialRoute初始化时不为null：

@override
Widget build(BuildContext context) {
  // 示例：假设用同步方式读取token（实际SharedPreferences为异步，仅作演示）
  final token = SyncStorage.getString('token');
  return MaterialApp(
    initialRoute: token == null ? '/login' : '/home',
    routes: {
      '/login': (context) => LoginPage(),
      '/home': (context) => HomePage(),
    },
  );
}

总结 #

核心问题是initialRoute不能在MaterialApp初始化阶段为null，框架内部的非空校验会触发崩溃。通过FutureBuilder等待异步操作完成，或用home配合路由跳转，都能彻底解决这个问题。

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