flutterflutter-cupertinocupertino-widgets

Flutter CupertinoContextMenu loses text styling on long press


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

expected result

actual

actual result


Solution

  • 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:

    Output