Overflow issues with CupertinoContextMenu, Columns and ListViews #58880

bierbaumtim · 2020-06-06T20:32:20Z

Steps to Reproduce

wrap a column with a CupertinoContextMenu
add 2 or more children to the Column
place 2 or more columns in a ListView
open the CupertinoContextMenu

Expected results: The opening animation should not result in a overflow issue. The child should be scaled up and down instead of resizing it.

Actual results: The child is resized during the opening animation, which cause a overflow issue.

Code Sample:

code sample

// Flutter code sample for CupertinoContextMenu

// This sample shows a very simple CupertinoContextMenu for an empty red
// 100x100 Container. Simply long press on it to open.

import 'package:flutter/material.dart';

import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:ListView.builder(
            itemBuilder: (context, index) => CupertinoContextMenu(
            child: Column(
              children: <Widget> [
                Container(
                  color: Colors.red,
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(16),
                ),
                Container(
                  color: Colors.green,
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(16),
                ),
              ],
            ),
            actions: <Widget>[
              CupertinoContextMenuAction(
                child: const Text('Action one'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              CupertinoContextMenuAction(
                child: const Text('Action two'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
          itemCount: 20, 
        ),
      ),
    );
  }
}

Logs

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.3, on Microsoft Windows [Version 10.0.18363.836], locale de-DE)
 
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 4.0)
[√] VS Code (version 1.45.1)
[√] Connected device (1 available)

• No issues found!

The text was updated successfully, but these errors were encountered:

TahaTesser · 2020-06-08T09:48:58Z

Looks like it's due to animation

flutter doctor -v

[✓] Flutter (Channel dev, 1.19.0-4.0.pre, on Mac OS X 10.15.5 19F101, locale
    en-GB)
    • Flutter version 1.19.0-4.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision 2f7a59a8da (3 days ago), 2020-06-05 03:44:02 -0700
    • Engine revision d17c84e7af
    • Dart version 2.9.0 (build 2.9.0-13.0.dev 02915ec5ce)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (5 available)
    • SM M305F                     • 32003c30dc19668f • android-arm64  • Android
      10 (API 29)
    • Android SDK built for x86 64 • emulator-5554    • android-x64    • Android
      9 (API 28) (emulator)
    • macOS                        • macOS            • darwin-x64     • Mac OS
      X 10.15.5 19F101
    • Web Server                   • web-server       • web-javascript • Flutter
      Tools
    • Chrome                       • chrome           • web-javascript • Google
      Chrome 83.0.4103.97

• No issues found!

asmodeoux · 2020-12-01T19:01:54Z

Unfortunately it's still an issue, did anyone find a solution or custom previewBuilder function to prevent that?

welfvh · 2020-12-07T14:47:35Z

So annoying, that basic UX infrastructure like this isn't properly built out. If this was done well, implementing it would take 5 minutes, it took me hours so far and doesn't look like it's possible to make it great...

TahaTesser · 2021-01-27T14:05:46Z

code sample

// Flutter code sample for CupertinoContextMenu

// This sample shows a very simple CupertinoContextMenu for an empty red
// 100x100 Container. Simply long press on it to open.

import 'package:flutter/material.dart';

import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          itemBuilder: (context, index) => CupertinoContextMenu(
            child: Column(
              children: <Widget>[
                Container(
                  color: Colors.red,
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(16),
                ),
                Container(
                  color: Colors.green,
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(16),
                ),
              ],
            ),
            actions: <Widget>[
              CupertinoContextMenuAction(
                child: const Text('Action one'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              CupertinoContextMenuAction(
                child: const Text('Action two'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
          itemCount: 20,
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.6, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.22.6 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 9b2d32b605 (5 days ago), 2021-01-22 14:36:39 -0800
    • Engine revision 2f0af37152
    • Dart version 2.10.5

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (2 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64 • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios           • iOS 14.3

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 1.26.0-13.0.pre.194, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-13.0.pre.194 at /Users/tahatesser/Code/flutter_master
    • Framework revision 71aec53acb (5 hours ago), 2021-01-26 21:53:04 -0800
    • Engine revision b11bef83a5
    • Dart version 2.12.0 (build 2.12.0-263.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (4 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64  • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios            • iOS 14.3
    • macOS (desktop)      • macos                     • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)         • chrome                    • web-javascript • Google Chrome 88.0.4324.96

• No issues found!

jonataslaw · 2021-06-28T11:59:08Z

I can still reproduce it in version 2.2.2

akdotio · 2021-07-25T09:48:49Z

As a workaround, wrapping your widget in a SingleChildScrollView will solve the issue, or at least will let you ship the next version of your app until someone comes up with a real solution.

CupertinoContextMenu(
  child: SingleChildScrollView(
    child: Container(
    // your widget's content goes here...

mamuseferha · 2021-10-20T09:37:54Z

Hi @bierbaumtim
Thanks for filing the issue, I verified this on the latest stable and the master channel and the issue is reproducible.

code sample

// Flutter code sample for CupertinoContextMenu

// This sample shows a very simple CupertinoContextMenu for an empty red
// 100x100 Container. Simply long press on it to open.

import 'package:flutter/material.dart';

import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          itemBuilder: (context, index) => CupertinoContextMenu(
            child: Column(
              children: <Widget>[
                Container(
                  color: Colors.red,
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(16),
                ),
                Container(
                  color: Colors.green,
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(16),
                ),
              ],
            ),
            actions: <Widget>[
              CupertinoContextMenuAction(
                child: const Text('Action one'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              CupertinoContextMenuAction(
                child: const Text('Action two'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
          itemCount: 20,
        ),
      ),
    );
  }
}

Output

Simulator.Screen.Recording.-.iPhone.11.-.2021-10-20.at.10.30.30.mp4

flutter doctor -v

[✓] Flutter (Channel stable, 2.5.3, on macOS 11.5.2 20G95 darwin-x64, locale en-US)
    • Flutter version 2.5.3 at /Users/flo/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (5 days ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.0, Build version 13A5212g
    • CocoaPods version 1.11.0

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

[✓] Android Studio (version 2020.3)
    • 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.10+0-b96-7281165)

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

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.6.0-12.0.pre.406, on macOS 11.5.2 20G95 darwin-x64, locale en-US)
    • Flutter version 2.6.0-12.0.pre.406 at /Users/flo/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 71a0b6169d (73 minutes ago), 2021-10-20 02:08:04 -0400
    • Engine revision 115c859b2c
    • Dart version 2.15.0 (build 2.15.0-233.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.0

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

[✓] Android Studio (version 2020.3)
    • 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.10+0-b96-7281165)

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

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

Thank you

galiperkin · 2022-08-04T10:47:10Z

Is there any update on this issue. I am running on Flutter 3.0.5 and the issue still persists.

DamilolaDami · 2022-10-11T08:40:59Z

Any updates on this? I am still facing this issue, Still Persists in Flutter 3.3

hanc1027 · 2022-10-26T04:56:37Z

The method from @AhmedMKamal is working for me.

Using SingleChildScrollView for a child of CupertinoContextMenu and a child of previewBuilder.

Like this.

              CupertinoContextMenu(
                      previewBuilder: (BuildContext context,
                          Animation<double> animation, Widget child) {
                        return SingleChildScrollView(
                            child: Column(
                          children: [
                           // your widget's content goes here...
                          ],
                        ));
                      },
                      actions: [
                        CupertinoContextMenuAction(
                          isDefaultAction: true,
                          trailingIcon: CupertinoIcons.doc_on_clipboard_fill,
                          child: const Text('Copy'),
                        ),
                      ],
                      child: SingleChildScrollView(
                        child: Column(
                          children: [
                            // your widget's content goes here...
                          ],
                        ),
                      ))

esenmx · 2023-02-05T08:11:22Z

Still persists in Flutter 3.7

jmagman added this to Awaiting triage in iOS Platform - Cupertino widget review via automation Jun 11, 2020

TahaTesser added found in release: 1.22 Found to occur in 1.22 found in release: 1.26 Found to occur in 1.26 and removed found in release: 1.19 Found to occur in 1.19 a: quality A truly polished experience labels Jan 27, 2021

TahaTesser mentioned this issue Apr 16, 2021

CupertinoContextMenu resizes the child widget from a list #80499

Closed

mamuseferha added found in release: 2.5 Found to occur in 2.5 found in release: 2.6 Found to occur in 2.6 and removed found in release: 1.22 Found to occur in 1.22 found in release: 1.26 Found to occur in 1.26 labels Oct 20, 2021

Piinks added the P2 Important issues not at the top of the work list label Mar 21, 2023

flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team labels Jul 8, 2023

flutter-triage-bot bot added the triaged-design Triaged by Design Languages team label Jul 8, 2023

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Overflow issues with CupertinoContextMenu, Columns and ListViews #58880

Overflow issues with CupertinoContextMenu, Columns and ListViews #58880

bierbaumtim commented Jun 6, 2020 •

edited by TahaTesser

TahaTesser commented Jun 8, 2020

asmodeoux commented Dec 1, 2020

welfvh commented Dec 7, 2020

TahaTesser commented Jan 27, 2021

jonataslaw commented Jun 28, 2021

akdotio commented Jul 25, 2021

mamuseferha commented Oct 20, 2021

galiperkin commented Aug 4, 2022

DamilolaDami commented Oct 11, 2022

hanc1027 commented Oct 26, 2022

esenmx commented Feb 5, 2023

Overflow issues with CupertinoContextMenu, Columns and ListViews #58880

Overflow issues with CupertinoContextMenu, Columns and ListViews #58880

Comments

bierbaumtim commented Jun 6, 2020 • edited by TahaTesser

Steps to Reproduce

TahaTesser commented Jun 8, 2020

asmodeoux commented Dec 1, 2020

welfvh commented Dec 7, 2020

TahaTesser commented Jan 27, 2021

jonataslaw commented Jun 28, 2021

akdotio commented Jul 25, 2021

mamuseferha commented Oct 20, 2021

galiperkin commented Aug 4, 2022

DamilolaDami commented Oct 11, 2022

hanc1027 commented Oct 26, 2022

esenmx commented Feb 5, 2023

bierbaumtim commented Jun 6, 2020 •

edited by TahaTesser