Bug: hideBottomOnKeyboard just switch the visibility but doesn't free space

[rekire]

Describe the bug

I added a login into my introduction where I'm running out of space on smaller screens. The point is that when I set the flag the navigation is hidden, but is still allocating space. In my case the login button is cut off.

To Reproduce
Steps to reproduce the behavior:

1. Create a PageViewModel with two fields and a button.
2. On small devices like the iPhone 7 the login button is cut off

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone7
• OS: iOS 15.7.5
• Version 3.1.12

Additional context
Out of my view you should refactor the sizing of the elements. It is quiet complex to make it working with the flex weights.

Sample code

IntroductionScreen(
      key: onboardingKey,
      globalBackgroundColor: Colors.white,
      allowImplicitScrolling: true,
      hideBottomOnKeyboard: true,
      dotsFlex: 4,
      globalHeader: AppBar(
        title: Text(LocaleKeys.app_title.tr()),
      ),
      pages: [
        PageViewModel(
          title: LocaleKeys.onboarding_legal_title.tr(),
          bodyWidget: RichText(
            textAlign: TextAlign.center,
            text: TextSpan(
              style: pageInfoStyle,
              children: [...],
            ),
          ),
          image: SvgPicture.asset(
            'assets/image.svg',
            height: 300,
            semanticsLabel: LocaleKeys.imageDescription.tr(),
          ),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title: LocaleKeys.login_title.tr(),
          bodyWidget: const SizedBox.shrink(),
          footer: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: SingleChildScrollView(child: LoginWidget()),
            ),
          ),
          decoration: pageDecoration.copyWith(
            bodyFlex: 1,
            footerFlex: 5,
            imagePadding: EdgeInsets.zero,
            contentMargin: EdgeInsets.zero,
            pageMargin: EdgeInsets.zero,
            titlePadding: EdgeInsets.zero,
            descriptionPadding: EdgeInsets.zero,
            footerPadding: EdgeInsets.zero,
            footerFit: FlexFit.tight,
            fullScreen: true,
          ),
        ),
      ],
      onDone: () => login(),
      back: const Icon(Icons.arrow_back),
      skip: const Text('Skip', style: TextStyle(fontWeight: FontWeight.w600)),
      next: const Icon(Icons.arrow_forward),
      done: const Text('Login', style: TextStyle(fontWeight: FontWeight.w600)),
      curve: Curves.fastLinearToSlowEaseIn,
      dotsDecorator: const DotsDecorator(
        activeSize: Size(22, 10),
        activeShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(25)),
        ),
      ),
    );

[Pyozer]

The new version 3.1.13 allow to set a new parameter on PageViewModel.

You can try to set scrollViewKeyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag.
It should fix your issue.

[benedict1986]

Hi @Pyozer , I tried to add scrollViewKeyboardDismissBehavior but seems like it does not work. Here is my code

class CreatePageViewModel extends PageViewModel {
  CreatePageViewModel({required BuildContext context})
      : super(
          title: 'Create',
          useScrollView: true,
          bodyWidget: buildBodyWidget(context: context),
          decoration: const PageDecoration(
            pageMargin: EdgeInsets.only(bottom: 0),
            footerPadding: EdgeInsets.only(bottom: 0),
          ),
          scrollViewKeyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
        );
}

Can you please take a look and see what could be wrong? Thank you