iPad Cupertino Menu Display Issue

[fliosan]

When opening the Cupertino menu on an iPad, there is an issue where the text and some icons swap positions. Additionally, some of the text characters appear misaligned or out of place.

This issue occurs consistently when interacting with the menu, making it difficult for users to read and select options properly.

Steps to Reproduce: Launch the app on an iPad. Open the Cupertino menu. Observe the positioning of text and icons. Expected Behavior: Text and icons should remain in their proper positions. Characters within the text should not shift or change their alignment. Actual Behavior: Text and icons change places. Some characters within the text shift or appear misaligned.

Device: iPad OS Version: 17.5.1 Flutter Version: 3.22.2

yaml: cupertino_menu: git: url: https://github.com/davidhicks980/cupertino_menu

https://github.com/user-attachments/assets/8ed99c4e-424a-4a76-a8b2-73f08ecf721e

[davidhicks980]

Howdy fliosan, I believe this is an issue with Impeller. It drives me crazy causes mental distress for me as well. Try disabling Impeller via https://docs.flutter.dev/perf/impeller#ios and tell me if that fixes the alignment.

[fliosan]

Hi @davidhicks980 I disabled Impeller, but the issue is still occurring. Do you have any other suggestions or workarounds?

[davidhicks980]

Yeah it'll still be slightly visible. Actually, looking at it now, it appears that Impeller has gotten dramatically better since the last time I worked on the menu. But it's a tough issue to fix on our end. If it was absolutely required for an app that I was using, and I couldn't change the menu's appearance by removing animations/blur, I would consider wrapping a SnapshotWidget around each Text widget I had, or forking the snapshot widget and determining an efficient way to rasterize text while animations are occurring. I'm not sure how this affects accessibility, though. Otherwise, I'd file an issue with the Flutter engine team.

class CupertinoMenuSample extends StatefulWidget {
  const CupertinoMenuSample({
    super.key,
  });

  @override
  State<CupertinoMenuSample> createState() => _CupertinoMenuSampleState();
}

class _CupertinoMenuSampleState extends State<CupertinoMenuSample> {
  final SnapshotController controller =
      SnapshotController(allowSnapshotting: true);

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoMenuButton(
      itemBuilder: (BuildContext context) {
        return <Widget>[
          CupertinoMenuItem(
            // This will disable pixel snapping
            child: SnapshotWidget(
              controller: controller,
              child: const Text('Checkable'),
            ),
            onTap: () {},
          ),
        ];
      },
    );
  }
}

I actually do this with the menu body while the menu is animating open/shut, but it disables interactivity, so I can only do it when a layer is inactive.

[fliosan]

Thank you for your response. I’ll be looking forward to your improved solution.

[fliosan]

Hi @davidhicks980 I'm experiencing an issue with SnapshotController. Even though I'm assigning a unique SnapshotController to each instance of CupertinoNestedMenu, changing the text in one menu unexpectedly changes the text in other menus. However, when I remove the SnapshotController, everything works fine, and each menu updates its text independently as expected. Code here 235 and 326 lines: https://gist.github.com/fliosan/e1b98b1ad2e2afd3da6cd3fadb659de0

It seems like the SnapshotController is somehow causing state-sharing or interference between the menus. Could this be a bug, or is there something I'm missing in the implementation?

Thanks for looking into this!

https://github.com/user-attachments/assets/9faeefb4-3701-4c31-8656-6ed20887f7cb

Additionally, I'd like to know how to change the shadow when opening a CupertinoNestedMenu.