map_screen.dart

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  // Static initial position for the map
  static const LatLng _initialPosition = LatLng(51.34848661226009, -0.3182352893849909); // Berties Theme Park coordinates

  // Set of markers for locations on the map
  Set<Marker> _markers = {};

  // Set of polygons (used for the red border around the location)
  Set<Polygon> _polygons = {};

  // Expanded coordinates for the border area (polygon) around Berties Theme Park
  final List<LatLng> _polygonCoordinates = [
    LatLng(51.3500, -0.3215), // Top-left corner
    LatLng(51.3500, -0.3150), // Top-right corner
    LatLng(51.3470, -0.3150), // Bottom-right corner
    LatLng(51.3470, -0.3215), // Bottom-left corner
  ];

  @override
  void initState() {
    super.initState();
    // Add the marker when the map is initialized
    _addMarker(_initialPosition);
    _addPolygon(); // Add the red border (polygon)
  }

  // Method to handle map creation and adding the marker
  void _onMapCreated(GoogleMapController controller) {
  }

  // Adding a marker
  void _addMarker(LatLng position) {
    setState(() {
      _markers.add(
        Marker(
          markerId: MarkerId('unique_marker_id'), // Unique ID for the marker
          position: position,
          infoWindow: InfoWindow(title: 'Berties Theme Park', snippet: 'This is a marker'),
        ),
      );
    });
  }

  // Adding the polygon (red border)
  void _addPolygon() {
    setState(() {
      _polygons.add(
        Polygon(
          polygonId: PolygonId('border_polygon'), // Unique id for the polygon
          points: _polygonCoordinates, // The points that define the boundary
          strokeColor: Colors.red, // Red border color
          strokeWidth: 4, // Width of the border line
          fillColor: Colors.transparent, // No fill color, just the border
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start, // Align  to the left
        children: [
          // Heading for "Map"
          Padding(
            padding: const EdgeInsets.only(top: 10.0, left: 20.0),
            child: Text(
              'Park Map', // Display "Park Map" at the top left
              style: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
                color: Theme.of(context).brightness == Brightness.dark
                    ? Colors.white
                    : const Color.fromARGB(255, 5, 5, 5), // Dynamically changing color based on theme mode
              ),
            ),
          ),
          Container(
            width: double.infinity, // Ensures it takes the full width of the parent
            height: 2, // Height of the shadow 
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: const Color.fromARGB(255, 131, 131, 131).withOpacity(0.4),
                  blurRadius: 1,
                  offset: Offset(0, 0),
                ),
              ],
            ),
          ),
          SizedBox(height: 10), // Adds space between the heading and content

          // Google Map widget
          Expanded(
            child: GoogleMap(
              initialCameraPosition: CameraPosition(
                target: _initialPosition,
                zoom: 16.0, // zoom level
              ),
              onMapCreated: _onMapCreated,
              markers: _markers, // Displays the marker on the map
              polygons: _polygons, // Adds the red border polygon to the map
            ),
          ),
        ],
      ),
    );
  }
}