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

Text scrolls up and down on mobile devices when typing #69

Open
CodingTurtle2 opened this issue May 13, 2024 · 0 comments
Open

Text scrolls up and down on mobile devices when typing #69

CodingTurtle2 opened this issue May 13, 2024 · 0 comments

Comments

@CodingTurtle2
Copy link

I wanted to use a zefyreditor as a text field. I tried to eliminate scrolling as much as possible and also used a ZefyrTheme.
This all worked, however on mobile devices with a virtual keyboard I noticed that when the cursor writes in the last line, the text starts to move up and down (this was noticed on ios and android).
Later I found out that it is due to the height. If you change the height of the DefaultTextStyle, for example, the bug was no longer there, while the scrolling occurred again with smaller values. The more lines you have, the worse the scrolling becomes.

Here is a sample code that causes this bug on mobile devices:

class Widget2State extends State<Widget2> {
  final ZefyrController controller = ZefyrController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 50, left: 50),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(
                  width: 1.0,
                  color: Colors.black,
                ),
                borderRadius: BorderRadius.circular(25),
              ),
              width: 200,
              child: MediaQuery(
                data: const MediaQueryData(
                  textScaler: TextScaler.linear(1.5*0.89),
                ),
                child: ZefyrTheme(
                  data: ZefyrThemeData.fallback(context).copyWith(
                    paragraph: TextBlockTheme(
                      style: DefaultTextStyle.of(context).style.copyWith(
                        fontSize: 14.0,
                        ///Set this value to 2.0 to avoid the bug///
                        height: 1.0, 
                      ),
                      ///Set this value to const VerticalSpacing(top: 6.0, bottom: 10) to avoid the bug///
                      spacing: const VerticalSpacing.zero(),
                    ),
                  ),
                  child: ZefyrEditor(
                    controller: controller,
                    padding: EdgeInsets.zero,
                    focusNode: FocusNode(),
                    enableSuggestions: true,
                    autofocus: false,
                    scrollPhysics: const NeverScrollableScrollPhysics(),
                    scrollController: ScrollController(),
                    keyboardAppearance: Brightness.dark,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Here is a screenshot of the error (similar to the code):

video.mp4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant