Flutter push new screen inside same modal bottom sheet-CodePudding

In my app's LoginScreen() I have an option to log in using a one-time password. If a user selects that option a modal bottom sheet is shown where they input their phone number. When they press a button the phone number is sent to a new modal bottom sheet where they can confirm the code. The issue with this is that it ends up having two modal bottom sheets stacked on top of each other and if a user wants to go back to the log-in screen they have to dismiss both instead of just one. How can I do something like Navigator.of(context).push() inside the modal bottom sheet?

Here's what I currently have...

LoginScreen>PhoneAuthScreen:

                      showBarModalBottomSheet(
                          context: context,
                          builder: (context) => PhoneAuthScreen());

PhoneAuthScreen>OTPValidationScreen:

                      showBarModalBottomSheet(
                          context: context,
                          builder: (context) =>
                              OTPValidationScreen(phoneNumber: phone));

CodePudding user response：

Modal bottom sheets usually don't have a Scaffold. That's why when a Navigator.pop(context) is triggered, it's going to clear all the sheets on its way.

I suggest you to make the PhoneAuthScreen a normal screen with Scaffold. Not a modal bottom sheet.

Then use the OTPValidationScreen as a sheet like you do.

CodePudding user response：

Basically, the issue was that I could not use Navigator.of(context).pop before showing the next modal bottom sheet because a variable was being passed to the new one. Here was my solution:

Make the phone number a static string so it could be accessed all the time. This made it possible for me to leave the screen and still pass the phone number to the next one.
Change the code from this:

                      showBarModalBottomSheet(
                          context: context,
                          builder: (context) =>
                              OTPValidationScreen(phoneNumber: _phoneNumber));

to this:

                      Navigator.of(context).pop();
                      showBarModalBottomSheet(
                          context: context,
                          builder: (context) =>
                              OTPValidationScreen(phoneNumber: _phoneNumber));