Anybody explain me how can I fit google_maps_flutter in the yellow area?

I just want to add the google maps widget to the body with a bottomsheet, the map wiget is not responsive does fit in the yellow area how can I fit.

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("HOME"),
      ),
      body: WillPopScope(
          onWillPop: () async {
            bool dailog = await showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: (const Text("CONFIRM")),
                content: const Text("Would you like to Logout ?"),
                actions: [
                  TextButton(
                      onPressed: () {
                        Navigator.of(context).pop(false);
                      },
                      child: const Text("No")),
                  TextButton(
                      onPressed: () {
                        Navigator.of(context).pop(true);
                      },
                      child: const Text("Yes")),
                ],
              ),
            );

            return Future.value(dailog);
          },
          child: Container(
            decoration: BoxDecoration(color: Colors.amber),
            padding: EdgeInsets.all(20),
            child: GoogleMap(
              mapType: MapType.hybrid,
              initialCameraPosition: CameraPosition(
                target: LatLng(37.42796133580664, -122.085749655962),
                zoom: 14.4746,
              ),
            ),
          )),
      bottomSheet: BottomSheet(),
    );
  }
}

I wrap it in a container to give sizing but it didnt work for me.