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.

[Deepak1799]

As we have not heard back from you, we assume the solution has resolved your problem satisfactorily. We are now closing this issue. If you encounter this issue again or need further assistance, please reopen this ticket by replying to this message or open a new issue for any related concerns.