stations_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 'dart:async';
import 'dart:ui' as ui;
 
import '../../../../core/UI/theme/color_palette.dart';
import '../../../../core/UI/widgets/custom_scaffold.dart';
import '../../models/driver_request.dart';
 
class StationsMapViewScreen extends StatefulWidget {
  final List<Station> stations;
 
  const StationsMapViewScreen({
    super.key,
    required this.stations,
  });
 
  @override
  State<StationsMapViewScreen> createState() => _StationsMapViewScreenState();
}
 
class _StationsMapViewScreenState extends State<StationsMapViewScreen>
    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 dispose() {
    _animationController.dispose();
    super.dispose();
  }
 
  Future<void> _createMarkers() async {
    final markers = <MarkerId, Marker>{};
 
    for (int i = 0; i < widget.stations.length; i++) {
      final station = widget.stations[i];
 
      final markerId = MarkerId(station.id);
 
      final marker = Marker(
        markerId: markerId,
        position: LatLng(station.latitude, station.longitude),
        infoWindow: InfoWindow(
          title: station.name,
          snippet: '${station.quantityInLiters.toInt()}L - ${station.address}',
          onTap: () {
            _showStationDetails(station);
          },
        ),
        icon: await _getMarkerBitmap(i + 1),
        onTap: () {
          setState(() {
            _selectedMarkerIndex = i;
          });
        },
      );
 
      markers[markerId] = marker;
    }
 
    setState(() {
      _markers = markers;
    });
  }
 
  Future<BitmapDescriptor> _getMarkerBitmap(int number) async {
    final size = 35.sp;
    final pictureRecorder = ui.PictureRecorder();
    final canvas = Canvas(pictureRecorder);
    final paint = Paint()
      ..color = ColorPalette.lightGreen
      ..style = PaintingStyle.fill;
 
    // Draw marker circle
    canvas.drawCircle(
      Offset(size / 2, size / 2),
      size / 2,
      paint,
    );
 
    // Draw border
    paint
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
 
    canvas.drawCircle(
      Offset(size / 2, size / 2),
      size / 2 - 1,
      paint,
    );
 
    // Draw number
    final textPainter = TextPainter(
      text: TextSpan(
        text: number.toString(),
        style: TextStyle(
          color: Colors.white,
          fontSize: 12.sp,
          fontWeight: FontWeight.bold,
        ),
      ),
      textDirection: TextDirection.ltr,
    );
 
    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);
  }
 
  void _showStationDetails(Station station) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16.r),
          ),
          title: Row(
            children: [
              Container(
                padding: EdgeInsets.all(8.sp),
                decoration: BoxDecoration(
                  color: ColorPalette.lightGreen.withValues(alpha: 0.1),
                  borderRadius: BorderRadius.circular(8.r),
                ),
                child: Icon(
                  Icons.local_gas_station,
                  color: ColorPalette.lightGreen,
                  size: 20.sp,
                ),
              ),
              SizedBox(width: 12.w),
              Expanded(
                child: Text(
                  station.name,
                  style: TextStyle(
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w600,
                    color: ColorPalette.darkGrey,
                  ),
                ),
              ),
            ],
          ),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildDetailRow('Station ID', station.id),
              SizedBox(height: 8.h),
              _buildDetailRow('Address', station.address),
              SizedBox(height: 8.h),
              _buildDetailRow(
                  'Quantity', '${station.quantityInLiters.toInt()}L'),
              SizedBox(height: 8.h),
              _buildDetailRow('Coordinates',
                  '${station.latitude.toStringAsFixed(4)}, ${station.longitude.toStringAsFixed(4)}'),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text(
                'Close',
                style: TextStyle(
                  color: ColorPalette.grey,
                  fontSize: 14.sp,
                ),
              ),
            ),
          ],
        );
      },
    );
  }
 
  Widget _buildDetailRow(String label, String value) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          width: 80.w,
          child: Text(
            '$label:',
            style: TextStyle(
              fontSize: 12.sp,
              fontWeight: FontWeight.w600,
              color: ColorPalette.grey,
            ),
          ),
        ),
        Expanded(
          child: Text(
            value,
            style: TextStyle(
              fontSize: 12.sp,
              color: ColorPalette.darkGrey,
            ),
          ),
        ),
      ],
    );
  }
 
  @override
  Widget build(BuildContext context) {
    LatLng initialPosition =
        const LatLng(24.7136, 46.6753); // Riyadh, Saudi Arabia
 
    if (widget.stations.isNotEmpty) {
      final firstStation = widget.stations.first;
      initialPosition = LatLng(firstStation.latitude, firstStation.longitude);
    }
 
    return CustomScaffold(
      title: 'Stations Map',
      backgroundColor: ColorPalette.antiFlashWhite,
      body: 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(),
              ),
            ),
          // Map control buttons
          Positioned(
            right: 16,
            bottom: 16,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                _buildMapButton(
                  icon: Icons.add,
                  tooltip: 'Zoom In',
                  onPressed: () {
                    _mapController?.animateCamera(CameraUpdate.zoomIn());
                  },
                ),
                SizedBox(height: 8.h),
                _buildMapButton(
                  icon: Icons.remove,
                  tooltip: 'Zoom Out',
                  onPressed: () {
                    _mapController?.animateCamera(CameraUpdate.zoomOut());
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
 
  Widget _buildMapButton({
    required IconData icon,
    required String tooltip,
    required VoidCallback onPressed,
  }) {
    return Container(
      width: 40.w,
      height: 40.h,
      decoration: BoxDecoration(
        color: ColorPalette.white,
        borderRadius: BorderRadius.circular(8.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.1),
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          borderRadius: BorderRadius.circular(8.r),
          onTap: onPressed,
          child: Icon(
            icon,
            size: 20.sp,
            color: ColorPalette.darkGrey,
          ),
        ),
      ),
    );
  }
}