Text Field "Done" padding

[scottwyn13]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

When user selects text field to enter text and then presses "done" on the upper right side of apple keyboard it closes the keyboard as expected but when the users goes back to the text field to enter text again it pads the bottom of the text field by the size of the keyboard.

Tested in safari, chrome and DuckDuckGo all with the same result

Expected Behavior

No additional padding should exists and the text field should be right above the kjeybpard like it is on the first time the user goes to edit.

Steps to Reproduce

1. Create page.
2. Add TextField
3. Publish to web
4. Tap on textfield to input text
5. Tap done (closes keyboard)
6. Tap on textfield to enter text again

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

Container( width: 200.0, child: TextFormField( controller: _model.textController, focusNode: _model.textFieldFocusNode, autofocus: false, obscureText: false, decoration: InputDecoration( isDense: true, labelStyle: FlutterFlowTheme.of(context).labelMedium.override( fontFamily: 'Poppins', letterSpacing: 0.0, ), hintText: 'TextField', hintStyle: FlutterFlowTheme.of(context).labelMedium.override( fontFamily: 'Poppins', letterSpacing: 0.0, ), enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: Color(0x00000000), width: 1.0, ), borderRadius: BorderRadius.circular(8.0), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide( color: Color(0x00000000), width: 1.0, ), borderRadius: BorderRadius.circular(8.0), ), errorBorder: OutlineInputBorder( borderSide: BorderSide( color: FlutterFlowTheme.of(context).error, width: 1.0, ), borderRadius: BorderRadius.circular(8.0), ), focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide( color: FlutterFlowTheme.of(context).error, width: 1.0, ), borderRadius: BorderRadius.circular(8.0), ), filled: true, fillColor: FlutterFlowTheme.of(context).secondaryBackground, ), style: FlutterFlowTheme.of(context).bodyMedium.override( fontFamily: 'Open Sans', letterSpacing: 0.0, ), cursorColor: FlutterFlowTheme.of(context).primaryText, validator: _model.textControllerValidator.asValidator(context), ), )

Visual documentation

https://github.com/user-attachments/assets/21abada1-2afd-47b3-9e19-009b01b3fb72

Environment

- FlutterFlow version: 5.0.12
- Flutter version: 3.24.2
- Platform: Web
- Browser name and version: Safari, Chrome, DuckDuckGo
- Operating system and version affected: iOS 18.2

Additional Information

No response

[Alezanello]

Hello!

This behavior is not exclusive to iOS; it is also reproducible on Android. However, this is actually the expected behavior.

The reason the screen moves up is to prevent the keyboard from obscuring the element you are trying to write in. In some cases, tapping on a text field without this adjustment could result in the keyboard hiding the text field entirely. This behavior is controlled by Flutter (not FlutterFlow) as a built-in mechanism to ensure the widget remains visible while the keyboard is active.

I hope this clarifies things! Let me know if you have any further questions.

[scottwyn13]

But the problem is that it doubles up the padding. I understand the need to pad the bottom to ensure the keyboard doesn't obstruct the element but it is double the necessary padding.