CupertinoContextMenu doesn't fully work on the web

[justinmc]

CupertinoContextMenu uses the ShaderMask widget, which currently isn't supported on web. So, when a CupertinoContextMenu is used on the web, an obscure error is thrown. The docs for CupertinoContextMenu has a broken dartpad example because of this problem.

Update: CupertinoContextMenu is usable on web now, but it is missing the small darkening/lightening effect on the target before the menu opens. Fixing that depends on #44152.

[justinmc]

#52977 will get CupertinoContextMenu working without using ShaderMask, so not completely on par with other platforms. This issue shouldn't be considered closed until web supports ShaderMask (#44152) and the special casing for web added in the PR above have been removed.

[TahaTesser]

Hi @justinmc
Looks like CupertinoContextMenu is working on web now, also working on dartpad

code sample

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: CupertinoContextMenu(
          child: Container(
            color: Colors.red,
            width: 100,
            height: 100,
            alignment: Alignment.center,
            child: Material(
              color: Colors.red,
              child: Text(
                'Long Press here',
                textAlign: TextAlign.center,
              ),
            ),
            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);
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.22.0-2.0.pre.162, on Mac OS X 10.15.6 19G2021,
    locale en-GB)
    • Flutter version 1.22.0-2.0.pre.162 at
      /Users/tahatesser/Code/flutter_master
    • Framework revision bcfad2068e (77 minutes ago), 2020-09-01 08:34:25 -0400
    • Engine revision 165abef0a2
    • Dart version 2.10.0 (build 2.10.0-77.0.dev)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-29, build-tools 29.0.2
    • 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.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • 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 48.1.2
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS 13.6.1
    • macOS (desktop)        • macos                     • darwin-x64     • Mac OS X 10.15.6
      19G2021
    • Web Server (web)       • web-server                • web-javascript • Flutter Tools
    • Chrome (web)           • chrome                    • web-javascript • Google Chrome
      84.0.4147.135

• No issues found!

[justinmc]

It's still missing the small ShaderMask effect because it's not supported on the web. In your gif, the red square should darken really quickly before the menu opens.

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

Lines 517 to 522 in e82571a

	// TODO(justinmc): When ShaderMask is supported on web, remove this
	// conditional and use ShaderMask everywhere.
	// https://github.com/flutter/flutter/issues/52967.
	child: kIsWeb
	? Container(key: _childGlobalKey, child: widget.child)
	: ShaderMask(

I'll edit the title and description a bit to make it more obvious what's left to do for this issue.

[ferhatb]

@justinmc , shadermask has now landed in master. You should be able to remove kIsWeb from framework and close this issue.

[justinmc]

Awesome news! Here's the PR: #77864

[github-actions]

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.