Flutter中GoogleMap上FloatingActionButton不显示及布局优化咨询

原有代码的核心问题： #

• 你把FloatingActionButton放在了onMapCreated回调里，这是错误的——这个回调是用来初始化地图控制器的，不能在这里构建UI Widget
• 使用Column布局导致地图只能占据固定高度（325），无法铺满全屏
• 控件层级不对，没法实现悬浮效果

重构后的实现思路： #

用Stack作为根布局，让GoogleMap作为底层组件占满整个屏幕，然后把表单、按钮等控件通过Positioned或Align定位在地图上方，实现悬浮效果。

完整代码示例： #

@override
Widget build(BuildContext context) {
  if (lat == null || lng == null) {
    return Container(child: Center(child: Text("Loading location...")));
  }

  return Scaffold(
    key: _scaffoldKey,
    resizeToAvoidBottomInset: false, // 替代过时的resizeToAvoidBottomPadding
    body: Stack(
      children: [
        // 底层：全屏的GoogleMap
        GoogleMap(
          markers: Set<Marker>.of(markers.values),
          initialCameraPosition: CameraPosition(target: LatLng(lat, lng), zoom: 9.0),
          myLocationEnabled: true,
          compassEnabled: true,
          myLocationButtonEnabled: true,
          mapType: MapType.normal,
          onMapCreated: (GoogleMapController controller) {
            controller.setMapStyle(Utils.mapStyles);
            // 这里只做地图初始化操作，不要放UI控件
          },
        ),
        // 悬浮在顶部的表单
        Positioned(
          top: 40, // 距离顶部的距离，可根据需要调整
          left: 16,
          right: 16,
          child: Form(
            key: _formKey,
            child: Container(
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.7), // 半透明背景，让表单更清晰
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  TextFormField(
                    controller: nameController,
                    cursorColor: Colors.white,
                    style: TextStyle(color: Colors.white),
                    validator: (value) {
                      if (value?.isEmpty ?? true) {
                        return 'Identifier is required';
                      }
                      return null;
                    },
                    decoration: InputDecoration(
                      labelText: 'Identifier',
                      labelStyle: TextStyle(color: Colors.white70),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white54),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                      ),
                    ),
                  ),
                  SizedBox(height: 16),
                  TextFormField(
                    controller: feedbackController,
                    cursorColor: Colors.white,
                    style: TextStyle(color: Colors.white),
                    decoration: InputDecoration(
                      labelText: 'Notes',
                      labelStyle: TextStyle(color: Colors.white70),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white54),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white),
                      ),
                    ),
                    maxLines: 3, // 允许多行输入，提升体验
                  ),
                  SizedBox(height: 20),
                  // 表单内的按钮（RaisedButton已过时，推荐用ElevatedButton）
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      onPressed: _submitForm,
                      child: Text("Submit"),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        // 悬浮在右下角的FloatingActionButton
        Positioned(
          bottom: 20,
          right: 20,
          child: FloatingActionButton(
            onPressed: () {
              // 这里可以放你想要的操作，比如测试按钮的逻辑
              print("Test button pressed");
            },
            child: Text("Test"),
          ),
        ),
      ],
    ),
  );
}

关键细节说明： #

• Stack布局：让所有子控件堆叠在一起，底层的GoogleMap自然占满全屏
• Positioned定位：精确控制表单和按钮的位置，你可以根据需求调整top、left、right、bottom参数
• 半透明背景：给表单添加半透明背景，确保在地图上依然清晰可读
• 替代过时组件：把resizeToAvoidBottomPadding换成resizeToAvoidBottomInset，RaisedButton换成ElevatedButton（符合Flutter最新规范）
• 地图初始化：onMapCreated回调只处理地图相关的初始化逻辑，不要在这里构建UI控件

这样就能实现你想要的效果：地图铺满全屏，表单和按钮悬浮在上方，所有控件都能正常交互~

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