Unable to make showDialog's background transparent

Question

I am trying to popup dialog while making http request, to accomplish this I have created function which show dialog on screen.

Here is my code.

class AppLoader {
  static Future<void> showLoadingDialog(BuildContext context, GlobalKey key) async {
    return showDialog(
      context: context,
      barrierDismissible: false,
      builder: (ctx) {
        return new WillPopScope(
          onWillPop: () async => false, 
          child: SimpleDialog(
            key: key,
            backgroundColor: Colors.white70,
            children: <Widget>[
              Center( 
                child: Column(children: <Widget>[
                  CircularProgressIndicator(),
                  SizedBox(height: 10),
                  Text('Please wait...', style: TextStyle(color: Colors.black))
                ],),
              )
            ],
          )
        );
      }
    );
  }
}

and calling it like below:

AppLoader.showLoadingDialog(context, _keyLoader);

And output is screen as below.

As you can see, at the center there is rectangular white background shaped box is showing. I want to remove that white background.

I also tried to set backgroundColor: Colors.transparent, but it not working. It is looking more wired UI.

Just want to show loader and text of dialog.

score 0 · Answer 1 · answered Apr 25 '20 at 08:05

If you want to change the background color of SimpleDialog to transparent then add a background color with elevation like below,

new SimpleDialog(
  backgroundColor: Colors.transparent,
  elevation: 0.1,
  title: new Text('Do you like Flutter?'),
  children: <Widget>[
    Center(
      child: Column(
        children: <Widget>[
          CircularProgressIndicator(),
          SizedBox(height: 10),
          Text('Please wait...', style: TextStyle(color: Colors.black))
        ],
      ),
    )
  ],
);

Unable to make showDialog's background transparent

1 Answers1