CupertinoContextMenu animation is the wrong size when within Transform.scale

[moffatman]

Top-left corner is correct but the size is wrong.

Demo program:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Flutter Demo',
      home: MyHomePage()
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xFFFFFFFF),
      child: Transform.scale(
        scale: 0.5,
        child: Positioned(
          top: 100,
          left: 100,
          bottom: 100,
          right: 100,
          child: CupertinoContextMenu(
            actions: const [
              CupertinoContextMenuAction(
                child: Text('Do something')
              )
            ],
            child: Container(
              alignment: Alignment.topLeft,
              color: Colors.purple,
              child: const Text('Foobar')
            )
          )
        )
      )
    );
  }
}

Screen.Recording.2022-04-18.at.1.56.41.AM.mov

[maheshj01]

Hi @moffatman, Thanks for filing the issue. Is this issue regarding the size of the pink box being wrong when thecontext menu is active? The position of the menu however seems correct.

code sample

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(title: 'Flutter Demo', home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 100,
          left: 100,
          bottom: 100,
          right: 100,
          child: Transform.scale(
            scale: 0.5,
            child: CupertinoContextMenu(
                actions: const [
                  CupertinoContextMenuAction(child: Text('Do something'))
                ],
                child: Container(
                    alignment: Alignment.topLeft,
                    color: Colors.purple,
                    child: const Text('Foobar'))),
          ),
        ),
      ],
    );
  }
}

[moffatman]

@maheshmnj Correct, I updated the title

[maheshj01]

Thanks for the clarification @moffatman, I am able to reproduce the same behavior, the size of the widget within Transform.scale is incorrect, when the CupertinoContextMenu is shown.

Here the container with 200x200 has a initial size 100x100 due to scaling 0.5, But when CupertinoContextMenu is shown Transform.scale is not applied and hence the container has size 200x200

Wrapping the container with Transform.scale doesn't seem to work either. This is reproducible on both stable and the master channel.

Screen.Recording.2022-04-19.at.10.49.15.AM.mov

code sample

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(title: 'Flutter Demo', home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 100,
          left: 100,
          child: Transform.scale(
            scale: 0.5,
            child: CupertinoContextMenu(
                actions: const [
                  CupertinoContextMenuAction(child: Text('Do something'))
                ],
                child: Container(
                    height: 200,
                    width: 200,
                    alignment: Alignment.topLeft,
                    color: Colors.purple,
                    child: const Text('Foobar'))),
          ),
        ),
      ],
    );
  }
}

flutter doctor -v (mac)

[✓] Flutter (Channel stable, 2.10.5, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 2.10.5 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5464c5bac7 (12 hours ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.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.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:55555                    • android-arm64  • Android 11 (API 30)
    • iPhone 12 Pro (mobile) • 535317A4-921C-488F-B234-C2CC6D4AE5A1 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 100.0.4896.88

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

• No issues found!

[✓] Flutter (Channel master, 2.13.0-0.0.pre.602, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 2.13.0-0.0.pre.602 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f4875ae865 (34 hours ago), 2022-04-17 15:19:07 -0400
    • Engine revision 3c6d4da868
    • Dart version 2.18.0 (build 2.18.0-24.0.dev)
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! CocoaPods 1.10.2 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[✓] Android Studio (version 2021.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.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:55555                    • android-arm64  • Android 11 (API 30)
    • iPhone 12 Pro (mobile) • 535317A4-921C-488F-B234-C2CC6D4AE5A1 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 100.0.4896.88

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

! Doctor found issues in 1 category.