Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Mobile application

I have a little question about mobile application development that I hope you can help me answer. That is when you press and hold on a conversation on messenger, the screen behind it dims and it displays a prominent window with a toolbar below having options such as delete or archive or similar. It’s similar to dropping a reaction into the message. I wonder what that event is called and how to do it with the flutter language. I hope someone will answer this question for me. Thanks guys !

I try many time to search that but not work

Tags:

2

Answers


  1. 0

    A example of how you can implement it

     class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Long Press Example'),
          ),
          body: Center(
            child: GestureDetector(
              onLongPress: () {
                _showPopupMenu(context);
              },
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Long Press Me',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        );
      }
    
      void _showPopupMenu(BuildContext context) {
        final RenderBox overlay = Overlay.of(context).context.findRenderObject();
        final RenderBox box = context.findRenderObject();
        final RelativeRect position = RelativeRect.fromRect(
          Rect.fromPoints(
            box.localToGlobal(Offset.zero, ancestor: overlay),
            box.localToGlobal(box.size.bottomRight(Offset.zero), ancestor: overlay),
          ),
          Offset.zero & overlay.size,
        );
    
        showMenu(
          context: context,
          position: position,
          items: <PopupMenuEntry>[
            PopupMenuItem(
              child: Text('Option 1'),
              value: 'option1',
            ),
            PopupMenuItem(
              child: Text('Option 2'),
              value: 'option2',
            ),
          ],
        );
      }
    }
    Login or Signup to reply.
  2. 0 
    import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('Long Press Example'),
    ),
    body: Center(
      child: LongPressWidget(),
        ),
      ),
    );
  }
 }

class LongPressWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return GestureDetector(
  onLongPress: () {
    // Show your contextual menu or perform any action here
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Options'),
          content: Text('Delete or Archive'),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                // Perform delete action
                Navigator.of(context).pop();
              },
              child: Text('Delete'),
            ),
            TextButton(
              onPressed: () {
                // Perform archive action
                Navigator.of(context).pop();
              },
              child: Text('Archive'),
            ),
          ],
        );
      },
    );
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Center(
      child: Text(
        'Long Press Me',
        style: TextStyle(color: Colors.white, fontSize: 20),
           ),
         ),
        ),
      );
    }
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search