Revision history [back]

To add a grid to a Google Map in Flutter, you can use the SizedBox and CustomPaint widgets to create a custom grid overlay. Here are the steps to do so:

1. Create a new StatefulWidget that will hold the Google Map and the grid overlay.

2. In the build method of the widget, add a GoogleMap widget to display the map.

3. Create a CustomPaint widget that will draw the grid overlay on top of the Google Map.

4. In the CustomPaint widget's paint method, use a Canvas object to draw the grid lines.

5. Add the CustomPaint widget as a child of a SizedBox to set the size of the grid overlay.

6. Add the SizedBox widget as a child of a Stack to position the grid overlay on top of the Google Map.

Here's some sample code to get started:

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

class MyMapScreen extends StatefulWidget {
  @override
  _MyMapScreenState createState() => _MyMapScreenState();
}

class _MyMapScreenState extends State<MyMapScreen> {
  final Set<Marker> _markers = {};

  GoogleMapController _mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Map with Grid Overlay')),
      body: Stack(
        children: [
          GoogleMap(
            initialCameraPosition:
                CameraPosition(target: LatLng(37.422, -122.084), zoom: 10),
            markers: _markers,
            onMapCreated: (controller) => _mapController = controller,
          ),
          SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: CustomPaint(
              painter: GridPainter(
                mapController: _mapController,
                gridSize: 2, // adjust the size of the grid squares
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class GridPainter extends CustomPainter {
  final GoogleMapController mapController;
  final double gridSize;

  GridPainter({@required this.mapController, @required this.gridSize});

  @override
  void paint(Canvas canvas, Size size) {
    final screenTopLeft =
        mapController.getLatLng(ScreenCoordinate(x: 0, y: 0));
    final screenBottomRight =
        mapController.getLatLng(ScreenCoordinate(x: size.width.toInt(), y: size.height.toInt()));

    // Align the start of the gridlines with the top-left corner of the screen.
    final latStart = screenTopLeft.latitude - (screenTopLeft.latitude % gridSize);
    final lngStart = screenTopLeft.longitude - (screenTopLeft.longitude % gridSize);

    final paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 1;

    // Draw vertical lines
    for (var lng = lngStart; lng < screenBottomRight.longitude; lng += gridSize) {
      final screenTop = mapController.getScreenCoordinate(LatLng(latStart, lng)).y.toDouble();
      final screenBottom = mapController.getScreenCoordinate(LatLng(screenBottomRight.latitude, lng)).y.toDouble();
      canvas.drawLine(Offset(0, screenTop), Offset(size.width, screenBottom), paint);
    }

    // Draw horizontal lines
    for (var lat = latStart; lat < screenBottomRight.latitude; lat += gridSize) {
      final screenLeft = mapController.getScreenCoordinate(LatLng(lat, lngStart)).x.toDouble();
      final screenRight = mapController.getScreenCoordinate(LatLng(lat, screenBottomRight.longitude)).x.toDouble();
      canvas.drawLine(Offset(screenLeft, 0), Offset(screenRight, size.height), paint);
    }
  }

  @override
  bool shouldRepaint(GridPainter oldDelegate) {
    return mapController != oldDelegate.mapController ||
        gridSize != oldDelegate.gridSize;
  }
}

This code creates a map screen with a grid overlay that displays gridlines every 2 degrees of latitude and longitude. You can adjust the gridSize parameter in the GridPainter constructor to change the size of the grid squares.