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

Flutter – Material3 Alert Dialog actions not centered

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"))
      ],
    ))
Tags:

3

Answers


  1. 0

    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"))
            ],
          ),
        ),
)
    Login or Signup to reply.
  2. 0

    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'),
                        ),
                      ],
                    ),
                  );
    Login or Signup to reply.
  3. 0

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

     AlertDialog(
   actionsOverflowAlignment: OverflowBarAlignment.center,
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search