我无法在键盘输入之上显示 ModalBottomSheet。目前键盘会打开并隐藏后面的字段。我已经使用 MediaQuery 进行填充,如其他问题中所示,但这对我不起作用。
这是 ModalBottomSheet 的片段:
void _showLoginModal(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
isDismissible: false,
enableDrag: false,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: FractionallySizedBox(
heightFactor: 0.4,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: LoginPage(),
),
),
);
},
);
}
现在这是 login_page.dart 字段的代码:
@override
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 20),
Row(
children: [
Expanded(
child: TextField(
controller: firstNameController,
decoration: _buildInputDecoration('First Name'),
textCapitalization: TextCapitalization.words,
),
),
SizedBox(width: 20),
Expanded(
child: TextField(
controller: lastNameController,
decoration: _buildInputDecoration('Last Name'),
textCapitalization: TextCapitalization.words,
),
),
],
),
SizedBox(height: 10),
TextField(
controller: phoneNumberController,
decoration: _buildInputDecoration('10 digit Mobile Number'),
keyboardType: TextInputType.phone,
maxLength: 10,
enabled: !isOtpSent,
),
SizedBox(height: 10),
if (isOtpSent)
TextField(
controller: otpController,
decoration: _buildInputDecoration('Enter OTP'),
keyboardType: TextInputType.number,
),
SizedBox(height: 10),
ElevatedButton.icon(
onPressed: () {
if (isOtpSent) {
verifyOtp();
} else {
sendOtp();
}
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Color(0xFF0194FE)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
icon: Icon(Icons.send, color: Colors.white),
label: Text(
isOtpSent ? 'Verify OTP' : 'Send OTP',
style: TextStyle(color: Colors.white),
),
),
],
),
),
);
}
I also did face this issue, follow below step to resolve this issue
step 1: showModalBottomSheet ->
isScrollControlled: true,
useSafeArea: true,
context: context,
step 2: in scaffold ->
resizeToAvoidBottomInset: true,
step 3: and provide margin to container ->
margin: EdgeInsetsDirectional.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),