Question 262797 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter keyboard over textfield on physical device

When I run the app on ios simulator or android emulator, there’s no problem about keyboard, everything works fine. But when I run on the physical device by testflight, keyboard displaying over SendInputField. Can’t see input field and send button.

Here is the code

@override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        appBar: AppBarWidget(
         
        ),
        body: _mainBody(context),
      ),
    );
  }

  _mainBody(BuildContext context) {
    return Obx(
      () => Column(
        children: [
          Expanded(
            flex: 5,
            child: SingleChildScrollView(
              reverse: true,
              child: Stack(
                children: <Widget>[
                  _buildList(),
                ],
              ),
            ),
          ),
          Expanded(
            flex: 0,
            child: Obx(() => Visibility(
                visible: controller.isLoading.value,
                child: const CustomLoadingAPI())),
          ),
          Expanded(flex: 0, child: _submitButton(context)),
          SizedBox(height: Dimensions.heightSize)
        ],
      ),
    );
  }

  _submitButton(BuildContext context) {

    return Align(
      ....
          SendInputField(
            
            hintText: Strings.typeYour.tr,
            onTap: () {
              if (!LocalStorage.isFreeUser()) {
                if (controller.chatController.text.isNotEmpty) {
                  controller.proccessChat(args[0]);
                  Future.delayed(const Duration(milliseconds: 50))
                      .then((_) => controller.scrollDown());
                } else {
                  ToastMessage.error(Strings.writeSomethingg.tr);
                }
              } else {
                ...
              }
            },
           ,
        ],
      ),
    );
  }

  _buildList() {
    return Obx(() => ListView.builder(
          controller: controller.scrollController,
          itemCount: controller.itemCount.value,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return ChatMessageWidget(
                ....
                text: controller.messages.value[index].text,
              ...
                index: index);
          },
        ));
  }

}

Any suggestion? How should I fix this problem?

Tags:

2

Answers


  1. 0

    try add the textinputaction together with onfucos, read of documentation of the flutter obout
    https://api.flutter.dev/flutter/services/TextInputAction.html

    Login or Signup to reply.
  2. 0

    1. Use the MediaQuery.of(context).viewInsets.bottom property to get the height of the keyboard. Then, use this height to pad the bottom of the SendInputField. This will ensure that the SendInputField is always visible, even when the keyboard is open.

      double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;

       Widget _submitButton(BuildContext context) {
   return Align(
     ...
       SendInputField(
         padding: EdgeInsets.only(bottom: keyboardHeight),
         ...
       ),
     );
   }

    2. You can also try ScrollView.keyboardDismissBehavior property to set the keyboard dismiss behavior to ScrollViewKeyboardDismissBehavior.onDrag. This will allow the user to dismiss the keyboard by dragging it down off the screen.

    SingleChildScrollView(
        reverse:true,
        keyboardDismissBehavior:ScrollViewKeyboardDismissBehavior.onDrag,
        child:Stack(
        children:<Widget>[
        _buildList(),
        ],
        )

    Use a third-party keyboard library, such as flutter_keyboard_visibility or keyboard_dismissible.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search