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

Flutter – How to style the actions on AlertDialog

Currently, for some reason, the code below returns an AlertDialog with white action buttons ‘YES’ and ‘NO’.
this is the picture.

I want to change the color of the buttons WITHOUT specifying it in AlertDialog widget itself. What I am looking for is some sort of parent theme configuration from which the AlertDialog inherits the colors I want.

Why do I want this?
I am using the Paystack Plugin and the cancel confirmation dialog is setup exactly like this. I can’t change the plugin code itself.

What I have tried?
I have tried setting the primaryColor and buttonTheme properties of theme on the MaterialApp.

Thanks

showDialog(
                    context: context,
                    builder: (c) => AlertDialog(
                      content: Text('text'),
                      actions: <Widget>[
                        TextButton(
                            child: const Text('NO'),
                            onPressed: () {
                              Navigator.of(context).pop(
                                  false); // Pops the confirmation dialog but not the page.
                            }),
                        TextButton(
                            child: const Text('YES'),
                            onPressed: () {
                              Navigator.of(context).pop(
                                  true); // Returning true to _onWillPop will pop again.
                            })
                      ],
                    ));

I have checked other questions around this and folks suggested to either put custom action widgets of just style the Text Widgets. I can’t do either because this widget is part of the Paystack Plugin.

Tags:

4

Answers


  1. 0

    Add buttonBarTheme inside your theme data:

     theme: ThemeData(
    // Define the button theme
    buttonBarTheme: ButtonBarThemeData(
      buttonTextTheme: ButtonTextTheme.primary,
    ),
  ),

    Note: You can also specify more properties.

    Login or Signup to reply.
  2. 0

    If you see the source code of AlertDialog, there is no additional ThemeData that is merged to the widgets given from the actions parameter, which means your requirement is impossible. The only way to customize the buttons globally is by specifying a custom textButtonTheme in the ThemeData.

    MaterialApp(
  theme: ThemeData(
    // ...
    textButtonTheme: TextButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStatePropertyAll(Colors.yellow),
      ),
    ),
  ),
  // ...
)
    Login or Signup to reply.
  3. 0

    This is AlertDialog.And also style the actions

    Future<void> _showAlertDialog(BuildContext context) async {
   return showDialog<void>(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: Text('AlertDialog Title'),
         content: SingleChildScrollView(
           child: ListBody(
             children: <Widget>[
               Text('This is an example AlertDialog.'),
             ],
           ),
         ),
         actions: <Widget>[
           TextButton(
             style: ButtonStyle(
               foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
             
             ),
             onPressed: () {
               Navigator.of(context).pop(); 
        
             },
             child: Text('Cancel'),
           ),
           TextButton(
             style: ButtonStyle(
               backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
   
             ),
             onPressed: () {
               Navigator.of(context).pop(); // Close the AlertDialog
              
             },
             child: Text('OK'),
           ),
         ],
       );
     },
   );
 }
}
    Login or Signup to reply.
  4. 0

    Use showDialog widget and also return Container inside builder, use decoration to design as per your expectation.

    showDialog(
                context: context,
                builder: (c) => Container(
                  width: 100,
                  height: 10,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Row(
                    children: [
                      TextButton(
                        child: const Text('NO'),
                        onPressed: () {
                          Navigator.of(context).pop(
                            false,
                          ); // Pops the confirmation dialog but not the page.
                        },
                      ),
                      TextButton(
                        child: const Text('YES'),
                        onPressed: () {
                          Navigator.of(context).pop(
                            true,
                          ); // Returning true to _onWillPop will pop again.
                        },
                      ),
                    ],
                  ),
                ),
              );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search