Skip to content

White Corners Issue in Cupertino Context Menu  #144886

@drxddy

Description

@drxddy

Steps to reproduce

  1. Use CupertinoContextMenu with a Child.
  2. Make the Child have Some Corner Radius.
  3. Make the Child have Some Color that is NOT Pure White.
  4. Long Press on the Child

Expected results

The child widget should be animated above without modifying its looks, border radius, or colors on the corners.

The current implementation of CupertinoContextMenu, on long press, while animating the child up, it's using a Container Shell in _buildAnimation with a pure White Color (0xFFFFFFFF), instead of being Transparent, this causes white corner borders for those developers that use a higher corner radius in child Widget.

Expected Look

Screenshot 2024-03-10 at 02 44 00

Actual results

The child widget is getting a modified look by CupertinoContextMenu,

  • It's getting a borderRadius: null,
  • It's getting White colored corners on all 4 corners

Actual Look

Screenshot 2024-03-10 at 02 41 03

Problem Detail:

When you long press on the Widget after using this CupertinoContextMenu as a parent, it will start animating the child out to occupy half the screen in the top, while this animation happens ( before blur appears on the screen & previewBuilder is rendered), the child is used in a Container with a decoration of pure white color (0xFFFFFFFF), with no border-radius, this will cause inconsistent looks while the child undergoes a transition.

This issue does not exist when using CupertinoContextMenu.builder, this is how CupertinoContextMenu should also be working.

Code sample

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cupertino Menu Issue',
      theme: ThemeData.dark(),
      home: const MyHomePage(title: 'Cupertino Menu Issue'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CupertinoContextMenu(
            enableHapticFeedback: true,
            actions: [
              CupertinoContextMenuAction(
                child: const Text('Action one'),
                onPressed: () {
                  Navigator.of(context, rootNavigator: true).pop();
                },
              ),
              CupertinoContextMenuAction(
                child: const Text('Action two'),
                onPressed: () {
                  Navigator.of(context, rootNavigator: true).pop();
                },
              ),
            ],
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.green, borderRadius: BorderRadius.circular(20)),
              height: 150,
              width: 150,
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Material(
                      elevation: 0.0,
                      color: Colors.transparent,
                      child: Text(
                        'CupertinoContextMenu',
                        textAlign: TextAlign.center,
                      )),
                ),
              ),
            ),
          ),
          const SizedBox(
            width: 10,
          ),
          CupertinoContextMenu.builder(
            actions: [
              CupertinoContextMenuAction(
                child: const Text('Action one'),
                onPressed: () {
                  Navigator.of(context, rootNavigator: true).pop();
                },
              ),
              CupertinoContextMenuAction(
                child: const Text('Action two'),
                onPressed: () {
                  Navigator.of(context, rootNavigator: true).pop();
                },
              ),
            ],
            builder: (context, animation) => Container(
              decoration: BoxDecoration(
                  color: Colors.brown, borderRadius: BorderRadius.circular(20)),
              height: 150,
              width: 150,
              child: const Center(
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Material(
                      elevation: 0.0,
                      color: Colors.transparent,
                      child: Text(
                        'CupertinoContextMenu.builder',
                        textAlign: TextAlign.center,
                      )),
                ),
              ),
            ),
          )
        ],
      )),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration
Screen.Recording.2024-03-10.at.01.47.03.mov

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.19.3, on macOS 14.3.1 23D60 darwin-arm64, locale en-IN)
    • Flutter version 3.19.3 on channel stable at /Users/dhikshithreddy/Developer/Src/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (2 days ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/dhikshithreddy/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/dhikshithreddy/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.15.2

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

[!] Android Studio (version unknown)
    • Android Studio at /Users/dhikshithreddy/Applications/Android Studio Jellyfish 2023.3.1 Canary 9.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 determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.11-11362436)

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/dhikshithreddy/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 17.0.6+0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2)
    • IntelliJ at /Users/dhikshithreddy/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 76.3.4
    • Dart plugin version 232.8660.129

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

[✓] Connected device (4 available)
    • Dhikshith’s iPhone (mobile) • 00008030-001A68A402DB802E            • ios            • iOS 17.3.1 21D61
    • iPhone 14 Pro (mobile)      • 4C50C415-8F1A-4147-A4C7-88B0B4D84D9C • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)             • macos                                • darwin-arm64   • macOS 14.3.1 23D60 darwin-arm64
    • Chrome (web)                • chrome                               • web-javascript • Google Chrome 122.0.6261.112

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

! Doctor found issues in 1 category.

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listf: cupertinoflutter/packages/flutter/cupertino repositoryfound in release: 3.19Found to occur in 3.19found in release: 3.21Found to occur in 3.21frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions