TopBar Widget keeps being visible after Keyboard hides and modal shrinks again

[kamami]

I have a TextField in my modal. When unfocusing it, the topBar Widget is still visible and I can not scroll the sheet to make it disappear.

WoltModalSheetPage.withSingleChild(
        topBar: const Align(
          alignment: Alignment.centerLeft,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Text(
              "Account vervollständigen",
            ),
          ),
        ),
        pageTitle: const Padding(
          padding: EdgeInsets.all(_pagePadding),
          child: Text("Account vervollständigen",
              style: TextStyle(
                fontSize: 22,
                color: Colors.white,
              )),
        ),
        trailingNavBarWidget: NavbarButton(
            icon: Icons.close_rounded,
            onPressed: () {
              Navigator.of(context).pop();
            }),
        child: const InnerForm());

[ulusoyca]

Can you please share the recording? It is hard for me to figure out what the actual problem is. Thanks!

[kamami]

@ulusoyca Sure, here is a recording. As you can see the topBar title is not disappearing when the keyboard hides.

rpreplay-final1699955352_NJJ59X9w.mp4

[kamami]

Any idea or feedback?

[ulusoyca]

@kamami Thanks for your recording. @MbIXjkee is starting a revamp of the internals of the modal sheet that will most probably address this issue. We are also observing sämilar behavior when there is focus change. We will revisit this issue once we do some internal structure refactoring. I am very sorry for the delay, but hopefully in the end we will have a great package!

[kamami]

Just FYI: This issue still persists in v0.2.0. - I just upgraded and testet it.

[ulusoyca]

@kamami I am working on a fix for this. Meanwhile, can you do this:

1. Pass a scroll controller to WoltModalSheet page.
2. Assign a focus node to your text field
3. When the text field loses the focus, scroll some amount reverse direction.

WHY

When the text field gains focus, the page is scrolled due to push from the soft keyboard. However, when it loses the focus, it doesn't scroll back in the reverse direction.

[ulusoyca]

@kamami I checked this workaround and it works:

    final ScrollController scrollController = ScrollController();
    final keyboardVisibilityNotifier = ValueNotifier<bool?>(null);
    keyboardVisibilityNotifier.addListener(() {
      if (keyboardVisibilityNotifier.value == false) {
        scrollController.position.animateTo(
          0,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
        );
      }
    });
    return WoltModalSheetPage(
      scrollController: scrollController,
      stickyActionBar: KeyboardVisibilityBuilder(
            builder: (_ , bool isKeyboardVisible) {
              keyboardVisibilityNotifier.value = isKeyboardVisible;
...

[ulusoyca]

@kamami I am working on fix. Can you check this branch and see what you think? You only need to pass keyboard visibility notifier to page.

https://github.com/woltapp/wolt_modal_sheet/blob/fix-top-bar-visibility-when-keyboard-disappears/playground/lib/home/pages/sheet_page_with_text_field.dart#L22

[kamami]

I will work on this later the day. Will give it a try and provide feedback here! Thanks

[kamami]

I just gave it a try and switched to the suggested branch and installed flutter_keybord_visibility. Unfortunately it did not fix the issue. Did I miss anything? Here ist my Code:

class CompleteAccount {
  CompleteAccount._();

  static WoltModalSheetPage build(
    BuildContext context, {
    required ValueNotifier<int> pageIndexNotifier,
  }) {
    final keyboardVisibilityNotifier = ValueNotifier<bool?>(null);

    return WoltModalSheetPage(
        keyboardVisibilityNotifier: keyboardVisibilityNotifier,
        topBar: KeyboardVisibilityBuilder(builder: (_, bool isKeyboardVisible) {
          keyboardVisibilityNotifier.value = isKeyboardVisible;
          return const Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Text(
                "Registrierung abschließen",
              ),
            ),
          );
        }),
        pageTitle: const Padding(
          padding: EdgeInsets.all(_pagePadding),
          child: Text("Registrierung abschließen",
              style: TextStyle(
                fontSize: 22,
                color: Colors.white,
              )),
        ),
        trailingNavBarWidget: NavbarButton(
            icon: Icons.close_rounded,
            onPressed: () {
              Navigator.of(context, rootNavigator: true).pop();
            }),
        child: InnerForm(pageIndexNotifier: pageIndexNotifier));
  }
}

[ulusoyca]

I just pushed another change. It should work now 🙏🏻 Here is my recording:

Before	After
before_top_bar.mov	fixed_top_bar.mov

[ulusoyca]

Ok, my final push has even a better solution. The previous recording was scrolling to the top all the time even for long content. My final solution will repaint after closing the keyboard, so we won't need to scroll to top all the time. This took quite a while to find out the root cause. Thanks for bearing with me.

Short Content	Long Content
short_screen.mp4	long_scroll_content.mp4

[kamami]

What changes in the code need to be done to make the latest push working? Do I still need to add flutter_keybord_visibility?

[ulusoyca]

You only need to get the branch and provide keyboard visibility notifier as you did in previous. The rest should work. I am hoping to remove the dependency to the keyboard visibility notifier also in the branch but it will be after holidays.

[ulusoyca]

PR is ready!! #119 @kamami

[kamami]

Awesome!

[ulusoyca]

Merged #119

[ulusoyca]

@kamami We released 0.3.0 with this fix.