CODEWITHSUNDEEP
flutterdartdialogflutter-layout
Yashraj
Yashraj

Reputation: 1009

How can I change dialog position to show dialog?

Currently dialog show in center of the screen. I want to show dialog just after the add icon.

enter image description here

Code :

Widget build(BuildContext context) {
    return Scaffold(
        body: ListTile(
          leading: IconButton(
            icon: const Icon(Icons.add),
            onPressed: () async {
              await showDialogOnButtonPress();
            },
          ),
          title: const Text("Title 1"),
        ) 
        );
    }

showDialogOnButtonPress() Function :

showDialogOnButtonPress() {
        showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return const Dialog(
                child: ListTile(
                  dense: true,
                  title: Text(
                    "Alert!",
                  ),
                ),
              );});}

Thanks.

Upvotes: 1

Views: 4646

Answers (6)

Padfoot
Padfoot

Reputation: 53

  1. Remember Dialog Widget is center aligned it is not meant to be customized.

  2. Even if you want custom position then use stack and positioned widget to achieve the custom results.

// Replace Dialog widget with below code for custom result.
Stack(
   children: [
      Positioned(
         top: MediaQuery.of(context).size.height * 0.50,
         child: => your ListTile widget goes here.
      ),
    ],
)
  1. To answer the Remaining part of your question of how to give a dynamically changing position to the dialog as per the changing number of elements in the list -> This is very well explained here: https://blog.logrocket.com/complete-guide-implementing-overlays-flutter/#:~:text=GitHub%20repository.-,Example%203%3A%20The%20Overlay%20widget%20follows%20while%20scrolling,-Similar%20to%20the

Output

Upvotes: 0

Nayana Jangale
Nayana Jangale

Reputation: 11

You can align and position your dialog widget like this.

showDialog(
       context: context,
       builder: (context) {
           return Align(
                  alignment: Alignment.topCenter,
                  child: Container(
                  width: 100,
                      child: ListTile(
                       title: Text("Alert!"),
                      ),
                   ),
                );
             });

Upvotes: 0

Krahmal
Krahmal

Reputation: 325

Maybe you can use Overlay instead of Dialog.

late OverlayEntry _popupDialog;

void _showPopupDialog(int titleIndex) {
  _popupDialog = _buildPopupDialog(titleIndex);
  Overlay.of(context)?.insert(_popupDialog);
}

void _dismissPopupDialog() {
  _popupDialog.remove();
}

OverlayEntry _buildPopupDialog(int index) {

  RenderBox renderBox = ...; // find the title, as the anchor view of popupDialog
  final size = renderBox.size;
  final offset = renderBox.localToGlobal(Offset.zero);

  return OverlayEntry(
    builder: (context) => Positioned(
      left: offset.dx,
      top: offset.dy + size.height,
        child: Material( // make it seems like a dialog
          elevation: 8,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(4),
          ),
          child: Container(
            width: ...,
            height: ...,
            child: ...,
           ),
      ),
    )
  );
}

And if your dialog will show a selectable list, DropdownButton with DropdownMenuItem is better.

Upvotes: 1

Himmet Yelekin
Himmet Yelekin

Reputation: 7709

You can align and position your dialog like this.

showDialog(
  context: context,
  barrierDismissible: true,
  builder: (BuildContext context) {
    return Dialog(
      alignment: Alignment.topLeft,
      insetPadding: EdgeInsets.only(left: 5, top: 20),
      child: Container(
        width: 100,
        child: ListTile(
          title: Text("Alert!"),
        ),
      ),
    );
  },
);

Upvotes: 2

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14885

Try below code set alignment: Alignment.topLeft,:

showDialogOnButtonPress(BuildContext context) {
    showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return const Dialog(
            alignment: Alignment.topLeft,
            child: ListTile(
              dense: true,
              title: Text(
                "Alert!",
              ),
            ),
          );
        });
  }

Widget:

ListTile(
  leading: IconButton(
    icon: const Icon(Icons.add),
    onPressed: () async {
      await showDialogOnButtonPress(context);
    },
  ),
  title: const Text("Title 1"),
),

Result-> image

Upvotes: 3

M.Bakir
M.Bakir

Reputation: 1

I propose to you to use a visibility widget next to this widget and Change the State of visible to true whee it's successfully added.

Upvotes: 0

Related Questions