Flutter google map Image marker wont come in the center

Question

In my Flutter application, i want to add a marker image and spinkit in the center of my google map but instead it shows up inside a white container. and doesnt go on the map. how can i put it in the center and it should remain static while the map moves. Following is the image of the issue:

image of the issue

setState((){
  currentLocation = LatLng(locationData.latitude, locationData.longitude);
});
void onCreated(GoogleMapController controller){
  _mapController = controller;
}
return Scaffold(
  body: SafeArea(
    child:Stack(
      children:[
        Column(
          children:[
            Expanded(
              child: GoogleMap(
                initialCameraPosition: CameraPosition(
                  target: currentLocation,
                  zoom:14.4746,
                ),
                zoomControlsEnabled: false,
                minMaxZoomPreference: MinMaxZoomPreference(1.5,20.8),
                myLocationEnabled: true,
                myLocationButtonEnabled: true,
                mapType: MapType.normal,
                mapToolbarEnabled: true,
                onCameraMove: (CameraPosition position)
                {
                  setState((){
                    _locating=true;
                  });
                  locationData.onCameraMove(position);
                },
                onMapCreated: onCreated,
                onCameraIdle: (){
                  setState((){
                    _locating=false;
                  });
                  locationData.getMoveCamera();
                },
              ),
            ),
            Center(
              child: Container(
                height:50,
                // margin:EdgeInsets.only(bottom:40),
                child: Image.asset('images/marker.png'),
            ),
            ),
            Center(
              child: SpinKitPulse(
                color:Colors.black54,
                size:100.0,
              ) ,
            ),

            Container(
              height:230,
              width:MediaQuery.of(context).size.width,
              color: Colors.white,
              child:Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children:[
                  _locating ? LinearProgressIndicator(
                    backgroundColor: Colors.transparent,
                    valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
                  ) : Container(),
                  Padding(
                    padding: const EdgeInsets.only(left: 10, right: 20),
                    child: TextButton.icon(
                      onPressed:(){},
                      icon: Icon(
                        Icons.location_searching,
                        color: Theme.of(context).primaryColor,
                      ),
                      label: Flexible(
                        child: Text(
                         _locating ? 'Locating'
                             : locationData.selectedAddress.featureName,
                          overflow:TextOverflow.ellipsis,
                          style: TextStyle(
                              fontWeight:FontWeight.bold,
                            fontSize: 20,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 20, right: 20),
                    child: Text(
                      _locating ? '': locationData.selectedAddress.addressLine,
                      style: TextStyle(color:Colors.black54),
                    ),
                  ),
                  SizedBox(height:30,),
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width-40,
                      child: AbsorbPointer(
                        absorbing: _locating ? true : false,
                        child: TextButton(
                          style:TextButton.styleFrom(
                            backgroundColor:_locating ? Colors.grey: Theme.of(context).primaryColor,
                          ),
                          onPressed:(){
                            if(_loggedIn==false){
                              Navigator.pushNamed(context, LoginScreen.id);
                            }
                            else{
                              _auth.updateUser(
                                id: user.uid,
                                number: user.phoneNumber,
                                latitude:locationData.latitude,
                                longitude:locationData.longitude,
                                address: locationData.selectedAddress.addressline,
                              );
                              Navigator.pushNamed(context, HomeScreen.id);
                            }
                          },
                          child: Text(
                            'CONFIRM LOCATION',
                            style: TextStyle(
                                color: Colors.white,
                            ),
                          ),

                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    ),
  ),
);

Answer 1

If you simplify the widget tree, you can see that all your contents are placed inside Column and not a Stack:

return Scaffold(
  body: SafeArea(
    child: Stack( // remove this
      children:[
        Column(
          children:[
            Expanded(...),
            Center(...),
            Center(...),

            Container(
              height:230,
              width:MediaQuery.of(context).size.width,
              color: Colors.white,
              child:Column(...),
            ),
          ],
        ),
      ],
    ),
  ),
);

You should remove the first Stack widget since it doesn't do anything and instead put only the map and the marker inside their own Stack. Something like this:

return Scaffold(
  body: SafeArea(
    child: Column(
      children: [
        Expanded( 
          child: Stack(
            children: [
              GoogleMap(...),
              Center(...), // the marker
              Center(...), // some other part of the marker, I assume
            ],
          ),
        ),
        // Other contents below the map
        Container(
          height: 230,
          width: MediaQuery.of(context).size.width,
          color: Colors.white,
          child: Column(...),
        ),
      ],
    ),
  ),
);

I wasn't able to run the code because it wasn't complete, so there might be some syntax errors, but hopefully, I conveyed the idea.