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

Flutter – AlertDialog Background is light purple

I am using Alert Dialog in my Flutter application it was working fine.
But after upgrading the flutter version to 3.16.0 the backgroundColor property of AlertDialog is not working as expected.

void _showDialog() {
    BuildContext? dialogContext;
    // set up the buttons
    Widget cancelButton = TextButton(
      child: const Text("Cancel"),
      onPressed: () {
        if (dialogContext != null) {
          Navigator.of(dialogContext!).pop();
        }
      },
    );
    Widget emailButton = TextButton(
      child: const Text("Email us"),
      onPressed: () {},
    );

    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      backgroundColor: Colors.white,
      title: const Text("Title"),
      content: Container(
        color: Colors.white,
        child: const Text('Content'),
      ),
      actions: [
        cancelButton,
        emailButton,
      ],
    );

    // show the dialog
    showDialog(
      context: context,
      builder: (context) {
        dialogContext = context;
        return alert;
      },
    );
  }

Output

Tags:

2

Answers


  1. 0

    you can change it using surfaceTintColor property like this:

     AlertDialog alert = AlertDialog(
                              backgroundColor: Colors.white,
                              surfaceTintColor: Colors.white,
                              title: const Text("Title"),
                              content: Container(
                                color: Colors.white,
                                child: const Text('Content'),
                              ),
                              actions: [],
                            );
    Login or Signup to reply.
  2. 0

    But after upgrading the flutter version to 3.16.0 the backgroundColor property of AlertDialog is not working as expected.

    I assume what you expect is the whole app to look just like before you upgrade to Flutter 3.16, which mean you should opt out of Material 3 (which is enabled by default since Flutter 3.16). You can do this specifying useMaterial3: false in your MaterialApp theme, for example like this:

    MaterialApp(
  // ...
  theme: ThemeData(
    useMaterial3: false,
    // ...
  ),
);

    Read more about the changes here: https://medium.com/flutter/whats-new-in-flutter-3-16-dba6cb1015d1

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search