Zoom Control in Flutter with mapbox_gl: ^0.16.0

Using the mapbox_gl: ~0.16.0 plugin, I am developing a Flutter-Mapbox application. I've added fill layers to the map using my api fetched GeoJSON data source, but I still need to add zoom in and out controls similar to the ones below: Since I couldn't find any appropriate plugin-based zoom control attribute or properties by mapbox_gl, I created my own zoom controller design. However, I don't know how to implement the zoom in and out functions. This is my simplified code snippets:

// view code
Stack(
  children: [
    SizedBox(
      height: Get.height,
      child: GetBuilder<HomeController>(
        init: HomeController(),
        initState: (_) {},
        builder: (_) {
          return MapboxMap(
            onMapCreated: (mController) {
              mapboxMapController = mController;
              controller.onMapCreated(mController);
            },
            zoomGesturesEnabled: true,
            accessToken: "<MAPBOX ACCESS TOKEN>",
            initialCameraPosition: const CameraPosition(
                target:
                    LatLng(47.59051426075817, -107.77329953835964),
                zoom: 15.0),
            doubleClickZoomEnabled: true,
            trackCameraPosition: true,
            onCameraIdle: () {
              controller.getView(mapboxMapController);
            },
            myLocationEnabled: false,
            styleString: "mapbox://styles/mapbox/outdoors-v12",
            compassEnabled: true, // Show the compass button
            rotateGesturesEnabled: false, // Allow rotation gestures
            tiltGesturesEnabled: false, // Allow tilt gestures
            
          );
        },
      ),
    ),
    ...other widgets
    Positioned(
      bottom: 150,
      right: 10,
      child: Container(
        decoration: BoxDecoration(
            color: white, borderRadius: BorderRadius.circular(6)),
        width: 37,
        child: Padding(
          padding: const EdgeInsets.symmetric(
              vertical: 5.0, horizontal: 5),
          child: Column(
            children: [
              InkWell(
                onTap: () {
                  controller.zoomIn();
                },
                child: const SizedBox(
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      color: white,
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(3.0),
                      child: Icon(
                        Icons.add,
                        color: black,
                        size: 23,
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(
                height: 4,
              ),
              Container(
                height: 1,
                color: const Color.fromARGB(255, 226, 226, 226),
              ),
              const SizedBox(
                height: 4,
              ),
              InkWell(
                onTap: () {
                  controller.zoomOut();
                },
                child: const SizedBox(
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      color: white,
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(3),
                      child: Icon(
                        Icons.remove,
                        color: black,
                        size: 23,
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    )
  ],
)

Since I couldn't locate any resources or documentation, I have no idea how the rendereed map updates in response to the user's zoom control or how the zoom event in this plugin truly operates. Any assistance or code snippets would be highly appreciated. Thank you!

  // Method to handle zoom in
  Future<void> zoomIn(MapboxMapController mapboxMap) async {
    double currentZoom = mapboxMap.cameraPosition!.zoom;

    CameraPosition newCameraPosition = CameraPosition(
      target: mapboxMap.cameraPosition!.target,
      zoom: currentZoom + 1,
    );

    mapboxMap.animateCamera(CameraUpdate.newCameraPosition(newCameraPosition));
  }

  // Method to handle zoom out
  Future<void> zoomOut(MapboxMapController mapboxMap) async {
    double currentZoom = mapboxMap.cameraPosition!.zoom;

    if (currentZoom > 1) {
      CameraPosition newCameraPosition = CameraPosition(
        target: mapboxMap.cameraPosition!.target,
        zoom: currentZoom - 1,
      );

      mapboxMap
          .animateCamera(CameraUpdate.newCameraPosition(newCameraPosition),);
    }
  }