How can we create a container with a text as a child of showDialog and appear the text in a proper way

I used to make a text ('Loading') to be centered in the show dialog but what happened is the text is appearing in a bad way as when we make a screen without scaffold, it is appearing here the same, I used to put scaffold above the center widget but it didn't work also.

      showDialog(
      context: context,
      barrierColor: Colors.blueGrey.shade50.withOpacity(0.5),
      barrierDismissible: true,
      builder: (ctx) {
        return WillPopScope(
          onWillPop: () async => false,
          child: Center(
            child: Container(
              child: const Text('Loading'),
            ),
          ),
        );
      });

It is missing Material, You can wrap with any material widget.

barrierDismissible: true,
builder: (ctx) {
  return Material( //here
    child: WillPopScope(
      onWillPop: () async => false,