CupertinoContextMenu on LongPressAnimation going behind the screen

I would like to incorporate a CupertinoContextMenu into a CupertinoListTile in my Flutter application. However, upon performing a long press on the item, a portion of it disappears off-screen. How can I go about remedying this issue? Alternatively, is there a way to decrease the scale of the animation to resolve this problem?

Expected results: I would like to change CupertinoContextMenu animation

Actual results: Youtube video showing the bug

Code sample

 return CupertinoContextMenu(
      actions: [
        CupertinoContextMenuAction(
          child: const Text('Edit'),
          onPressed: () {
            //TODO: Handle the edit action
          },
        ),
        CupertinoContextMenuAction(
          child: const Text('Show'),
          onPressed: () {
            //TODO: Handle the show action
          },
        ),
      ],
      child: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: CupertinoListTile(
          backgroundColor: CupertinoColors.white,
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
          title: Text(event.name, style: const TextStyle(fontSize: 20),),
          subtitle: Text(event.formattedDate, style: const TextStyle(fontSize: 16),),
          trailing: const CupertinoListTileChevron(),
        ),
      ),
    );

Logs

[✓] Flutter (Channel stable, 3.7.5, on macOS 13.2.1 22D68 darwin-arm64, locale pl-PL)
    • Flutter version 3.7.5 on channel stable at /Users/kacperwojak/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c07f788888 (3 weeks ago), 2023-02-22 17:52:33 -0600
    • Engine revision 0f359063c4
    • Dart version 2.19.2
    • DevTools version 2.20.1



[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

@gonciuu

However, upon performing a long press on the item, a portion of it disappears off-screen

Hi @gonciuu, can you please be more specific on this? (or you can capture it to be more clear).

@gonciuu

However, upon performing a long press on the item, a portion of it disappears off-screen

Hi @gonciuu, can you please be more specific on this? (or you can capture it to be more clear).

On The video you can see the frames of my device and when I hold CupertinoContextMenu CupertinoListItem the view scale up and just go behind the frames which looks badly

Do you mean the CupertinoListTile is being over-enlarged?

Do you mean the CupertinoListTile is being over-enlarged?

Yep, that's the point

In my opinion, it seems to be working as intended when the child is scaled by a fixed ratio:

flutter/packages/flutter/lib/src/cupertino/context_menu.dart

Lines 16 to 18 in 21f60bb

    
           // The scale of the child at the time that the CupertinoContextMenu opens. 
        
           // This value was eyeballed from a physical device running iOS 13.1.2. 
        
           const double _kOpenScale = 1.15;

I can also notice this scale-up animation on native iOS apps (such as Contacts app from demo video below) but it's more beautiful and delicate.

Although it is possible to increase CupertinoListTile's horizontal padding for the title or subtitle (so that the title/subtitle can be seen when scale-up), it will be more indented when in the normal state.

Screen.Recording.2023-03-20.at.20.05.45.mov

Complete sample code

import 'package:flutter/cupertino.dart';

void main() => runApp(const CupertinoApp(
      home: ContextMenuExample(),
    ));

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

  @override
  State<ContextMenuExample> createState() => _ContextMenuExampleState();
}

class _ContextMenuExampleState extends State<ContextMenuExample> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: CupertinoContextMenu(
          actions: <Widget>[
            CupertinoContextMenuAction(
              onPressed: () {
                Navigator.pop(context);
              },
              isDefaultAction: true,
              trailingIcon: CupertinoIcons.doc_on_clipboard_fill,
              child: const Text('Copy'),
            ),
            CupertinoContextMenuAction(
              onPressed: () {
                Navigator.pop(context);
              },
              trailingIcon: CupertinoIcons.share,
              child: const Text('Share'),
            ),
            CupertinoContextMenuAction(
              onPressed: () {
                Navigator.pop(context);
              },
              trailingIcon: CupertinoIcons.heart,
              child: const Text('Favorite'),
            ),
            CupertinoContextMenuAction(
              onPressed: () {
                Navigator.pop(context);
              },
              isDestructiveAction: true,
              trailingIcon: CupertinoIcons.delete,
              child: const Text('Delete'),
            ),
          ],
          child: SizedBox(
            width: MediaQuery.of(context).size.width,
            height: 50,
            child: const CupertinoListTile(
              backgroundColor: CupertinoColors.white,
              title: Text(
                'Title',
                style: TextStyle(fontSize: 20),
              ),
              subtitle: Text(
                'Subtitle',
                style: TextStyle(fontSize: 16),
              ),
              trailing: CupertinoListTileChevron(),
            ),
          ),
        ),
      ),
    );
  }
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.7.7, on macOS 13.0.1 22A400 darwin-x64, locale en-EE)
    • Flutter version 3.7.7 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2ad6cd72c0 (10 hours ago), 2023-03-08 09:41:59 -0800
    • Engine revision 1837b5be5f
    • Dart version 2.19.4
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.76.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 110.0.5481.177

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.9.0-11.0.pre.6, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.9.0-11.0.pre.6 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 0dd46a33e7 (6 hours ago), 2023-03-19 18:21:21 -0400
    • Engine revision dc6e389aea
    • Dart version 3.0.0 (build 3.0.0-339.0.dev)
    • DevTools version 2.22.2
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.76.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 111.0.5563.64

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Labeling this issue for more insights! Thank you for the report!

Constrain `CupertinoContextMenu` animation to safe area (#151860)

Constrain `CupertinoContextMenu` animation to safe area (flutter#151860)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Constrain `CupertinoContextMenu` animation to safe area (flutter#151860)

Constrain `CupertinoContextMenu` animation to safe area (#151860)

Navigation Menu

Repository navigation

CupertinoContextMenu on LongPressAnimation going behind the screen #122951

13 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	// The scale of the child at the time that the CupertinoContextMenu opens.
	// This value was eyeballed from a physical device running iOS 13.1.2.
	const double _kOpenScale = 1.15;

CupertinoContextMenu on LongPressAnimation going behind the screen #122951

Description

Activity

huycozy commented on Mar 20, 2023

gonciuu commented on Mar 20, 2023

huycozy commented on Mar 20, 2023

gonciuu commented on Mar 20, 2023

huycozy commented on Mar 20, 2023

13 remaining items

github-actions commented on Aug 17, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions