Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: change the width of an AlertDialog

Tags:

flutter

dart

I wonder how to change the default width of an AlertDialog, I only succeeded to change the border radius :

Here is my code :

showDialog(        context: context,        builder: (_) =>             new AlertDialog(                shape: RoundedRectangleBorder(                    borderRadius: BorderRadius.all(Radius.circular(10.0))                ),                content: ProductPreviewScreen(),             )     ); 

Result expected :

enter image description here Any idea?

like image 535
Julien Avatar asked Dec 24 '18 12:12

Julien


People also ask

How do you style AlertDialog in Flutter?

Edit the the widget itself: Under the AlertDialog there is a ButtonBar widget where you can use alignment: MainAxisAlignment. spaceBetween to align the buttons correctly. See this answer for an example of a custom AlertDialog widget.

How do I make AlertDialog full screen on Flutter?

Flutter Full Screen Dialog By Using showDialog method we cannot show full-screen Dialog. If we want to show dialog in full screen we must use showGeneralDialog method provided by Flutter SDK. There are some interesting parameter available in showGeneralDialog method. barrierColor – Change dropshadow outside the dialog.

How do you add a radius to AlertDialog in Flutter?

To display rounded corners for AlertDialog in Flutter, specify the shape property of AlertDialog with RoundedRectangleBorder object with border radius specified. An AlertDialog with rounded corners having a border radius of 30 is shown in the following screenshot.


1 Answers

As of May 2020, if you want to change the inset padding of a dialog, all you have to do is use the Dialog class and override the 'insetPadding' property. You can make a dialog extend all the way to the screen edges if you want to.

You can also make some cool custom dialogs by making the dialog surface itself transparent and then add whatever widgets you want. For example:

showDialog(Dialog(   backgroundColor: Colors.transparent,   insetPadding: EdgeInsets.all(10),   child: Stack(     overflow: Overflow.visible,     alignment: Alignment.center,     children: <Widget>[       Container(         width: double.infinity,         height: 200,         decoration: BoxDecoration(           borderRadius: BorderRadius.circular(15),           color: Colors.lightBlue         ),         padding: EdgeInsets.fromLTRB(20, 50, 20, 20),         child: Text("You can make cool stuff!",           style: TextStyle(fontSize: 24),           textAlign: TextAlign.center         ),       ),       Positioned(         top: -100,         child: Image.network("https://i.imgur.com/2yaf2wb.png", width: 150, height: 150)       )     ],   ) )); 

Results in:

Dialog example

like image 128
user1094821 Avatar answered Oct 02 '22 14:10

user1094821