Flutter应用启动时显示AlertDialog报No MaterialLocalizations错误求助

问题根因 #

你调用showDialog时传入的context属于MyApp组件，此时MaterialApp还未完成挂载，该context的祖先节点中不存在MaterialApp提供的MaterialLocalizations资源，而AlertDialog依赖该资源进行内置文案渲染，因此触发报错。

可行解决方案 #

方案1：将弹窗逻辑迁移到MaterialApp的home子组件中（最推荐） #

直接把启动弹窗的逻辑放在首页面的初始化回调里，此时首页面的context已经能获取到MaterialApp的全部资源：

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '启动弹窗Demo',
      home: const HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    // 页面首帧渲染完成后弹出弹窗
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _showStartAlert(context);
    });
  }

  void _showStartAlert(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('启动提示'),
        content: const Text('欢迎使用本应用'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('确定'),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(child: Text('首页面')),
    );
  }
}

方案2：无需单独拆分首页组件，直接在MyApp中实现 #

通过全局GlobalKey获取MaterialApp层级的有效context来调用弹窗：

void main() => runApp(const MyApp());

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

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

class _MyAppState extends State<MyApp> {
  // 用于获取MaterialApp层级的有效context
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 使用navigatorKey对应的context调用弹窗
      _showStartAlert(navigatorKey.currentContext!);
    });
  }

  void _showStartAlert(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('启动提示'),
        content: const Text('欢迎使用本应用'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('确定'),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '启动弹窗Demo',
      // 绑定全局navigatorKey
      navigatorKey: navigatorKey,
      home: const Scaffold(
        body: Center(child: Text('首页面')),
      ),
    );
  }
}

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