flutterflutter-ui

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.


Solution

  • 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),
            foregroundColor: MaterialStatePropertyAll(Colors.red),
          ),
        ),
      ),
      // ...
    )