Flutter & AlertDialog : How do I align it to bottom? How I make 2 Alert Dialogs like this pictures?

Question

Flutter & AlertDialog : How do I align it to bottom? How I make 2 Alert Dialogs like this pictures?Please have a lot at this picture.

showDialog(
                                context: context,
                                builder: (BuildContext context) {
                                  double width =
                                      MediaQuery.of(context).size.width;
                                  double height =
                                      MediaQuery.of(context).size.height;
                                  return AlertDialog(
                                    backgroundColor: Colors.transparent,
                                    contentPadding: EdgeInsets.zero,
                                    title: Center(
                                        child: Text("Evaluation our APP")),
                                    content: Container(

                                       // What Should I write here?

                                    )
                                },
                              );

Hi! I think it just one Alert Dialog. Insize Container you can add Column(childrend: [ListTitle,ListTitle,ListTitle, SizedBox, ListTitle ] ). — darkness, Oct 12 '20 at 04:21
But then all list tile will be connected. How can we make the background transparent? — Punreach Rany, Oct 12 '20 at 04:32

score 4 · Accepted Answer · answered Oct 12 '20 at 04:42

Here is one of the solutions:

          showDialog(
            context: context,
            builder: (BuildContext context) {
              double width = MediaQuery.of(context).size.width;
              double height = MediaQuery.of(context).size.height;
              return AlertDialog(
                  backgroundColor: Colors.transparent,
                  contentPadding: EdgeInsets.zero,
                  elevation: 0.0,
                  // title: Center(child: Text("Evaluation our APP")),
                  content: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Container(
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius:
                                const BorderRadius.all(Radius.circular(10.0))),
                        child: Column(
                          children: [
                            Text("a"),
                            Divider(),
                            Text("b"),
                            Divider(),
                            Text("c"),
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Container(
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius:
                                const BorderRadius.all(Radius.circular(10.0))),
                        child: Center(child: Text("d")),
                      )
                    ],
                  ));
            },
          );

I tried your way. But the background isn't exactly transparent. You can see the shadow of the alert dialog — Punreach Rany, Oct 12 '20 at 04:47
Please make sure the elevation of 'AlertDialog' is 0.0. I also edited in your code. — Thắng Mai, Oct 12 '20 at 04:51

Wesley Chang · Answer 2 · 2021-06-03T03:52:24.753

here is my answer, pure widget without create AlertDialog:


    final content = Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: const BorderRadius.all(Radius.circular(10.0)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextButton(onPressed: () {}, child: Text("a"),),
              Divider(height: 1,),
              TextButton(onPressed: () {}, child: Text("b"),),
              Divider(height: 1,),
              TextButton(onPressed: () {}, child: Text("c"),),
            ],
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Container(
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius:
            const BorderRadius.all(Radius.circular(10.0)),
          ),
          child: TextButton(onPressed: () {}, child: Text("d"),),
        ),
        SizedBox(
          height: 40,
        ),
      ],
    );

    showDialog(
      context: context,
      builder: (ctx) {
        return FractionallySizedBox(
          widthFactor: 0.9,
          child: Material(
            type: MaterialType.transparency,
            child: content,
          ),
        );
      }
    );

have to add Material because of text drawing error.

score 0 · Answer 3 · answered Jul 12 '23 at 14:45

Pretty late to the conversation but adding the solution here just for future reference:

builder: (context) => AlertDialog(
    alignment: Alignment.bottomCenter,
    contentPadding: const EdgeInsets.all(0),
    content: LocationUnavailableWidget(
      onLocationEnabled: () {
        onLocationEnabled();
        blocState.add(GetLocationPermissionEvent());
        Navigator.of(context).pop();
      },
    ),
  ),

The alignment property allows displaying the dialog at your desired location.

Flutter & AlertDialog : How do I align it to bottom? How I make 2 Alert Dialogs like this pictures?

3 Answers3