tneotia/html-editor-enhanced

[QUESTION] How to remove dragbar

fynn-lemburg opened this issue ยท 11 comments

Hi,
Is there a way to remove this dragbar at the bottom of HtmlEditor
and disable scrolling?

Bildschirmfoto 2021-05-17 um 16 19 14

Yes, you can do controller.setFullscreen() to accomplish this. If you want it on editor startup use the onInit callback.

Closing for now, hope it helped!

I don't understand why does it not let the page scroll in Flutter web? Why it eats up all the scroll events even when setting a fix height, auto scroll or even full screen?

@Fauzdar1 unfortunately this is just how the webviews work in flutter. If I disable scrolling, then the user cannot scroll the content they have entered in the editor. Nothing I can do here, but I am considering creating a native version of the editor which should resolve these issues. This will take a while though

iBog commented

Yes, you can do controller.setFullscreen() to accomplish this. If you want it on editor startup use the onInit callback

Not a solution, it causes an ugly blink effect when bottom panel disappear in a second

The blink effect is likely the editor initializing, removing the dragbar should not have any blink effect.

iBog commented

Example, feeback dialog with default bottom dragbar
editor_with_line
with applied controller.setFullscreen() in Callbacks onInit:
editor_with_no_line

Hey @iBog, can you please share your code, as I've been using it in a dialog and previously, used it without a dialog, and I didn't, even now don't face this issue.

My code:

HtmlEditor(
 key: editorKey,
 controller: htmlEditorController,
 callbacks: Callbacks(onInit: () {
   htmlEditorController.setFullScreen();
 }),
 otherOptions: OtherOptions(height: 300),
 htmlEditorOptions: HtmlEditorOptions(
   autoAdjustHeight: false,
   hint: hint,
)),

@iBog I'll be honest I don't see much of a difference. Out of curiosity maybe delay the setFullscreen by a few seconds to see specifically what effect that command has on the editor flickering?

iBog commented

@Fauzdar1 @tneotia thanks for your attention!
I think the flickering reason not in setFullScreen method,
the most similar issue is in native webview: flutter/flutter#27198
Slowed demo with pure code from @Fauzdar1 above this post, plus
androidUseHybridComposition: false, to prevent Gl_surface crash,
emulator "Pixel 5 API 29 (Android 10)"
added 1 second Delay before apply setFullScreen

Can't attach file anymore ((
https://media.giphy.com/media/wGzI4TKyW2DHnuHG9y/giphy.gif

Also doesn't make sense reproduce this issue on 120Hz screen devices )

iBog commented

Show Dialog code:

showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
      barrierColor: Colors.black54,
      transitionDuration: const Duration(milliseconds: 100),
      pageBuilder: (context, anim1, anim2) {
        return Center(
          child: Container(
            width: width,
            height: height,
            child: StatefulBuilder(
              builder: (context, snapshot) {
                return Card(
                  color: backgroundColor,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0)),
                  child: HtmlEditor(....),
                );
              },
            ),
          ),
        );
      },
    );