How to customize the background color of a text selection menu

[hhcme]

Bug description

Can't I customize the background color of the text selection menu here? I saw a background color similar to pink on my phone, but I don't know how to make it compatible

Steps to reproduce

I only used these parameters

Code sample

Code sample

class _TextSelectionMenuState extends State<TextSelectionMenu> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: kTextSelectionMenuHeight,
      decoration: ShapeDecoration(
        color: widget.themeData!.useMaterial3
            ? (widget.themeData!.colorScheme.brightness == Brightness.light)
                ? const Color.fromRGBO(238, 232, 244, 1)
                : const Color.fromRGBO(48, 45, 56, 1)
            : (widget.themeData!.colorScheme.brightness == Brightness.light)
                ? Colors.white
                : const Color(0xFF303030),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
        shadows: const <BoxShadow>[
          BoxShadow(
            color: Color(0x1E000000),
            blurRadius: 10,
            offset: Offset(0, 1),
          ),
          BoxShadow(
            color: Color(0x23000000),
            blurRadius: 5,
            offset: Offset(0, 4),
          ),
          BoxShadow(
            color: Color(0x05000000),
            blurRadius: 4,
            offset: Offset(0, 2),
            spreadRadius: -1,
          )
        ],
      ),

Screenshots or Video

Screenshots / Video demonstration

Stack Traces

Stack Traces

none

On which target platforms have you observed this bug?

Android, iOS, Windows, macOS

Flutter Doctor output

Doctor output

flutter doctor -v
[✓] Flutter (Channel stable, 3.24.4, on macOS 15.1 24B83 darwin-arm64, locale zh-Hans-CN)
    • Flutter version 3.24.4 on channel stable at /Users/hhc/Desktop/flutter/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 603104015d (3 周前), 2024-10-24 08:01:25 -0700
    • Engine revision db49896cf2
    • Dart version 3.5.4
    • DevTools version 2.37.3
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/hhc/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home/bin/java
    • Java version Java(TM) SE Runtime Environment (build 17.0.13+10-LTS-268)
    • All Android licenses accepted.

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

[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google
    Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/to/macos-android-setup for detailed instructions).

[✓] IntelliJ IDEA Community Edition (version 2024.2.4)
    • IntelliJ at /Users/hhc/Applications/IntelliJ IDEA Community Edition.app
    • Flutter plugin version 82.1.3
    • Dart plugin version 242.22855.32

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

[✓] Connected device (3 available)
    • 聪～的iPhone (mobile)              • 00008120-0006501E36C3A01E • ios          • iOS 18.1 22B83
    • macOS (desktop)                 • macos                     • darwin-arm64 • macOS 15.1 24B83 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin       • macOS 15.1 24B83 darwin-arm64
    ! Error: Browsing on the local area network for ～的Apple Watch. Ensure the device is unlocked and discoverable via
      Bluetooth. (code -27)

[!] Network resources
    ✗ A cryptographic error occurred while checking "https://github.com/": Connection terminated during handshake
      You may be experiencing a man-in-the-middle attack, your network may be compromised, or you may have malware installed
      on your computer.

! Doctor found issues in 3 categories.

[KrithigaPerumal]

Hi @hhcme,

Syncfusion Flutter PDF Viewer does not support customizing the background color of the built-in text selection menu. However, you can set the canShowTextSelectionMenu property to false to hide this built-in menu and create and display your own text selection menu with a customized background color.

Here's the code snippet to hide the built-in text selection menu:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter PDF Viewer'),
      ),
      body: SfPdfViewer.network(
        'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
        controller: _pdfViewerController,
        //hide the built-in text selection menu
        canShowTextSelectionMenu: false,
        key: _pdfViewerKey,
      ),
    );
  }

Please refer to this UG documentation for more details => Text selection in Flutter PDF Viewer widget | Syncfusion
Additionally, we’ve provided a sample to help you create and display a text selection menu with customised background color, please feel free to refer to it.
context_menu_custom.zip

Regards,
Krithiga Perumal.