Flutter导航跳转Home至SearchStore失败，报Material缺失错误

问题原因 #

Hero动画过渡期间，TextField会被临时挂载到Overlay组件中，此时它无法获取到原有的Material上下文（即使页面本身在Scaffold内），导致Material组件依赖检查失败。

修复步骤 #

在两个页面的Hero组件内部，给TextField包裹一层Material组件，并设置type: MaterialType.transparency以保持原有样式不受影响：

修改后的Home组件代码 #

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'search store',
          style: AppStyle().appTheme.textTheme.displayLarge,
        ),
        SizedBox(
          height: 20,
        ),
        Hero(
          tag: 'hero',
          // 添加Material包裹
          child: Material(
            type: MaterialType.transparency,
            child: TextField(
              readOnly: true,
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => SearchStore(),
                  ),
                );
              },
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                prefixIconColor: AppStyle().brandColor,
                hintText: 'need store name',
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: AppStyle().brandColor,
                    width: 1.5,
                  ),
                  borderRadius: BorderRadius.circular(15),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: AppStyle().brandColor,
                    width: 1.5,
                  ),
                  borderRadius: BorderRadius.circular(15),
                ),
              ),
            ),
          ),
        )
      ],
    );
  }
}

修改后的SearchStore组件代码 #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Hero(
            tag: 'hero',
            // 添加Material包裹
            child: Material(
              type: MaterialType.transparency,
              child: TextField(
                readOnly: false,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.search),
                  prefixIconColor: AppStyle().brandColor,
                  hintText: 'need store name',
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: AppStyle().brandColor,
                      width: 1.5,
                    ),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: AppStyle().brandColor,
                      width: 1.5,
                    ),
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

额外说明 #

• MaterialType.transparency确保Material组件不会添加额外背景或阴影，完全继承原有样式
• 该问题仅出现在Hero动画过渡阶段，与页面本身的Scaffold上下文无关

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