Flutter中showSearch手势异常求助：Navigator上下文错误

问题根源 #

你传递给showSearch的context是MainApp组件的上下文，这个上下文位于MaterialApp的层级之上，而Navigator实例是由MaterialApp提供的，因此该上下文无法访问到Navigator，触发断言错误。

解决方案 #

提供两种可行修复方式：

方式一：使用Builder获取子树上下文

通过Builder组件包裹搜索按钮，生成一个属于MaterialApp子树的新上下文，确保能访问到Navigator：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Raincheck"),
          actions: [
            Builder(
              builder: (innerContext) => IconButton(
                icon: const Icon(Icons.search),
                onPressed: () {
                  showSearch(
                    context: innerContext,
                    delegate: LocationSearchDelegate(),
                  );
                },
              ),
            ),
          ],
        ),
        body: const Center(
          child: HomePage(),
        ),
      ),
    );
  }
}

方式二：拆分组件，使用子组件上下文

将Scaffold提取为独立组件，该组件的上下文天然属于MaterialApp子树，可直接访问Navigator：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomeScaffold(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Raincheck"),
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              showSearch(
                context: context,
                delegate: LocationSearchDelegate(),
              );
            },
          ),
        ],
      ),
      body: const Center(
        child: HomePage(),
      ),
    );
  }
}

原理说明 #

MaterialApp内部会初始化Navigator，只有其子树内的上下文才能获取到这个Navigator实例。上述两种方式都是确保传递给showSearch的上下文处于MaterialApp的子树中，从而解决断言错误。

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