Flutter使用Hero组件报错No Material widget found且第二页无法返回求助

错误原因 #

Hero动画的过渡过程需要全局的Material上下文支持，你仅在页面body局部包裹Material，无法覆盖Navigator跳转/返回时的动画上下文，导致返回阶段找不到Material widget报错。

修复步骤 #

首页代码调整 #

确保整个应用的根组件是MaterialApp，页面用Scaffold作为容器，不需要单独在body里包裹Material：

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Hero(
            tag: nyc_img,
            child: ListTile(
              leading: Image.network(
                nyc_img,
                height: 100,
                width: 100,
              ),
              title: const Text("New York City"),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const NYCpage()),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

第二页代码调整 #

同样用Scaffold作为页面容器，移除透明Material的包裹：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: nyc_img,
          child: Image.network(nyc_img),
        ),
      ),
    );
  }
}

关键说明 #

MaterialApp是Material组件库的根节点，它为整个应用提供了必要的主题、路由和Material上下文环境。Hero动画的入场/退场过渡都依赖这个全局上下文，局部包裹Material无法满足动画过程的上下文需求，而Scaffold是Material设计的标准页面容器，能自动继承全局的Material上下文，完美适配Hero动画的运行条件。

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