collections_map_view.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:go_router/go_router.dart';
import 'package:geolocator/geolocator.dart';
import 'dart:async';
import 'dart:ui' as ui;
 
import '../../../../../../core/common/entities/collection_entity.dart';
import '../../../../../../core/router/routes.dart';
import '../../../../../../core/ui/theme/color_palette.dart';
import '../widgets/map_button.dart';
import '../widgets/map_details_card.dart';
 
class CollectionsMapView extends StatefulWidget {
  final List<CollectionEntity> collections;
 
  const CollectionsMapView({
    super.key,
    required this.collections,
  });
 
  @override
  State<CollectionsMapView> createState() => _CollectionsMapViewState();
}
 
class _CollectionsMapViewState extends State<CollectionsMapView>
    with SingleTickerProviderStateMixin {
  GoogleMapController? _mapController;
  Map<MarkerId, Marker> _markers = {};
  bool _isMapLoaded = false;
  int _selectedMarkerIndex = -1;
  late AnimationController _animationController;
  String mapStyle = '''
    [
      {
        "featureType": "poi",
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "transit",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]
    ''';
 
  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    _createMarkers();
  }
 
  @override
  void didUpdateWidget(CollectionsMapView oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.collections != oldWidget.collections) {
      _createMarkers();
    }
  }
 
  Future<void> _createMarkers() async {
    final markers = <MarkerId, Marker>{};
 
    for (int i = 0; i < widget.collections.length; i++) {
      final collection = widget.collections[i];
 
      if (collection.lat == null || collection.lng == null) continue;
 
      final markerId = MarkerId(collection.id.toString());
 
      final marker = Marker(
        markerId: markerId,
        position: LatLng(
            double.parse(collection.lat!), double.parse(collection.lng!)),
        infoWindow: InfoWindow(
          title: collection.restaurant ?? 'Collection ${i + 1}',
          snippet: collection.address ?? '',
          onTap: () {
            context.push(
              Routes.collectionDetailsScreen.route,
              extra: collection,
            );
          },
        ),
        icon: await _getMarkerBitmap(i + 1),
        onTap: () {
          setState(() {
            _selectedMarkerIndex = i;
          });
        },
      );
 
      markers[markerId] = marker;
    }
 
    setState(() {
      _markers = markers;
    });
  }
 
  Future<BitmapDescriptor> _getMarkerBitmap(int number) async {
    final size = 120.0;
    final pictureRecorder = ui.PictureRecorder();
    final canvas = Canvas(pictureRecorder);
    final paint = Paint()..color = ColorPalette.lightGreen;
    final textPainter = TextPainter(
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center,
    );
 
    canvas.drawCircle(Offset(size / 2, size / 2), size / 2, paint);
 
    final borderPaint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8;
    canvas.drawCircle(Offset(size / 2, size / 2), size / 2 - 4, borderPaint);
 
    textPainter.text = TextSpan(
      text: number.toString(),
      style: const TextStyle(
        fontSize: 50,
        fontWeight: FontWeight.bold,
        color: Colors.white,
      ),
    );
 
    textPainter.layout();
    textPainter.paint(
      canvas,
      Offset(
        (size - textPainter.width) / 2,
        (size - textPainter.height) / 2,
      ),
    );
 
    final img = await pictureRecorder.endRecording().toImage(
          size.toInt(),
          size.toInt(),
        );
    final data = await img.toByteData(format: ui.ImageByteFormat.png);
 
    return BitmapDescriptor.bytes(data!.buffer.asUint8List(), height: 35.sp);
  }
 
  @override
  Widget build(BuildContext context) {
    LatLng initialPosition = const LatLng(51.5074, -0.1278);
 
    for (final collection in widget.collections) {
      if (collection.lat != null && collection.lng != null) {
        initialPosition = LatLng(
            double.parse(collection.lat!), double.parse(collection.lng!));
        break;
      }
    }
 
    return Stack(
      children: [
        GoogleMap(
          style: mapStyle,
          initialCameraPosition: CameraPosition(
            target: initialPosition,
            zoom: 10,
          ),
          markers: Set<Marker>.of(_markers.values),
          onMapCreated: (GoogleMapController controller) {
            _mapController = controller;
 
            setState(() {
              _isMapLoaded = true;
            });
          },
          myLocationEnabled: true,
          myLocationButtonEnabled: false,
          zoomControlsEnabled: false,
          mapToolbarEnabled: false,
          compassEnabled: true,
          onTap: (_) {
            if (_selectedMarkerIndex != -1) {
              setState(() {
                _selectedMarkerIndex = -1;
              });
            }
          },
        ),
        if (!_isMapLoaded)
          Container(
            color: Colors.white.withValues(alpha: 0.7),
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          ),
        Positioned(
          right: 16,
          bottom: 16,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              MapButton(
                icon: Icons.my_location,
                tooltip: 'My Location',
                onPressed: _goToUserLocation,
              ),
              const SizedBox(height: 8),
              MapButton(
                icon: Icons.add,
                tooltip: 'Zoom In',
                onPressed: () {
                  _mapController?.animateCamera(CameraUpdate.zoomIn());
                },
              ),
              const SizedBox(height: 8),
              MapButton(
                icon: Icons.remove,
                tooltip: 'Zoom Out',
                onPressed: () {
                  _mapController?.animateCamera(CameraUpdate.zoomOut());
                },
              ),
            ],
          ),
        ),
        if (_selectedMarkerIndex >= 0 &&
            _selectedMarkerIndex < widget.collections.length)
          Positioned(
            bottom: 16,
            left: 16,
            right: 80,
            child: AnimatedBuilder(
              animation: _animationController,
              builder: (context, child) {
                if (_selectedMarkerIndex != -1 &&
                    !_animationController.isAnimating) {
                  _animationController.forward();
                }
                return Transform.translate(
                  offset: Offset(0, 20 * (1 - _animationController.value)),
                  child: Opacity(
                    opacity: _animationController.value,
                    child: child,
                  ),
                );
              },
              child: MapDetailsCard(
                collection: widget.collections[_selectedMarkerIndex],
                index: _selectedMarkerIndex + 1,
              ),
            ),
          ),
      ],
    );
  }
 
  void _goToUserLocation() async {
    if (_mapController == null) return;
 
    try {
      bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
      if (!serviceEnabled) {
        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text(
                  'Location services are disabled. Please enable them in settings.'),
              duration: Duration(seconds: 3),
            ),
          );
        }
        return;
      }
 
      LocationPermission permission = await Geolocator.checkPermission();
      if (permission == LocationPermission.denied) {
        permission = await Geolocator.requestPermission();
        if (permission == LocationPermission.denied) {
          if (mounted) {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('Location permission denied'),
                duration: Duration(seconds: 2),
              ),
            );
          }
          return;
        }
      }
 
      if (permission == LocationPermission.deniedForever) {
        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text(
                  'Location permissions are permanently denied. Please enable them in app settings.'),
              duration: Duration(seconds: 3),
            ),
          );
        }
        return;
      }
 
      final position = await Geolocator.getCurrentPosition(
        locationSettings: const LocationSettings(
          accuracy: LocationAccuracy.high,
          timeLimit: Duration(seconds: 10),
        ),
      );
 
      await _mapController!.animateCamera(
        CameraUpdate.newCameraPosition(
          CameraPosition(
            target: LatLng(position.latitude, position.longitude),
            zoom: 15,
          ),
        ),
      );
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Unable to get your location: ${e.toString()}'),
            duration: const Duration(seconds: 3),
          ),
        );
      }
    }
  }
 
  @override
  void dispose() {
    _animationController.dispose();
    _mapController?.dispose();
    super.dispose();
  }
}