fix(bugs): update mapStyle when change theme

2025-01-22 23:13:55 +07:00
parent 408c92d843
commit bcf205f171
12 changed files with 526 additions and 543 deletions
--- a/lib/feature/map/map_screen.dart
+++ b/lib/feature/map/map_screen.dart
@@ -2,10 +2,12 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:developer';

+import 'package:flutter/services.dart';
 import 'package:flutter/material.dart';
 import 'package:geolocator/geolocator.dart';
 import 'package:google_maps_cluster_manager_2/google_maps_cluster_manager_2.dart';
-import 'package:google_maps_flutter/google_maps_flutter.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart'
+    hide ClusterManager, Cluster;
 import 'package:sfm_app/feature/devices/device_model.dart';
 import 'package:sfm_app/bloc/map_bloc.dart';
 import 'package:sfm_app/feature/map/widget/on_tap_marker_widget.dart';
@@ -13,7 +15,6 @@ import 'package:sfm_app/product/base/bloc/base_bloc.dart';
 import 'package:sfm_app/product/constant/icon/icon_constants.dart';
 import 'package:sfm_app/product/permission/location_permission.dart';
 import 'package:sfm_app/product/services/api_services.dart';
-
 import '../../product/constant/enums/app_theme_enums.dart';

 class MapScreen extends StatefulWidget {
@@ -32,7 +33,7 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {
  late BitmapDescriptor fireStationIcon;
  late MapBloc mapBloc;
  late ClusterManager clusterManager;
-  MapType mapType = MapType.terrain;
+  // MapType mapType = MapType.terrain;
  APIServices apiServices = APIServices();
  final streamController = StreamController<GoogleMapController>.broadcast();
  List<Device> devices = [];
@@ -50,30 +51,31 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {
  );
  Set<Marker> markersAll = {};
  List<Marker> markers = [];
-  LatLng myLocation = const LatLng(213761, 123123);
-  Position? position;
-  bool isAllowLocationPermission = false;
-  String themeMode = "";
+  // LatLng myLocation = const LatLng(213761, 123123);
+  // Position? position;
+  // bool isAllowLocationPermission = false;
+  String themeMode = '';
  @override
  void initState() {
    super.initState();
    mapBloc = BlocProvider.of(context);
-    checkTheme();
    _loadIcons();
    getAllMarkers();
    clusterManager = _initClusterManager();
-    DefaultAssetBundle.of(context)
-        .loadString("assets/map_themes/maps_dark_theme.json")
-        .then(
-          (value) => {themeMode = value},
-        );
  }

  @override
  void dispose() {
-    streamController.close();
-    _controller = Completer();
    super.dispose();
+    _controller = Completer();
+    streamController.close();
+  }
+
+  void onMapCreated(GoogleMapController controller) {
+    _controller.complete(controller);
+    streamController.add(controller);
+    clusterManager.setMapId(controller.mapId);
+    checkTheme();
  }

  @override
@@ -88,40 +90,35 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {
                stream: mapBloc.streamPolylines,
                builder: (context, polylinesSnapshot) {
                  return StreamBuilder<String>(
-                      stream: mapBloc.streamMapTheme,
-                      builder: (context, mapThemeSnapshot) {
-                        return GoogleMap(
-                          initialCameraPosition: _myPosition,
-                          mapType: mapType,
-                          onMapCreated: (GoogleMapController controller) {
-                            controller.setMapStyle(themeMode);
-                            if (!_controller.isCompleted) {
-                              _controller.complete(controller);
-                            }
-                            streamController.sink.add(controller);
-                            clusterManager.setMapId(controller.mapId);
-                          },
-                          markers: markerSnapshot.data ?? markersAll
-                            ..addAll(markers),
-                          zoomControlsEnabled: true,
-                          myLocationEnabled: true,
-                          mapToolbarEnabled: false,
-                          onCameraMove: (position) {
-                            clusterManager.onCameraMove(position);
-                          },
-                          onCameraIdle: () {
-                            clusterManager.updateMap();
-                          },
-                          polylines: {
-                            Polyline(
-                              polylineId: const PolylineId('router'),
-                              points: polylinesSnapshot.data ?? [],
-                              color: Colors.deepPurpleAccent,
-                              width: 8,
-                            ),
-                          },
-                        );
-                      });
+                    stream: mapBloc.streamMapTheme,
+                    builder: (context, mapThemeSnapshot) {
+                      return GoogleMap(
+                        initialCameraPosition: _myPosition,
+                        // mapType: mapType,
+                        onMapCreated: onMapCreated,
+                        markers: markerSnapshot.data ?? markersAll
+                          ..addAll(markers),
+                        zoomControlsEnabled: false,
+                        myLocationEnabled: true,
+                        mapToolbarEnabled: false,
+                        onCameraMove: (position) {
+                          clusterManager.onCameraMove(position);
+                        },
+                        onCameraIdle: () {
+                          clusterManager.updateMap();
+                        },
+                        polylines: {
+                          Polyline(
+                            polylineId: const PolylineId('router'),
+                            points: polylinesSnapshot.data ?? [],
+                            color: Colors.deepPurpleAccent,
+                            width: 8,
+                          ),
+                        },
+                        style: mapThemeSnapshot.data,
+                      );
+                    },
+                  );
                },
              );
            },
@@ -134,22 +131,22 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {
  void checkTheme() async {
    String theme = await apiServices.checkTheme();
    if (theme == AppThemes.LIGHT.name) {
-      getThemeMode('assets/map_themes/maps_light_theme.json');
+      themeMode = '';
    } else {
-      getThemeMode('assets/map_themes/maps_dark_theme.json');
+      themeMode = await _getFileData('assets/map_themes/maps_dark_theme.json');
    }
-  }
-
-  void getThemeMode(String path) {
-    DefaultAssetBundle.of(context)
-        .loadString(path)
-        .then((value) => {themeMode = value});
    mapBloc.sinkMapTheme.add(themeMode);
  }

+  Future<String> _getFileData(String path) async {
+    return rootBundle.loadString(path);
+  }
+
+
  Future<void> _loadIcons() async {
    List<Future<BitmapDescriptor>> iconFutures = imageAssets.map((asset) {
-      return BitmapDescriptor.fromAssetImage(const ImageConfiguration(), asset);
+      return BitmapDescriptor.asset(
+          const ImageConfiguration(size: Size(50, 50)), asset);
    }).toList();

    List<BitmapDescriptor> icons = await Future.wait(iconFutures);
@@ -180,8 +177,8 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {
            bool check = await checkLocationPermission(context);
            if (check == true) {
              Position position = await Geolocator.getCurrentPosition();
-              // ignore: use_build_context_synchronously
              onTapMarker(
+                // ignore: use_build_context_synchronously
                context,
                _controller,
                mapBloc,
@@ -262,6 +259,7 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {

  void _updateMarkers(Set<Marker> marker) {
    log("Update Marker");
+    checkTheme();
    markersAll = marker;
    mapBloc.sinkAllMarker.add(marker);
  }
--- a/lib/feature/map/widget/on_tap_marker_widget.dart
+++ b/lib/feature/map/widget/on_tap_marker_widget.dart
@@ -93,9 +93,13 @@ onTapMarker(
                          double.parse(device.settings!.longitude!),
                        );
                      },
-                      style: const ButtonStyle(
-                        backgroundColor: WidgetStatePropertyAll(Colors.blue),
-                        foregroundColor: WidgetStatePropertyAll(Colors.white),
+                      style: ButtonStyle(
+                        backgroundColor: WidgetStatePropertyAll(
+                            Theme.of(context).toggleButtonsTheme.fillColor),
+                        foregroundColor: WidgetStatePropertyAll(
+                            Theme.of(context).canvasColor),
+                        iconColor: WidgetStatePropertyAll(
+                            Theme.of(context).canvasColor),
                      ),
                      child: Row(
                        children: [
@@ -129,6 +133,7 @@ onTapMarker(
                      style: const ButtonStyle(
                        backgroundColor: WidgetStatePropertyAll(Colors.pink),
                        foregroundColor: WidgetStatePropertyAll(Colors.white),
+                        iconColor: WidgetStatePropertyAll(Colors.white),
                      ),
                      icon: IconConstants.instance
                          .getMaterialIcon(Icons.local_hospital),
@@ -249,7 +254,7 @@ onTapMarker(
                  ),
                ],
                source: deviceSource,
-                rowsPerPage: 5,
+                rowsPerPage: devices.length > 4 ? 5 : devices.length,
              ),
            ],
          ),
@@ -279,13 +284,18 @@ class DeviceSource extends DataTableSource {
    String deviceState =
        DeviceUtils.instance.checkStateDevice(context, device.state!);
    return DataRow.byIndex(
-      color: WidgetStatePropertyAll(
-        DeviceUtils.instance.getTableRowColor(device.state ?? -1),
-      ),
+      // color: WidgetStatePropertyAll(
+      //   DeviceUtils.instance.getTableRowColor(device.state ?? -1),
+      // ),
      index: index,
      cells: [
        DataCell(
-          Text(device.name!),
+          Text(
+            device.name!,
+            style: TextStyle(
+                color:
+                    DeviceUtils.instance.getTableRowColor(device.state ?? -1)),
+          ),
          onTap: () {
            mapBloc.updateCameraPosition(
              controller,
@@ -297,7 +307,12 @@ class DeviceSource extends DataTableSource {
          },
        ),
        DataCell(
-          Text(deviceState),
+          Text(
+            deviceState,
+            style: TextStyle(
+                color:
+                    DeviceUtils.instance.getTableRowColor(device.state ?? -1)),
+          ),
          onTap: () {
            mapBloc.updateCameraPosition(
              controller,
@@ -308,7 +323,12 @@ class DeviceSource extends DataTableSource {
          },
        ),
        DataCell(
-          Text(sensorMap['sensorBattery'] + "%"),
+          Text(
+            sensorMap['sensorBattery'] + "%",
+            style: TextStyle(
+                color:
+                    DeviceUtils.instance.getTableRowColor(device.state ?? -1)),
+          ),
          onTap: () {
            mapBloc.updateCameraPosition(
              controller,
@@ -319,7 +339,12 @@ class DeviceSource extends DataTableSource {
          },
        ),
        DataCell(
-          Text(sensorMap['sensorCsq']),
+          Text(
+            sensorMap['sensorCsq'],
+            style: TextStyle(
+                color:
+                    DeviceUtils.instance.getTableRowColor(device.state ?? -1)),
+          ),
          onTap: () {
            mapBloc.updateCameraPosition(
              controller,