Flutter: How to change the width of an AlertDialog?

Question

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 :

Any idea?

Assuming

Answer 1

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:

Match

This is now the proper solution, others seem more like hacks IMO – Webfoot

I want to create a showDialog of 150 x 150 pixels fixed size. I have updated container width and height as return Container( height: 150, width: 150, ); but still not working. I am getting 3:2 ratio rectangle box instead of square share. any suggestion. – Arvind

This does not work for AlertDialog as requested. – Missionary

@BillyParadise, insetPadding does indeed work for AlertDialog as well as Dialog, but Dialog is not implemented with a ConstrainedBox, where AlertDialog is. This means that AlertDialog sizes itself based on its children. To overcome this and make AlertDialog respond to insetPadding make the AlertDialog's content Center(child: SizedBox(width: MediaQuery.of(context).size.width, child: {YOUR ACTUAL ALERT CONTENT})). You can also get rid of Center and set SizeBox.height the same as width. See: github.com/flutter/flutter/issues/61154#issuecomment-770627805 – Ryurik

New Flutter Versions: Replace overflow: Overflow.visible with clipBehavior: Clip.none – Langford

Answer 2

This is much more simple then the other answers make it out to be. Just use a builder to change the size of the dialog as it is being built(constructed, instantiated in other languages). This means you can also query the screen size and make a decision on how much space you want depending on said screen size. For example more space on a tablet then on a phone. You can make Scaffold a child of the Container if you need the App bar and other functions.

showDialog(
  context: context,
  builder: (_) => new AlertDialog(
  shape: RoundedRectangleBorder(
    borderRadius:
      BorderRadius.all(
        Radius.circular(10.0))),
    content: Builder(
      builder: (context) {
        // Get available height and width of the build area of this widget. Make a choice depending on the size.                              
        var height = MediaQuery.of(context).size.height;
        var width = MediaQuery.of(context).size.width;

        return Container(
          height: height - 400,
          width: width - 400,
        );
      },
    ),
  )
);

Examples of different sizes:

Optionally add these to remove unneeded inner/outer border space.

          insetPadding: EdgeInsets.zero,
          contentPadding: EdgeInsets.zero,
          clipBehavior: Clip.antiAliasWithSaveLayer,

Allina

padding is too large. – Foppery

Shinriyo it’s an example. Don’t copy the size exactly change to meet your needs. – Allina

sorry to say but does not work for me. Thanks. – Arvind

Kamlesh I am still using this code every day in my apps. Working here. Maybe you missed something and should recheck – Allina

@Allina I want to create a showDialog of 150 x 150 pixels fixed size. I have updated container width and height as return Container( height: 150, width: 150, ); but still not working. I am getting 3:2 ratio rectangle box instead of square share. any suggestion. – Arvind

Answer 3

Using built-in dialog:

• To increase the width:

  AlertDialog(
    title: Text("AlertDialog"),
    insetPadding: EdgeInsets.zero,
  )
  

• To decrease the width:

  AlertDialog(
    title: Text("AlertDialog"),
    insetPadding: EdgeInsets.symmetric(horizontal: 100),
  )
  

---

Using custom dialog:

Call this method:

showGeneralDialog(
  context: context,
  barrierColor: Colors.black.withOpacity(0.5),
  pageBuilder: (_, __, ___) {
    return Material(
      color: Colors.transparent,
      child: Center(
        child: Container(
          color: Colors.white, // Dialog background
          width: 120, // Dialog width
          height: 50, // Dialog height
          child: SingleChildScrollView(
            child: Column(
              children: [
                Text('I am a small Dialog'),
              ],
            ),
          ),
        ),
      ),
    );
  },
);

Unnumbered

I want to make 200 x 200 pixels dialog box. How can I do in flutter? Kindly suggest. Thanks. – Arvind

@Arvind As of now you can't do that using AlertDialog, you'll have to create your own Widget. See this answer to get started. – Unnumbered

I love short answers! – Gnotobiotics

@Arvind I have not tried yet but I think for your case, you may want to use dailog inside a Container or SizedBox of the size you choose. – Gnotobiotics

Setting the insetPadding alone does not work. You also have to wrapt the content in a SizedBox. See my answer above. – Shena

Answer 4

You could try to wrap your AlertDialog widget with ConstrainedBox widget as suggested in here and set your desired value for maxWidth parameter.

UPDATED

I just looked at the code of the parent of the AlertDialog widget which is the Dialog widget and found out that it wrapped its child with a ConstrainedBox widget with a minWidth of 280 pixels. This is the reason why we can't change the width of the AlertDialog widget.

Fortunately, there are two things that we can do. First option would be to alter the default minWidth of the Dialog Widget inside the dialog.dart file. Note that changing this would affect all of your flutter projects that uses the Dialog widget.

//inside dialog.dart

class Dialog extends StatelessWidget {

...

@override
Widget build(BuildContext context) {
  final DialogTheme dialogTheme = DialogTheme.of(context);
  return AnimatedPadding(
    padding: MediaQuery.of(context).viewInsets + const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
    duration: insetAnimationDuration,
    curve: insetAnimationCurve,
    child: MediaQuery.removeViewInsets(
      removeLeft: true,
      removeTop: true,
      removeRight: true,
      removeBottom: true,
      context: context,
      child: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(minWidth: 280.0), // You can set your desired value for minWidth here
          child: Material(
            elevation: 24.0,

            ...

You can then use the AlertDialog like this:

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

The other way would be to create our own customize dialog.

showDialog(
  context: context,
  builder: (_) => Center( // Aligns the container to center
    child: Container( // A simplified version of dialog. 
      width: 100.0,
      height: 56.0,
      color: Colors.pink,
      )
    )
 );

Cranmer

I tried wrapping the ConstrainedBox with a Center widget or Align widget. It did change the width but something is off. I also set the contentPadding parameter of the AlertDialog to zero and it eliminated the default padding of content in AlertDialog. – Cranmer

@JeromeEscalante I tried to wrap it in a center widget, with a minWidth, but it still doesn't work.. did the width has changed when you tried? – Assuming

I dont think this is possible with the material alert dialog. You can write your own dialog to achive this. I think the material alert dialog is already insida fixed sized widget. – Foretime

@Julien, I think Janpan is right. It's either we create our own customized dialog and display it using showDialog function or we could alter some parameter of the Dialog widget inside the dialog.dart file. – Cranmer

Answer 5

Use Padding widget

 Padding(
   padding: EdgeInsets.only(left: 50.0, right: 50.0),
   child://AlertDialog or any other Dialog you can use
         Dialog(
                elevation: 0.0,
                backgroundColor: Colors.transparent,
                child: Container(
                  width: 10.0,
                  height: 50.0,
                  color: Colors.red,
                )
            ))

Addison

add padding top layer... Padding(padding: "..",child: – Addison

Answer 6

Medling with insetWidth and future builder etc. didn't work for me - just editing the content prop's width worked perfectly.

showDialog(
    context: context,
    builder: (context) {
      Future.delayed(Duration(seconds: 1000), () {
        Navigator.of(context).pop(true);
      });
      return AlertDialog(
        insetPadding: EdgeInsets.all(8.0),
        title: Text(
          "Time to go pro!",
          textAlign: TextAlign.center,
        ),
        content: Container(
          width: MediaQuery.of(context).size.width,
          child: BuySheet(
              applePayEnabled: applePayEnabled,
              googlePayEnabled: googlePayEnabled,
              applePayMerchantId: applePayMerchantId,
              squareLocationId: squareLocationId),
        ),
      );
    });

Chinaware

Great! insetPadding + container's width makes full-width dialog. – Desantis

Answer 7

use Dialog()

Dialog(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
  insetPadding: EdgeInsets.all(15),
  child: SingleChildScrollView(
    child: Container(),
    ),
  ),
);

Informed

It's better to provide little detail on the answer for future reference on the SO community. – Sixty

Answer 8

The solution that worked for me.

Set the insetPadding of the AlertDialog.

Plus, wrap the content in a SizedBox and set the width to MediaQuery.of(context).size.width.

return AlertDialog(
  content: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: const Text("Content"),
  ),
  insetPadding: const EdgeInsets.all(10),
);

Setting just the insetPadding alone does not work.

Shena

This perhaps works when you want the AlertDialog to be smaller than it's default width, but it does not make it larger than its default size, which is what the OP asked for. – Calen

No. This also works if you want to make the AlertDialog bigger. I am using this code and it works. – Shena

Answer 9

My solution is to enclose the Dialog in a widget that defeats the extra padding added by the Dialog class by modifying the MediaQueryData.

import 'package:myapp/widgets/dialog_inset_defeat.dart';
...

showDialog(
    context: context,
    builder: (_) => DialogInsetDefeat(
      context: context,
      child: SimpleDialog(...),
    )
);

... or use showDialogWithInsets() for custom values:

showDialogWithInsets(
    context: context,
    edgeInsets: EdgeInsets.symmetric(horizontal: 8),
    builder: (_) => SimpleDialog(...),
    )
);

File dialog_inset_defeat.dart

   import 'package:flutter/material.dart';

/// A widget to defeat the hard coded insets of the [Dialog] class which
/// are [EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0)].
///
/// See also:
///
///  * [Dialog], for dialogs that have a message and some buttons.
///  * [showDialog], which actually displays the dialog and returns its result.
///  * <https://material.io/design/components/dialogs.html>
///  * <https://mcmap.net/q/166952/-flutter-how-to-change-the-width-of-an-alertdialog>
class DialogInsetDefeat extends StatelessWidget {
  final BuildContext context;
  final Widget child;
  final deInset = EdgeInsets.symmetric(horizontal: -40, vertical: -24);
  final EdgeInsets edgeInsets;

  DialogInsetDefeat({@required this.context, @required this.child, this.edgeInsets});

  @override
  Widget build(BuildContext context) {
    var netEdgeInsets = deInset + (edgeInsets ?? EdgeInsets.zero);
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(viewInsets: netEdgeInsets),
      child: child,
    );
  }
}

/// Displays a Material dialog using the above DialogInsetDefeat class.
/// Meant to be a drop-in replacement for showDialog().
///
/// See also:
///
///  * [Dialog], on which [SimpleDialog] and [AlertDialog] are based.
///  * [showDialog], which allows for customization of the dialog popup.
///  * <https://material.io/design/components/dialogs.html>
Future<T> showDialogWithInsets<T>({
  @required BuildContext context,
  bool barrierDismissible = true,
  @required WidgetBuilder builder,
  EdgeInsets edgeInsets,
}) {
  return showDialog(
    context: context,
    builder: (_) => DialogInsetDefeat(
      context: context,
      edgeInsets: edgeInsets,
      child: Builder(builder: builder),
    ),
    // Edited! barrierDismissible: barrierDismissible = true,
    barrierDismissible: barrierDismissible,
  );
}

Works for me as of Flutter 1.8.3. YMMV

Tadpole

Note that this is really a kludge to get around the hard-coded values in the toolkit. Later versions of Flutter may allow for more flexibility. It does try to work with the existing framework as opposed to replacing it, although each solution has its place. – Tadpole

@Crec Beback It can't close by tapping out of the container – Foppery

@Foppery I have not tested in a while. Reviewing my code (by sight only) I would expect the opposite error where always "barrierDismissible". I have updated above. – Tadpole

Gyuri Majercsik has suggested that my solution does not handle keyboard insets and that that can be fixed easily by including the current context insets by adding MediaQuery.of(context).viewInsets to the netEdeInsets. I'm not in a position to test but assume he would not have added this if it was not true. – Tadpole

I want to make 200 x 200 pixels fixed size dialog box. How can I do in flutter? Kindly suggest. Thanks. – Arvind

Answer 10

I finally found a way to change the width of an AlertDialog. Just wrap the "content" with a Container, and set the width to it.

return AlertDialog(
...
content: Container(
   width: MediaQuery.of(context).size.width*0.45,
   child: ...

AlertDialog with width modified

Jeconiah

All the other solutions where more complicated or used another Widget. – Jeconiah

Answer 11

You can change the AlertDialog property insetPadding it will be a simple way for you.

 void alertBox() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        insetPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        // (horizontal:10 = left:10, right:10)(vertical:10 = top:10, bottom:10)
        contentPadding: EdgeInsets.zero,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        content: Container(
          width: MediaQuery.of(context).size.width - 20,
          // width = device width minus insetPadding = deviceWidth - 20  (left:10, right:10 = 20)
          height: MediaQuery.of(context).size.height - 20,
          // height = device height minus insetPadding = deviceHeight - 20  (top:10, bottom:10 = 20)
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Card(
              margin: EdgeInsets.zero,
              color: Colors.amber,
            ),
          ),
        ),
      ),
    );
  }

Gazebo

Answer 12

Refer this code. you can change width and height of dialogue box by setting insetPadding, because it taking default padding so we need to change like this.

showDialog(
  context: context,
  builder: (_) =>
   Dialog(
     insetPadding: EdgeInsets.symmetric(horizontal: 2.0, vertical: 2.0),
     backgroundColor: Colors.transparent,
    child: Container(
      width: double.infinity,
      height: MediaQuery.of(context).size.height*0.7 ,
      decoration: BoxDecoration(
        color: Colors.grey[900],
      ),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                GestureDetector(
                  onTap: (){
                    Navigator.pop(context);
                  },
                    child: Icon(Icons.close,color: Colors.grey,)),
              ],
            ),
          ),
          Text("select your avatar",style: TextStyle(color: white,fontWeight: FontWeight.bold),),
        ],
      ),
    ),
  ),
);

Nephology

🤝 @ Akshatha P Halady – Nikolai

Answer 13

Hello you can actually use insetPadding and use a column inside content that will contain a SizedBox(width:MediaQuery.of(context).size.width).The only difference is that I used AlertDialog. Bellow is the way it worked for me. You can set dialog width by changing padding inside insetPadding. Hope i helped :).

dialog(){
TextEditingController controller = TextEditingController();

return showDialog(
  context: context,
  barrierDismissible: true,
  builder: (_) => AlertDialog(
    insetPadding:  EdgeInsets.symmetric(
        horizontal: MediaQuery.of(context).size.width * 0.08),
    content: SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: 16,
            width: MediaQuery.of(context).size.width,
          ),
          Text(
            'Hello',
          ),
          SizedBox(
            height: 15,
          ),
          Text(
            'Description',
          ),
          TextField(
            controller: controller,
            style: TextStyle(
              color: Colors.black,
            ),
          ),
        ],
      ),
    ),
    actions: [
      FlatButton(
        child: Text("Close"),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
  ),
);

}

This is how it looks like https://i.stack.imgur.com/bvKpP.png

Meshach

Pretty nice way of thinking, I have a question though. Why do you initiate the TextEditingController inside the method's block and how will you get the value outside of it. – Branks

Answer 14

:

 return Dialog(

  backgroundColor: Colors.white,
  insetPadding: EdgeInsets.all(10.0),
  child: Container(
   
    width: double.infinity,

use insetpadding where you are returning Dialog and give it a double value, For my case, i gave it a 10.0 insetPadding: EdgeInsets.all(10.0), you can give it a custom height

Procession

Answer 15

you can easily Wrap you content inside your AlertDialog with Sizedbox widget contain the size you need

 return AlertDialog(
            content: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[

...etc

Salvatoresalvay

Answer 16

Add InsetPadding property like this

     insetPadding: EdgeInsets.zero




  AlertDialog(
      title: Center(child: Text("$title")),
------------------------->Here we added the property
      insetPadding: EdgeInsets.zero,
      titlePadding: EdgeInsets.only(top: 14.0, bottom: 4),
      content: Container(
        height: 50,
        child: TextFormField(
          controller: find_controller,
          decoration: InputDecoration(
            suffixIcon: context.watch<MediaProvider>().isChangeDialog
                ? IconButton(
                    onPressed: () {
                      clearController(find_controller);
                    },
                    icon: Icon(Icons.clear))
                : null,
            border: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.deepPurpleAccent)),
            hintText: 'Id',
          ),
          onChanged: (val) {
            if (val.isNotEmpty)
              context.read<MediaProvider>().isChangeDialog = true;
            else
              context.read<MediaProvider>().isChangeDialog = false;
          },
        ),
      ),
      actions: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(4.0),
              child: OutlinedButton(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Align(
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 12.0),
                          child: Icon(Icons.clear),
                        ),
                      ),
                      Text("Cancel")
                    ],
                  ),
                  onPressed: () {
                    context.read<MediaProvider>().isChangeDialog = false;
                    Navigator.of(context).pop();
                  }),
            ),
            Padding(
              padding: const EdgeInsets.all(4.0),
              child: ElevatedButton(
                  onPressed: context.watch<MediaProvider>().isChangeDialog
                      ? () {
                          context.read<MediaProvider>().isChangeDialog = false;
                          okCallback;
                        }
                      : null,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Align(
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 12.0),
                          child: Icon(Icons.check),
                        ),
                      ),
                      Text("OK")
                    ],
                  )),
            )
          ],
        ),
      ],
    );

Before

After

Octoroon

Answer 17

AlertDialog(
   insetPadding: EdgeInsets.all(12), // Outside Padding
   contentPadding: EdgeInsets.all(12), // Content Padding
   ....

You can try 0/any-number instead of 12.

Gustav

Answer 18

return Dialog(
      insetPadding: EdgeInsets.symmetric(
        horizontal: X,
      ),
);

Aunt

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Magruder

Answer 19

I found the simplest way... just add insetPadding: EdgeInsets.zero, and it will expand to max size width:

 showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Center(child: Text("Send Message", style: TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold),)),
              backgroundColor: Colors.indigo[700],
              insetPadding: EdgeInsets.zero,
              content:

Poodle

Please show a screenshot of this working, cause currently this doesn't expand the width of the AlertDialog – Wilks

You need to set the parent widget's size to width: MediaQuery.of(context).size.width – Poodle

Answer 20

As a workaround, you can play with the dialog title, in most cases the dialog will expand horizontally to accommodate the title. So you can create big title to make sure the dialog will take max width. Obviously you can't just put long title, but you can build your title of two text widgets, where one of them has text color matching background. For the case where no title should be shown:

showDialog(
   context: context,
   builder: (_) =>
        new AlertDialog(
           title: Text('hidden title, just set font text to the same as background.',
                 style: TextStyle(color: Colors.white)),
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.all(Radius.circular(10.0))
           ),
           content: ProductPreviewScreen(),
        )
);

Sedgewick

Answer 21

/// this works for me paste your body and see result

Future _showDialog() async { return showDialog( context: context,

barrierDismissible: true,
builder: (BuildContext context) {
  return Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Material(
          color: Colors.transparent,
          child: Container(
            padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(5),
            ),
            alignment: Alignment.center,
            width: MediaQuery.of(context).size.width,
            margin: EdgeInsets.all(10),
            /// paste your item body 
            child:body,
          ),
        ),
      ],
    ),
  );
},

); }

Clause

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Scene

Answer 22

you can use this package: https://pub.dev/packages/flutter_smart_dialog

the package can make custom size dialog more easily and more feature in it.

for example:

SmartDialog.show(builder: (context) {
  return Container(
    height: 80,
    width: 180,
    decoration: BoxDecoration(
      color: Colors.black,
      borderRadius: BorderRadius.circular(10),
    ),
    alignment: Alignment.center,
    child:
    Text('easy custom dialog', style: TextStyle(color: Colors.white)),
  );
});

Circum

Answer 23

To be flexible in the width and height of dialog from content use this if you want a height of dialog also set from you, you can add height in container MediaQuery.of(context).size.height then add vertical padding in insetPadding

showDialog(
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      insetPadding: EdgeInsets.symmetric(horizontal: 20),
      contentPadding: EdgeInsets.all(20),
      children:[
        Container(
            width: MediaQuery.of(context).size.width,
            child: widget
        )
      ]
    );
  },
);

Explicit

Answer 24

Hope this helps :D

I am no expert, but I don't know why are they making it so complicated. I just wanted to increase the width a little which is what the OP and many would want.

A SizedBox does the trick.

showDialog(
    context: context,
    builder: (context) => const AlertDialog(
      actions: [
        Text("Some text"),

        SizedBox(
          height: 20,
          width: 200, // width here
        ),

        Text("Some more text"),
      ]),
)

Thanks!
Upvote if it helps :)

Stilla

You can also set the width to a certain % of the screen width using MediaQuery – Stilla

Answer 25

just wrap content with column

showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        title: const Text("Bookmark"),
                        insetPadding: const EdgeInsets.all(0),
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                        content: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Container(
                              color: Colors.red,
                              width: screen.width * 0.70,
                            )
                          ],
                        ),
                      );
                    });

Argyres

Answer 26

In my case, I was using listview inside the dialog box so I was not using shrink wrap inside ListView hopes this will help someone.

ListView.builder(
shrinkWrap : true...
...
};

Tupelo

Answer 27

I am using get package and it is wonderful. use its dialog, easily sizable

Get.generalDialog(pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation,) {
      return SimpleDialog(
        shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(Constants.padding), ),
        elevation: 0, backgroundColor: Colors.transparent,
        children: [Center(child: Stack(
          children: <Widget>[
            Container(width: Get.width * 0.95,
              padding: const EdgeInsets.only(left: Constants.padding,top: Constants.avatarRadius
                  + Constants.padding, right: Constants.padding,bottom: Constants.padding
              ),
              margin: const EdgeInsets.only(top: Constants.avatarRadius),
              decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                color: Get.theme.scaffoldBackgroundColor,
                borderRadius: BorderRadius.circular(Constants.padding),
                boxShadow: const [
                  BoxShadow(color: Colors.black,offset: Offset(0,10), blurRadius: 10 ),
                ]
              ),
              child: Text('body'),
            ),
            Positioned(
              left: Constants.padding, right: Constants.padding,
              child: CircleAvatar(
                backgroundColor: Colors.blueAccent, radius: Constants.avatarRadius,
                child: ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(Constants.avatarRadius)),
                  child: Icon(Icons.done, size: 24, color: Colors.white,)
                ),
              ),
            ),
            Positioned(
              left: 0,
              //right: Constants.padding,
              child: CircleAvatar(
                backgroundColor: Colors.blueAccent, radius: Constants.avatarRadius,
                child: ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(Constants.avatarRadius)),
                  child: InkWell(child: const Icon(Icons.close, size: 24, color: Colors.white,), onTap: (){Get.back();},)
                ),
              ),
            ),
          ],
        ))],
      );
    }, barrierDismissible: true, barrierLabel: '');

Edentate

Answer 28

Use width: MediaQuery.of(context).size.width to increase width of the alert

Example:

return AlertDialog(
      title: Text("Select Birth Date"),
      content: Container(
        width: MediaQuery.of(context).size.width,
        height: 300,
        child: CupertinoDatePicker(
          mode: CupertinoDatePickerMode.date,
          initialDateTime: DateTime(1969, 1, 1),
          onDateTimeChanged: (DateTime newDateTime) {
            // Do something
           
          },
        ),
      ),
      actions: <Widget>[
        FlatButton(
          child: Text("Select"),
          onPressed: () {
            widget.onSelected(selectedDate);
            Navigator.pop(context);
            //.....
          },
        ),
      ],
    );

Courtenay

Answer 29

in the alert box ..just add inset padding as

alertbox(

.. insetpadding: EdgeInsets.symmetric(horizontal:10),

..

),

It will change the width

Kasper