如何在ListView中嵌入GoogleMap并占满屏幕空间？解决无限高度报错

问题根源 #

你遇到的无限高度报错，核心原因是：

• ListView 是滚动容器，即便设置了 shrinkWrap: true，内部的 Expanded 也无法获取有效的父级高度约束，导致 GoogleMap 没有确定的高度值。
• 需求明确页面无需滚动，使用 ListView 完全没必要，反而会破坏布局约束逻辑。

修正后的代码 #

Scaffold(
  appBar: const CustomAppBar(),
  body: NestedScrollView(
    physics: const ClampingScrollPhysics(), // 修正原代码多写的一对括号
    headerSliverBuilder: (context, innerBoxIsScrolled) => [
      SliverAppBar(
        floating: false,
        pinned: true,
        expandedHeight: 80,
        collapsedHeight: 56,
        backgroundColor: AppColors.black,
        flexibleSpace: const FlexibleTitleAppBar(),
      ),
    ],
    body: Column(
      children: [
        Container(
          color: AppColors.black,
          child: Padding(
            padding: const EdgeInsets.only(left: 16, right: 16, top: 28, bottom: 28),
            child: HeaderComponent(),
          ),
        ),
        // 用Expanded让GoogleMap占据剩余全部可用空间
        Expanded(
          child: GoogleMap( // 修正原代码组件名拼写错误
            compassEnabled: false,
            initialCameraPosition: cameraPosition,
            gestureRecognizers: Set()
              ..add(
                Factory<EagerGestureRecognizer>(
                  () => EagerGestureRecognizer(),
                ),
              ),
            markers: markers,
          ),
        ),
      ],
    ),
  ),
);

关键修改点 #

• 移除 ListView，改用 Column 作为主布局容器，契合无需滚动的需求。
• 保留 Expanded 包裹 GoogleMap，使其自动占据 Column 中除头部组件外的全部剩余屏幕空间。
• 修复原代码两处小问题：ClampingScrollPhysics()() 多余的括号、组件名 GoogleMaps 应为官方标准的 GoogleMap。

额外说明 #

如果你的 HeaderComponent 高度固定，这种布局可以完美保证 GoogleMap 填满剩余空间，且整个页面无滚动效果。后续若需添加可滚动内容，再考虑引入滚动容器即可。

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