flutter How to update UI towards Alert dialog box?

Question

I'm making an app that supports both landscape and portrait mode.
I'm using the Orientation widget to detect if it's portrait or landscape.

Most UIs change their size and layout normally. However, the Alert Dialog only rotates the direction, but the size and layout do not change.

return AlertDialog(
      title: Row(
        children: <Widget>[
          Icon(Icons.shopping_cart),

          SizedBox(width: this.size!.width * 0.03,),

          Text('in cart'),
        ],
      ),
      content: Container(
        width: orientation == Orientation.portrait ? this.size!.width * 0.5 : this.size!.width * 0.5,
        height: orientation == Orientation.portrait ? (this.size!.height * 0.1 * nDan) + (this.size!.height * 0.1) : (this.size!.width * 0.1 * nDan) + (this.size!.width * 0.18),
        padding: EdgeInsets.zero,
        child: Column(
          children: <Widget>[

            /* Just Dialog layout Widget */


          ],
        ),
      ),
      actions: <Widget>[

        Container(
          width: orientation == Orientation.portrait ? this.size!.width * 0.3 : this.size!.width * 0.3,
          height: orientation == Orientation.portrait ? this.size!.height * 0.06 : this.size!.height * 0.1,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(16.0),
          ),
          child: TextButton(
            onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text(
              'submit',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),

        Container(
          width: orientation == Orientation.portrait ? this.size!.width * 0.3 : this.size!.width * 0.3,
          height: orientation == Orientation.portrait ? this.size!.height * 0.06 : this.size!.height * 0.1,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(16.0),
          ),
          child: TextButton(
            onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text(
              'cancel',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        )

      ],
    );

What I want is for the UI to be updated when the orientation of the phone changes while the Alert Dialog is active. If you know how, please advise.

`AlertDialog` might have fixed height/width so just create your custom dialog https://stackoverflow.com/questions/53019061/how-to-implement-a-custom-dialog-box-in-flutter — Pokaboom, Mar 08 '22 at 09:53

score 0 · Answer 1 · answered Mar 29 '22 at 00:51

Solved

return OrientationBuilder(
      builder: (context, orientation){
        return AlertDialog(
      title: Row(
        children: <Widget>[
          Icon(Icons.shopping_cart),

          SizedBox(width: this.size!.width * 0.03,),

          Text('in cart'),
        ],
      ),
      content: Container(
        width: orientation == Orientation.portrait ? this.size!.width * 0.5 : this.size!.width * 0.5,
        height: orientation == Orientation.portrait ? (this.size!.height * 0.1 * nDan) + (this.size!.height * 0.1) : (this.size!.width * 0.1 * nDan) + (this.size!.width * 0.18),
        padding: EdgeInsets.zero,
        child: Column(
          children: <Widget>[

            /* Just Dialog layout Widget */


          ],
        ),
      ),
      actions: <Widget>[

        Container(
          width: orientation == Orientation.portrait ? this.size!.width * 0.3 : this.size!.width * 0.3,
          height: orientation == Orientation.portrait ? this.size!.height * 0.06 : this.size!.height * 0.1,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(16.0),
          ),
          child: TextButton(
            onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text(
              'submit',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),

        Container(
          width: orientation == Orientation.portrait ? this.size!.width * 0.3 : this.size!.width * 0.3,
          height: orientation == Orientation.portrait ? this.size!.height * 0.06 : this.size!.height * 0.1,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(16.0),
          ),
          child: TextButton(
            onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text(
              'cancel',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        )

      ],
    );
      }
    );

Using OrientationBuilder widget to detect real-time orientation to build a new UI solves the problem!! thank you.

flutter How to update UI towards Alert dialog box?

1 Answers1