Question 307062 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter dialog with a header and close Icon button at topRight

Trying to show a Dialog with title and close button like the following:

------------------------------
| Title                 [x]  |
|                            |
| This is dialog content.    |
|----------------------------|

Dialog size should be wrapping its content dynamically (not maximized, width not hard-coded).
The close icon is on the top right corner.

Dialog(child:
  Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('This is Title'),
          Expanded(
            child: Align(
              alignment: Alignment.topRight,
              child: IconButton(
                  icon: const Icon(Icons.close)),
            ),
          )
        ],
      ),
     
      // content widget goes here
    ],
  )
);

The Expanded will maximize the dialog width (about 90% of screen width). If the Expanded is removed, the header row width is minimized.

How to make the header row have the same width as dialog content so that the close icon is on the top right corner?

Tags:

2

Answers


  1. 0

    You can use Wrap Widget to wrap teh dialog,

    also you can play with shape property in dialog to modify size

    here is full code for using Wrap widget.

    Wrap(
      children: [
        Dialog(
            child: Column(
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text("This is a Dialog"),
                IconButton(onPressed: () {}, icon: Icon(Icons.close)),
              ],
            )
          ],
        )),
      ],
    );
    Login or Signup to reply.
  2. 0

    You can try mainAxisAlignment : MainAxisAlignment.spaceBetween instead and remove the expanded widget

    Dialog(child:
  Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment : MainAxisAlignment.spaceBetween
    children: [
      Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('This is Title'),
           Align(
              alignment: Alignment.topRight,
              child: IconButton(
                  icon: const Icon(Icons.close)),
            ),
        ],
      ),
     
      // content widget goes here
    ],
  )
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search