Weird transparent overlay animation when google sign in button pressed

I created a google sign in button and whenever I click it and select the account I wanted, there is a weird transparent overlay animation happened between the transition of my screens.

Here is my code:

    Future<FirebaseUser> signInWithGoogle() async {
      GoogleSignIn googleSignIn = GoogleSignIn(scopes: [
        'email',
        'https://www.googleapis.com/auth/contacts.readonly',
      ]);
      GoogleSignInAccount googleUser = await googleSignIn.signIn();
      GoogleSignInAuthentication googleAuth = await googleUser.authentication;
      final AuthCredential credential = GoogleAuthProvider.getCredential(
          idToken: googleAuth.idToken, accessToken: googleAuth.accessToken);
      FirebaseUser firebaseUser =
          (await service.firebaseAuth.signInWithCredential(credential)).user;

      if (firebaseUser != null) {
        final QuerySnapshot result = await service.firestore
            .collection('user')
            .where(
              'uid',
              isEqualTo: firebaseUser.uid,
            )
            .getDocuments();
        List<DocumentSnapshot> documents = result.documents;

        if (documents.length == 0) {
          service.firestore.collection('user').document(firebaseUser.uid).setData({
            'name': firebaseUser.displayName,
            'photoUrl': firebaseUser.photoUrl,
            'id': firebaseUser.uid
          });
        }
      }

      return firebaseUser;
    }

     onPressed: () async {
                    FirebaseUser user = await signInWithGoogle().then((value) {
                      Navigator.pushReplacement(context,
                          MaterialPageRoute(builder: (context) => ChatRoom()));
                    });
                  },

How could I fix it?