Flutter CupertinoContextMenu loses text styling on long press

Question

I'm trying to add a CupertinoContextMenu to my app. The nested widget has a Text widget. The problem is that the Text widget loses its styling as soon as the user long presses the CupertinoContextMenu. I can fix this by wrapping my code in a CupertinoApp, but I don't want to do that. So my questions is, how can use a CupertinoContextMenu containing Text without wrapping my code with a CupertinoApp?

I also tried wrapping my code in a CupertinoTheme, but that didn't seem to help.

I'm using Flutter 3.16.3 and iOS 17.0.

example

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 const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CupertinoContextMenu.builder(
        actions: [
          CupertinoContextMenuAction(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text("Test"),
          ),
        ],
        builder: (context, animation) {
          return const Center(
            child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.amber),
              child: Text('Hello world'),
            ),
          );
        },
      ),
    );
  }
}

expected

actual

Answer 1

You can achieve this by wrapping Material to the DecoratedBox

Code given below:

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 const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CupertinoContextMenu.builder(
        actions: [
          CupertinoContextMenuAction(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text("Test"),
          ),
        ],
        builder: (context, animation) {
          return const Center(
            child: Material(
              child: DecoratedBox(
                decoration: BoxDecoration(color: Colors.amber),
                child: Text('Hello world'),
              ),
            ),
          );
        },
      ),
    );
  }
}

Output:

Answer 2

One solution would be to add

TextDecoration.none to your Text's textStyle:

 Text(
        'Hello world',
        style: TextStyle(decoration: TextDecoration.none, color: Colors.black),
      ),

which results in: