woltapp/wolt_modal_sheet

Transition stuttering on keyboard open / close

Opened this issue ยท 10 comments

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

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 :(

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.

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?

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 ๐Ÿค”

@kkoskenvirta Also this one: #210

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

@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),
          ],
        ),
      ),
    );

@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.

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 ๐Ÿ˜…

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.

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.