I have showModalBottomSheet to get OTP code, If the user enter wrong code, I want to show snackBar. So, I used this method,

showModalBottomSheet(
        isScrollControlled: true,
        isDismissible: false,
        context: context,
        builder: (context) {
          return SafeArea(
            child: Stack(
              alignment: Alignment.topCenter,
              clipBehavior: Clip.none,
              children: [
                Column(
                  children: [
                    Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 30, vertical: 0),
                      child: Column(children: [
                        Padding(
                          padding:
                              const EdgeInsets.symmetric(horizontal: 50),
                          child: TextField(
                            controller: codeController,
                            keyboardType: TextInputType.number,
                          ),
                        ),
                        const SizedBox(
                          height: 5,
                        ),
                        Padding(
                          padding:
                              const EdgeInsets.symmetric(horizontal: 50),
                          child: CustomButton(
                              onTap: () async {
                                if (codeController.text.length == 6) {
                                  try {
                                    PhoneAuthCredential credential =
                                        PhoneAuthProvider.credential(
                                            verificationId: verificationId,
                                            smsCode:
                                                codeController.text.trim());
                                    await _auth
                                        .signInWithCredential(credential);
                                    Navigator.of(context)
                                        .pushNamedAndRemoveUntil(
                                            '/home',
                                            (Route<dynamic> route) =>
                                                false);
                                  } catch (e) {
                                  // ---------------------------------------------- 
                                  //this snackbar 
                                     showSnackBar(
                                           context,
                                           "Invalid verification code",
                                          "Please enter correct verification code");
                                    }
                                  }
                              },
                              text: "Continue",
                              height: 50),
                        )
                      ]),
                    )
                  ],
                )
              ],
            ),
          );
        });
  

The snackBar showing under the showModalBottomSheet, So I want to show the snackBar above to showModalBottomSheet without hiding showModalBottomSheet.

CodePudding user response：

You can use another Scaffold to get new ScaffoldMessenger from showModalBottomSheet instead of top level.

showModalBottomSheet(
    isScrollControlled: true,
    isDismissible: false,
    context: context,
    builder: (context) {
      return SafeArea(
        child: Scaffold( //here another scaffold
          body: Stack(
            alignment: Alignment.topCenter,
            clipBehavior: Clip.none,
            children: [
              Column(
                children: [
                  Container(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 30, vertical: 0),
                    child: Column(
                      children: [
                        ElevatedButton(
                          onPressed: () {
                            const SnackBar snackBar = SnackBar(
                                content: Text(
                                    "Hey, I am above BottomSheet"));
                            ScaffoldMessenger.of(context)
                                .showSnackBar(snackBar);
                          },
                          child: Text("show SnackBar"),
                        )
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      );
    });