Flutter showDialog on top of a widget

Question

I'm developing a chat application which allows users to reply to others' messages. I want to make it so that when user long pressed a chat bubble, a dialog will appear directly on top of the bubble with the options to either reply or forward. I tried using showDialog, but the dialog always appears in the center. Is there any way to do this with flutter? Any help will be appreciated.

Can you include your code-snippet that will reproduce the issue ? — Md. Yeasin Sheikh, Jul 22 '22 at 11:28
it's not really an issue but I just want to know how to align my dialog directly on top of a particular widget — treble18, Jul 22 '22 at 11:51

Tejaswini Dev · Accepted Answer · 2022-07-22T12:22:06.660

2

Please refer to this focused_menu plugin

Example

or

You can also try flutter menu

edited Jul 22 '22 at 12:22

answered Jul 22 '22 at 12:15

Tejaswini Dev

1,311
2
8
20

score 1 · Answer 2 · answered Jul 22 '22 at 11:41

1

You can use show aligned dialog.

answered Jul 22 '22 at 11:41

Sulaymon Ne'matov

428
1
9

This works, but focused_menu is closer to what I need. But still, thank you so much :D – treble18 Jul 22 '22 at 12:23
Yah good, Happy coding – Anand Jul 22 '22 at 12:26

score 1 · Answer 3 · answered Jul 22 '22 at 11:55

1

Just use flutter_smart_dialog: ^4.5.3+7

or use aligned_dialog: ^0.0.6

answered Jul 22 '22 at 11:55

Anand

4,355
2
35
45

This works, but focused_menu is closer to what I needed. But still, thank you so much :D – treble18 Jul 22 '22 at 12:23

score 0 · Answer 4 · answered Jul 22 '22 at 12:13

Make custom dialog by giving scaffold a transperant background. pass your custom widget to the body, align it wherever you want

            showGeneralDialog(
                              barrierColor: Colors.black.withOpacity(0.8),
                              context: context,
                              barrierDismissible: false,
                              barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
                              transitionDuration: const Duration(milliseconds: 200),
                              pageBuilder: (context, animation1, animation2) {
                                return Scaffold(
                       body:CustomWidgetDialog(), 

                                  );
                              },
                            );

Flutter showDialog on top of a widget

4 Answers4

Linked