Flutter & AlertDialog : How to stretch a container so that it has the same width with the AlertDialog box?

Question

I have been trying to make a button in AlertDialog box in Flutter. But I cannot find a way to stretch the button container. Please check my code and see the example picture below.

AlertDialog(
                    title: Center(child: Text("Picture")),
                    content: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Container(
                          width: width,
                          //height: height,
                          child: FadeInImage.memoryNetwork(
                            placeholder: kTransparentImage,
                            image: image.url,
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        InkWell(
                          onTap: () {
                            Navigator.pop(context);
                          },
                          child: Container(
                            alignment: Alignment.center,
                            height: 50,
                            width: width,
                            color: primaryColor,
                            child: Text(
                              'Okay',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        ),
                      ],
                    ),
                  );

Please help me in this. I am looking forward to hearing your opinion. Thank you in advance.

void · Accepted Answer · 2020-09-16T05:19:19.930

The AlertDialog has a default content padding of 24 logical pixels to the right, left and bottom of the AlertDialog to separate the content from the other edges of the dialog..

To Make the Button fit the AlertDialog width, you will need to give the AlertDialog a padding of zero and apply paddings to others widgets except the Button.

I added an example using your code:


     AlertDialog(
                    // change the default padding to zero
                    contentPadding: EdgeInsets.zero,
                    title: Center(child: Text("Picture")),
                    content: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                         // wrap your container with a padding widget
                         Padding(
                         padding: const EdgeInsets.all(20.0), // give a preferred padding
                         child: Container(
                         width: width,
                         //height: height,
                         placeholder: kTransparentImage,
                         image: image.url,
                            ),
                           ),
                          ),
                        SizedBox(
                          height: 10,
                        ),
                        InkWell(
                          onTap: () {
                            Navigator.pop(context);
                          },
                          child: Container(
                            alignment: Alignment.center,
                            height: 50,
                            width: width,
                            color: primaryColor,
                            child: Text(
                              'Okay',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        ),
                      ],
                    ),
                  );

Flutter & AlertDialog : How to stretch a container so that it has the same width with the AlertDialog box?

1 Answers1