flutter 在上面显示快餐栏以显示ModalBottomSheet抖动

gojuced7  于 2023-01-09  发布在  Flutter
关注(0)|答案(1)|浏览(151)

我使用showModalBottomSheet来获取OTP代码,如果用户输入错误代码,我希望显示snackBar。因此,我使用了此方法,

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),
                        )
                      ]),
                    )
                  ],
                )
              ],
            ),
          );
        });

snackBar显示在showModalBottomSheet下面,所以我想显示snackBar上面的showModalBottomSheet而不隐藏showModalBottomSheet.

6qftjkof

6qftjkof1#

您可以使用另一个ScaffoldshowModalBottomSheet获取新的ScaffoldMessenger,而不是从顶层获取。

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"),
                        )
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      );
    });

相关问题