Flutter : Google Maps - updating maps bearing automatically using value from stream builder

Viewed 1144

I have a compass plugin that is giving direction angle, and also location plugin that provide the current location. With these plugins, I use google maps placed under Streambuilder to put my current location as marker and with a line to another location.

The issue I am facing currently is how to rotate the map automatically when the device is rotated, as the first plugin provides direction angle (double value) that gets updated streams as the device rotate.

I wanted to use this angle value to update Google Maps bearing automatically, so that the map rotates accordingly.

I have tired many ways but of no use. Google maps does not respond.

this is my code:


  Completer<GoogleMapController> _controller = Completer();



return StreamBuilder(
              stream: FlutterQiblah.qiblahStream,
              builder: (_, AsyncSnapshot<QiblahDirection> snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) return LoadingIndicator();

                final qiblahDirection = snapshot.data;


                  _goToTheLake(qiblahDirection);

                return GoogleMap(
                  mapType: MapType.satellite,
                  zoomGesturesEnabled: true,
                  compassEnabled: true,
                  myLocationEnabled: false,
                  myLocationButtonEnabled: true,
                  rotateGesturesEnabled: true,
                  initialCameraPosition: CameraPosition(
                    target: position,
                    zoom: 18,
                    // bearing: qiblahDirection.direction,
                  ),
                  markers: Set<Marker>.of(
                    <Marker>[
                      widget.meccaMarker,
                      Marker(
                        draggable: true,
                        markerId: MarkerId('Marker'),
                        position: position,
                        icon: BitmapDescriptor.defaultMarker,
                        rotation: qiblahDirection.qiblah,
                        onTap: () {
                          _goToTheLake(qiblahDirection);
                        },
                        onDragEnd: (LatLng value) {
                          position = value;
                          _positionStream.sink.add(value);
                        },
                        zIndex: 5,
                      ),
                    ],
                  ),
                  circles: Set<Circle>.of([
                    Circle(
                      circleId: CircleId("Circle"),
                      radius: 10,
                      center: position,
                      fillColor: Theme.of(context).primaryColorLight.withAlpha(100),
                      strokeWidth: 1,
                      strokeColor: Theme.of(context).primaryColorDark.withAlpha(100),
                      zIndex: 3,
                    )
                  ]),
                  polylines: Set<Polyline>.of([
                    Polyline(
                      polylineId: PolylineId("Line"),
                      points: [position, QiblahMaps.LatLong],
                      color: Theme.of(context).primaryColor,
                      width: 5,
                      zIndex: 4,
                    )
                  ]),
                  onMapCreated: (GoogleMapController controller) {
                    _controller.complete(controller);
                  },
                );
              },
            )

I have placed this function as future called from inside stream builder in order to change the "bearing" of the map:

    final GoogleMapController controller = await _controller.future;
    controller.moveCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(
          bearing: qiblahDirection.direction,
        ),
      ),
    );
  } ```
1 Answers

Try this plugin flutter_compass use the events to update google map bearing as you wish

Related