Linear shape center offset not working as expected

[PunditSharp]

First off, I must say this is such an awesome package for making visually appealing menus - thank you for your efforts!

I have a menu composed of a List of FloatingActionButtons. When I tap on a map marker, the menu pops up. I am expecting the menu to be centered on the marker that I tapped, but it isn't - it is offset to the right. Am I missing something?

 StarMenuOverlay.displayStarMenu(
       context!,
      StarMenu(
                params: StarMenuParameters(
                  shape: MenuShape.linear,
                  linearShapeParams: const LinearShapeParams(
                    angle: 0,
                    alignment: LinearAlignment.top,
                    space: 15,
                  ),
                  animationCurve: Curves.easeOutCubic,
                  centerOffset: const Offset(0, 0),
                  openDurationMs: 150,
                  backgroundParams: BackgroundParams(
                          backgroundColor: Colors.blue.withOpacity(0.2),
                          animatedBackgroundColor: false,
                          animatedBlur: false,
                          sigmaX: 10,
                          sigmaY: 10,
                        ),
                ),
                //params: StarMenuParameters.panel(context, columns: 4),
                items: menuEntries,
                parentContext: context,
                onItemTapped: (index, c) {
                  debugPrint('****** Item $index tapped ******');
                  c.closeMenu!();
                },
              ),
  );

[alnitak]

Hi @PunditSharp,

the MenuShape.linear is meant to act as a clock hand centered in the tapped widget center. You can try to:

1. use StarMenuParameters.centerOffset to shift its center
2. use MenuShape.grid, in your use-case with GridShapeParams.columns = 4. This shape kind, IIRC uses the overall menu shape center on the center of the tapped widget.

[PunditSharp]

Thank you @alnitak! using the grid works perfectly.