CODEWITHSUNDEEP
androidflutter
Coding4Coding
Coding4Coding

Reputation: 11

Google Maps + CustomPaint Flutter

When placing a CustomPaint widget on top of Google maps widget, the map is no longer receiving touch events (scrolling, pan, tap, ..etc).

Is it possible to put CustomPaint widget above map while keeping map interactive? Here is a sample code explaining the case: 

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

void main() =>
    runApp(
        MaterialApp(
          title: 'Flutter Google Maps Demo',
          home: Scaffold(
            body: Scaffold(
              body: Stack(children: <Widget>[
                GoogleMap(
                  initialCameraPosition: CameraPosition(
                    target: LatLng(37.42796133580664, -122.085749655962),
                    zoom: 14.4746,
                  ),
                ),
                CustomPaint(
                  painter: ShapesPainter(),
                  child: Container(height: 500),
                )
              ],)

            ),
          ),
        )
    );

class ShapesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Color(0xFF3f6cbf);
    canvas.drawCircle(Offset(0, 0), 300, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Upvotes: 1

Views: 968

Answers (1)

M Atheer
M Atheer

Reputation: 392

Wrap the CustomPainter widget with IgnorePointer it will ignore any click or other gestures read more

Final code

Stack(
  children: <Widget>[
    GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(37.42796133580664, -122.085749655962),
        zoom: 14.4746,
      ),
    ),
    IgnorePointer(
      child: CustomPaint(
        painter: ShapesPainter(),
        child: Container(height: 500),
      ),
    )
  ],
)

Upvotes: 1

Related Questions