UI Issue: Search Bar Functionality on iPad and iPhone Devices

[Aman071106]

Describe the bug/problem

When using the ApiDash app on an iPad, a UI issue occurs where the content inside the search bar is obscured by the on-screen keyboard, disrupting the user experience. On iPhone-sized screens, a bottom overflow of 57 pixels is observed. This behavior is attributed to the improper implementation of widgets within the layout, resulting in suboptimal display on various screen sizes. The issue needs to be addressed to ensure a seamless user interface across all devices.

Steps to Reproduce the bug/problem

1.Open the ApiDash app on an iPad.
2.Tap on the search bar to activate the keyboard.
3.Observe that the content inside the search bar is obscured by the keyboard.
4.On an iPhone-sized screen, open the app and tap the search bar.(For that I used a android device but with similar screen size)
5.Notice the bottom overflow of 57 pixel or similar

Expected behavior

The content inside the search bar should remain fully visible when the keyboard appears, and no bottom overflow should occur on iPhone-sized screens. The layout should adjust dynamically to accommodate the keyboard and ensure that no content is hidden or distorted.

Device Info (The device where you encountered this issue)

• OS: ipadOS
• Version: 18.3.1

Flutter Doctor

Please run the flutter doctor -v command and provide the details below:

[√] Flutter (Channel stable, 3.29.1, on Microsoft Windows [Version 10.0.26100.3194], locale en-GB)
[√] Windows Version (Windows 11 or higher, 24H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at C:\Users\aman0\AppData\Local\Android\Sdk
    • Platform android-33, build-tools 33.0.1
    • ANDROID_HOME = C:\Users\aman0\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.7+7)
    • All Android licenses accepted.
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2022 17.13.1)
[√] Android Studio (version 2024.2)
[√] VS Code (version 1.98.0)
[√] Connected device (4 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.119
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 109.0.1518.70
    • Windows (desktop) • windows • windows-x64 • Microsoft Windows 10.0.26100.3194
    • Web Server (web)    • web-server    • web-javascript • Flutter Tools

• No issues found!

[ashitaprasad]

@Aman071106 When you mention "Search bar", are you referring to the Search field at the bottom of the JSON previewer?

[Aman071106]

@ashitaprasad Yes actually the searchfield. When we try to search something, the query inside it hides below the keyboard.