showModalBottomSheet 的键盘重叠问题

问题描述 投票:0回答:1

我无法在键盘输入之上显示 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),
              ),
            ),
          ],
        ),
      ),
    );
  }
flutter flutter-showmodalbottomsheet
1个回答
0
投票
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,
),
© www.soinside.com 2019 - 2024. All rights reserved.