Flutter页面导航报错：上下文未包含Navigator实例

问题说明 #

点击卡片跳转页面时触发错误：

Navigator operation requested with a context that does not include a Navigator

问题根源 #

你的MaterialApp配置存在两个核心问题：

• 同时设置了builder和home属性，且builder内部直接嵌套Scaffold，导致CardBasicRoute的上下文脱离了MaterialApp维护的Navigator树
• CardBasicRoute自身又返回Scaffold，造成页面出现重复的AppBar，同时进一步割裂了上下文关联

修复方案 #

步骤1：重构MaterialApp配置 #

移除builder中的Scaffold，仅保留Directionality处理RTL布局，同时删除重复的home配置：

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

  @override
  Widget build(BuildContext context) {
    const appTitle = 'طالع بینی ماه تولد';

    return MaterialApp(
      title: appTitle,
      builder: (context, child) {
        return Directionality(
          textDirection: TextDirection.rtl,
          child: child!, // 直接使用MaterialApp传入的child节点
        );
      },
      home: const CardBasicRoute(),
    );
  }
}

步骤2：调整CardBasicRoute的AppBar #

将原来builder中的AppBar移到CardBasicRoute的Scaffold内，统一页面结构：

class CardBasicRouteState extends State<CardBasicRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('طالع بینی ماه تولد', style: TextStyle(color: MyColorsSample.primaryDark)),
        backgroundColor: Colors.white,
        elevation: 0,
        actions: [
          IconButton(onPressed: (){}, icon: const Icon(Icons.star_half, color: Colors.blueAccent)),
          IconButton(onPressed: (){}, icon: const Icon(Icons.share, color: Colors.blueAccent)),
          IconButton(onPressed: (){}, icon: const Icon(Icons.help, color: Colors.blueAccent)),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(8),
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            Container(height:5),
            // 原有卡片列表内容保持不变
            gradientCardSample("حمل/فروردین", "من هستم","hamal.png",1),
            SizedBox(height: 10,),
            // ... 其余卡片
          ],
        ),
      ),
    );
  }

  // 原有gradientCardSample方法保持不变
}

步骤3：验证跳转逻辑 #

此时CardBasicRoute的上下文已处于MaterialApp的Navigator树中，点击卡片时的Navigator.of(context)能正确找到Navigator实例，跳转逻辑无需修改：

onTap: () {
  debugPrint('Card tapped.');
  Navigator.of(context).push(MaterialPageRoute(builder: (context) => const Catgory()));
}

额外优化建议 #

• 移除Category.dart中重复的MyColorsSample类，直接从main.dart或单独的工具类导入，避免代码冗余
• 可考虑使用命名路由（MaterialApp.routes）管理页面跳转，提升代码可维护性

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