glynskyi / zefyrka

Soft and gentle rich text editing for Flutter applications
MIT License
110 stars 74 forks source link

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

Open CodingTurtle2 opened 5 months ago

CodingTurtle2 commented 5 months ago

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

https://github.com/glynskyi/zefyrka/assets/104490184/e6c355f6-ee99-42dd-a348-cb43b97cd2fa