英文:
Show Snackbar above to showModalBottomSheet Flutter
问题
我有一个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) {
// ----------------------------------------------
//这个snackbar
showSnackBar(
context,
"Invalid verification code",
"Please enter correct verification code");
}
}
},
text: "Continue",
height: 50),
)
]),
)
],
)
],
),
);
});
SnackBar显示在showModalBottomSheet下面，所以我想要在不隐藏showModalBottomSheet的情况下将SnackBar显示在showModalBottomSheet上方。
英文:
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.
答案1
得分: 1
你可以使用另一个 Scaffold 来从 showModalBottomSheet 中获取新的 ScaffoldMessenger，而不是顶层。
showModalBottomSheet(
isScrollControlled: true,
isDismissible: false,
context: context,
builder: (context) {
return SafeArea(
child: Scaffold( // 这里使用另一个 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(
"嘿，我在底部弹出窗口上方"));
ScaffoldMessenger.of(context)
.showSnackBar(snackBar);
},
child: Text("显示 SnackBar"),
)
],
),
)
],
)
],
),
),
);
});
英文:
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"),
)
],
),
)
],
)
],
),
),
);
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论