Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transition stuttering on keyboard open / close #222

Open
kkoskenvirta opened this issue Jun 4, 2024 · 10 comments
Open

Transition stuttering on keyboard open / close #222

kkoskenvirta opened this issue Jun 4, 2024 · 10 comments
Assignees
Labels
bug Something isn't working in triage

Comments

@kkoskenvirta
Copy link

Bug report

Describe the bug
The page transition stutters inconsistently while the keyboard is opened and the sheet is resized during the transition.
Sometimes the performance hit won't happen at all but certain times it is very consistent.
I have suspicions that playing youtube videos on the background increases this lag effect.

Steps to reproduce

Steps to reproduce the behaviour:

  1. Open a main sheet (found currently only on ios not sure of android)
  2. Navigate to a sheet with a autofocus TextField
  3. Stutter happens once in a while (In the demo it is clearly visible).

Expected behaviour

Smooth consistent transition.


Additional context

Demo video of the issue and normal behaviour at the end of the clip

RPReplay_Final1717502957.MOV

@kkoskenvirta kkoskenvirta added bug Something isn't working in triage labels Jun 4, 2024
@ulusoyca
Copy link
Collaborator

ulusoyca commented Jun 5, 2024

Unfortunately the worst part of this package is handling the keyboard animation smoothly. Flutter does not provide a soft keyboard animation listener. If anyone in the community knows a way to get soft keyboard visibility animation callbacks, I am more than happy to listen :(

@kkoskenvirta
Copy link
Author

Unfortunately the worst part of this package is handling the keyboard animation smoothly. Flutter does not provide a soft keyboard animation listener. If anyone in the community knows a way to get soft keyboard visibility animation callbacks, I am more than happy to listen :(

Thanks for the reply, I'll keep an eye out for if something comes up. i'll make sure to report it here. Atleast it's a nice thing to know that it's something that can occure for other people as well and not just some weird quirk that i've caused myself.

@kkoskenvirta
Copy link
Author

Also now that I more thought about it, Is the problem really even in the keyboard listening as it like most of the time does it perfectly? Also if I only close the keyboard the sheet animates down without issues. Or does this just require some more demanding resources to poll the state?

@ulusoyca
Copy link
Collaborator

ulusoyca commented Jun 5, 2024

Also now that I more thought about it, Is the problem really even in the keyboard listening as it like most of the time does it perfectly? Also if I only close the keyboard the sheet animates down without issues. Or does this just require some more demanding resources to poll the state?

I would really appreciate if you can dig this issue deeper. Here is some hints: #222 (comment)

In your recording, I could see that the page index switching, and building the page happens before the text field recieves the focus 🤔

@ulusoyca
Copy link
Collaborator

ulusoyca commented Jun 6, 2024

@kkoskenvirta Also this one: #210

If you can find a solution that removes the dependency to keyboard_visibility_listener it would be amazing!

@KlausJokisuo
Copy link

KlausJokisuo commented Jun 6, 2024

@ulusoyca

Could we just use viewInsets from MediaQuery to get keyboard height?

E.g

class Test extends StatelessWidget {
  const Test({super.key});

  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.viewInsetsOf(context).bottom;

    return SafeArea(
      child: Material(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            const TextField(),
            Text('This is above Keyboard. Current keyboard height: $height'),
            SizedBox(height: height),
          ],
        ),
      ),
    );

@ulusoyca
Copy link
Collaborator

ulusoyca commented Jun 6, 2024

@KlausJokisuo I tried it a lot and for some reason, in this setup it is always 0 regardless of the visibility. I would appreciate if you can also try.

@kkoskenvirta
Copy link
Author

Some stuff that I tried out was switching the clipBehaviour settings for the WoltModalSheet with WoltModalSheetTheme, as Clip.antiAliasWithSaveLayer is said to be demanding, as for my own usecase I think I don't require this because i'm not swapping any pages with images in them. Will see if this gives some results.. Anyway the rabbit hole with the TextField and keyboard performance stuff seems to go very deep that is very much out of the scope of this package 😅

@ulusoyca
Copy link
Collaborator

ulusoyca commented Jun 9, 2024

Some stuff that I tried out was switching the clipBehaviour settings for the WoltModalSheet with WoltModalSheetTheme, as Clip.antiAliasWithSaveLayer is said to be demanding, as for my own usecase I think I don't require this because i'm not swapping any pages with images in them. Will see if this gives some results.. Anyway the rabbit hole with the TextField and keyboard performance stuff seems to go very deep that is very much out of the scope of this package 😅

It sucks. I hope Flutter team improves this but it looks like low prio. I will bring this up and give feedback in our meetings with the Flutter team.

@kkoskenvirta
Copy link
Author

kkoskenvirta commented Jul 15, 2024

I happened to find the root cause for this issue. When closing WoltModalSheet with .pop(), GoRouter rebuilt the whole StatefulShellRoute and even the other hidden branches, leading to the animation lag. Not sure if there is anything this package can do to fix the rebuild issue as I think its more issue with GoRouter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working in triage
Projects
None yet
Development

No branches or pull requests

4 participants