启动Flutter应用时MaterialApp抛出JSNoSuchMethodError问题求助

问题描述 #

运行Flutter应用时触发红屏，报错信息：

The following JSNoSuchMethodError was thrown building MyApp(dirty):
TypeError: Cannot read properties of undefined (reading 'MaterialApp')

手动进入注册页面再返回首页后应用可正常运行，移除MaterialApp会导致应用完全无法启动。基础代码如下：

import 'package:flutter/material.dart';
import 'package:flut/signup.dart';
import 'package:flut/homepage.dart';
import 'package:flut/verify.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/signup': (context) => SignupScreen(),
        '/verify': (context) => VerifyScreen(),
      },
    );
  }
}

解决方案 #

1. 修复HomePage的上下文依赖逻辑 #

报错出现在启动加载首页时，跳转后恢复，大概率是HomePage在build阶段过早访问MaterialApp提供的上下文服务（如Theme.of(context)、Navigator.of(context)）。

• 若HomePage是StatefulWidget，将依赖上下文的初始化逻辑移到initState并延迟执行：

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

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

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    // 延迟到Widget渲染完成后执行上下文相关操作
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 比如获取主题、调用导航等操作
    });
  }

  @override
  Widget build(BuildContext context) {
    // build方法仅负责UI渲染，不执行依赖上下文的初始化逻辑
    return Scaffold(body: ...);
  }
}

2. 替换路由初始化方式 #

改用home属性指定首页，替代initialRoute+routes的组合，避免路由初始化时的上下文冲突：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    home: const HomePage(), // 直接指定首页
    routes: {
      '/signup': (context) => SignupScreen(),
      '/verify': (context) => VerifyScreen(),
    },
  );
}

3. 清理缓存并更新依赖 #

执行以下命令清理缓存、更新依赖后重新运行：

flutter clean
flutter pub upgrade
flutter run

4. 使用GlobalKey管理导航状态 #

若HomePage存在跨Widget的导航调用，在MyApp中定义GlobalKey绑定导航器，避免上下文获取异常：

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // 定义全局导航key
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: _navigatorKey,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/signup': (context) => SignupScreen(),
        '/verify': (context) => VerifyScreen(),
      },
    );
  }
}

// 在需要导航的地方调用
_navigatorKey.currentState?.pushNamed('/signup');

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