Material3 Alert Dialog actions not centered

108 Views Asked by At

Im making a alert dialog to with 2 buttons, in material2 the alignment for alertdialog worked normally and the two buttons are centered, but once i updated to material3 version, both buttons are aligned to the right side, adding actionsAlignment does not fix the problem or move the buttons at all. here is how it looks like currently: enter image description here

I want the "Scan with Camera" and "Read from image" buttons to be centered horizontally. Code:

AlertDialog(
      actionsAlignment: MainAxisAlignment.center,
      alignment: Alignment.bottomCenter,
      actions: [
        Text("Testing"),
        // scan with camera
        TextButton(
            onPressed: () {
            },
            child: Text("Scan with Camera")),
        // read from image
        TextButton(
            onPressed: () {
            },
            child: Text("Read from image"))
      ],
    ))
4

There are 4 best solutions below

0
On BEST ANSWER

The actionsOverflowAlignment uses OverflowBarAlignment.end by default. In order to have them on center, use

 AlertDialog(
   actionsOverflowAlignment: OverflowBarAlignment.center,
0
On

Please try using actionsOverflowAlignment: OverflowBarAlignment.center, as in this code:

AlertDialog(
          actionsOverflowAlignment: OverflowBarAlignment.center,
          actionsAlignment: MainAxisAlignment.center,
          alignment: Alignment.bottomCenter,
          actions: [
            const Text("Testing"),
            // scan with camera
            TextButton(
                onPressed: () {}, child: const Text("Scan with Camera")),
            // read from image
            TextButton(
                onPressed: () {}, child: const Text("Read from image"))
          ],
        ),
0
On

you are adding the widgets in actions which is left aligned try adding your widgets to content property like this

AlertDialog(
        title: const  Text("Testing"), // dialog title
        content: const SingleChildScrollView(
          child: ListBody(
            children: <Widget>[
             
        // scan with camera
        TextButton(
            onPressed: () {
            },
            child: Text("Scan with Camera")),
        // read from image
        TextButton(
            onPressed: () {
            },
            child: Text("Read from image"))
            ],
          ),
        ),
)

0
On

Try this

               AlertDialog(
                    content: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text('Testing'),
                     
                        TextButton(
                          onPressed: () {
                    
                          },
                          child: Text('Scan with Camera'),
                        ),
          
                        TextButton(
                          onPressed: () {
                      
                          },
                          child: Text('Read from image'),
                        ),
                      ],
                    ),
                  );