Skip to content

Odd interaction with Google Maps Flutter #22

Description

@PunditSharp

I posted abut this in the Flutter Dev subreddit yesterday, but I have done some more exploring and I think it is somehow related to the interaction between StarMenu and Google Maps in iOS. I put a skeleton app together and I can repro the issue on an iOS simulator. When I tap the button in the skeleton app with a Google Maps widget as part of the Stack, then I get the background flickering and sometimes catch a glimpse of the menu buttons flashing. If I remove the Google Maps widget, the menu works as expected. This is limited to iOS - I cannot repro it on Android.

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


void main() {
  runApp(const MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({super.key});


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StarMenu test',
      theme: ThemeData(


        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'StarMenu test app'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});


  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {
  
  late GoogleMapController _controller;



   void onMapCreated(GoogleMapController controller) async {
    _controller = controller;
  }


  List<FloatingActionButton> menuEntries = [
    const FloatingActionButton(
      onPressed: null,
      backgroundColor: Colors.white,
      child: Icon(Icons.add),
    ),
    const FloatingActionButton(
      onPressed: null,
      backgroundColor: Colors.white,
      child: Icon(Icons.search),
    ),
    const FloatingActionButton(
      onPressed: null,
      backgroundColor: Colors.white,
      child: Icon(Icons.logout),
    )
  ];


  @override
  Widget build(BuildContext context) {
    var containerKey = GlobalKey();
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
      GoogleMap(
            onMapCreated: onMapCreated,
            initialCameraPosition: const CameraPosition(
              target: LatLng(0,0),
              zoom: 15.0,
            ),
            myLocationEnabled: true,
            myLocationButtonEnabled: false,
            zoomControlsEnabled: false,
          ),
      Positioned(bottom: 20,
            left: 20,
            child: StarMenu(
              params: StarMenuParameters(
                shape: MenuShape.linear,
                linearShapeParams: const LinearShapeParams(
                  angle: 90,
                  alignment: LinearAlignment.left,
                  space: 10,
                ),
                animationCurve: Curves.easeOutCubic,
                centerOffset: const Offset(0, -80),
                openDurationMs: 150,
                backgroundParams: BackgroundParams(
                  backgroundColor: Colors.blue.withOpacity(0.2),
                  animatedBackgroundColor: false,
                  animatedBlur: false,
                  sigmaX: 10,
                  sigmaY: 10,
                ),
              ),
              lazyItems: () async {
                return menuEntries;
              },
              parentContext: containerKey.currentContext,
              onItemTapped: (index, c) async {
                debugPrint('****** Item $index tapped ******');
                c.closeMenu!();
                },
                child: const FloatingActionButton(
                onPressed: null,
                backgroundColor: Colors.white,
                child: Icon(Icons.view_stream_rounded),
              ),
            ),
          )
        ],
      ),
    );
  }
}

pubspec dependencies:

dependencies:
  flutter:
    sdk: flutter
  star_menu: ^4.0.0
  google_maps_flutter: ^2.6.0
  google_maps_flutter_android: ^2.5.0
  google_maps_flutter_ios: ^2.5.0
  google_maps_flutter_platform_interface: ^2.6.0

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions