Google Map is clickable under the SpeedDial overlay in flutter web

Question

I developed a flutter web application that has google map widget as a part of Scaffold body. I use flutter_speed_dial as a floating action button. When I click on SpeedDial, it shows an overlay on whole screen, but the map is still clickable.

I know it is happened because google map use HtmlElementView in web and we have a pointer_interceptor package to prevent triggering map when click on above buttons. But how about the overlays? there is no place to wrap SpeedDial overlay with pointer_interceptor.

Here is my sample code:

Scaffold(
...
body: Column(
       children: [
          ...
          SizedBox(
              height: 230,
              child: GoogleMap(...)),
          ...
          ]
),
floatingActionButton: PointerInterceptor(
          child: SpeedDial(
            ...
            childPadding: const EdgeInsets.all(5),
            spaceBetweenChildren: 1,
            isOpenOnStart: false,
            children: [
              SpeedDialChild(
                onTap: () {
                  ...
                },
                labelWidget: PointerInterceptor(
                  child: Card(
                    ...
                  ),
                ),
              ),
            ],
          ),
        ),
      )

score 0 · Answer 1 · answered Jan 26 '23 at 09:30

I believe you can Solve your problem by using IgnorePointer.

Wrap a widget with IgnorePointer and set it to true.

IgnorePointer(
              ignoring: true,
              child: Widget _test(),
            ),

you can take a look at docs here: https://api.flutter.dev/flutter/widgets/IgnorePointer-class.html

Google Map is clickable under the SpeedDial overlay in flutter web

1 Answers1