Only top bar is visible when keyboard is visible on Landscape mode on mobile.

[basemosama]

Bug report

When trying to use keyboard with Text Field on the wolt page in Landscape mode in mobile, Only top bar is visible and the main content can't be accessed. As We can't see the text field or scroll in the main content.

Expected behavior

We need to have option to hide the top bar so we can hide it when the keyboard is visible. Maybe when the leadingNavBarWidget, trailingNavBarWidget, topBar and topBarTitle are all null we can hide the toolbar

Also it would be nice to customize the top bar padding.

Here is a screenshots of the issue.

[ulusoyca]

@basemosama You can actually do this behavior.

1. Use flutter_keyboard_visibility package to listen to the keyboard visibility changes
2. Utilize the decorator field for state management so that when the keyboard is visible, mark the decorator as dirty, let the page rebuild.
3. set hasTopBar field to false.

decorator -> ChangeNotifierProvider(create => Your provider) (Example here)

pageListBuilder(context) {
    final isKeyboardVisible = contex.watch<YourProvider>().isKeyboardVisible;
    return [
        WoltModalSheetPage(
            hasTopBarLayer: !isKeyboardVisible;
       );
    ]
}

================

Alternative way, easier way:

1. Use flutter_keyboard_visibility package to listen to the keyboard visibility changes.
2. Create your custom top bar and provide it to the WoltModalSheetPage
3. Wrap your topbar with KeyboardVisibilityBuilder

WoltModalSheetPage(
    topBar: KeyboardVisibilityBuilder(
        builder: (context, isKeyboardVisible) {
          return isKeyboardVisible ? SizedBox.shrink() : MyCustomTopBar();
        }
    ),
)

[basemosama]

For the first solution unfortunately I am currently using getx as state management not provider so I can't use the concept of context.watch to listen to keyboard visibility in PageBuilder.

For the second one I think it's the better solution but there's a problem: When returning Sizedbox.shrink() for top bar, the top bar overlay is still visible. I can only hide the top bar overlay when passing hasTopLayer:false Here is a screenshot of how it looks

[ulusoyca]

@basemosama What if you set isTopBarLayerAlwaysVisible to true when using keyboard visibility builder?

WoltModalSheetPage(
    isTopBarLayerAlwaysVisible: true,
    topBar: KeyboardVisibilityBuilder(
        builder: (context, isKeyboardVisible) {
          return isKeyboardVisible ? SizedBox.shrink() : MyCustomTopBar();
        }
    ),
)

[basemosama]

Still the same To hide the top layer i have to change hasTopLayer:false and not pass any widget for top bar.