[BUG] Virtual keyboard does not push text field content up (Android)

[gerken-tss]

Describe the bug The desired behaviour on Android devices is when popping up the virtual keyboard that the text fields are pushed up so that the user sees what is being written. However as it seems with this Quill editor, the keyboard doesn't recognize it as an input and just overlaps it.

To Reproduce I was able to reproduce this behaviour on several physical devices like the Pixel 4a with Android 13. It is also reproducible in the emulator. In my case, I used this configuration:

App wise I did nothing special:

QuillHtmlEditor(
  controller: QuillEditorController(),
  minHeight: 1,
  hintTextStyle: const TextStyle(
    fontStyle: FontStyle.normal,
    fontSize: 16,
    color: Colors.black45,
  ),
  textStyle: const TextStyle(
    fontStyle: FontStyle.normal,
    fontSize: 16,
    color: Colors.black87,
  ),
);

Expected behavior Keyboard pushes text field up when being opened.

Screenshots / Videos

To illustrate the issue, I created a screen capture. Here you can see the difference between the Quill text field and a "usual" one:

https://github.com/the-airbender/quill_html_editor/assets/84321030/945653bf-7cad-4391-b055-22c07c72ad0a

Desktop (please complete the following information):

• OS: MacOS
• Version: 13.1 (Ventura)

Smartphone (please complete the following information):

• Device: Android devices like Pixel 4a or Emulator
• OS: Android
• Version: 13

Flutter Doctor

[✓] Flutter (Channel stable, 3.10.4, on macOS 13.1 22C65 darwin-arm64, locale
    en-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)

[zhengxiangke]

I have also encountered this problem. Have you solved it? Can you explain the solution

[zhengxiangke]

Describe the bug The desired behaviour on Android devices is when popping up the virtual keyboard that the text fields are pushed up so that the user sees what is being written. However as it seems with this Quill editor, the keyboard doesn't recognize it as an input and just overlaps it.

To Reproduce I was able to reproduce this behaviour on several physical devices like the Pixel 4a with Android 13. It is also reproducible in the emulator. In my case, I used this configuration:

App wise I did nothing special:

QuillHtmlEditor(
  controller: QuillEditorController(),
  minHeight: 1,
  hintTextStyle: const TextStyle(
    fontStyle: FontStyle.normal,
    fontSize: 16,
    color: Colors.black45,
  ),
  textStyle: const TextStyle(
    fontStyle: FontStyle.normal,
    fontSize: 16,
    color: Colors.black87,
  ),
);

Expected behavior Keyboard pushes text field up when being opened.

Screenshots / Videos

To illustrate the issue, I created a screen capture. Here you can see the difference between the Quill text field and a "usual" one:

Screen.Recording.2023-06-12.at.18.19.20.mov Desktop (please complete the following information):

• OS: MacOS
• Version: 13.1 (Ventura)

Smartphone (please complete the following information):

• Device: Android devices like Pixel 4a or Emulator
• OS: Android
• Version: 13

Flutter Doctor

[✓] Flutter (Channel stable, 3.10.4, on macOS 13.1 22C65 darwin-arm64, locale
    en-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)

I have also encountered this problem. Have you solved it? Can you explain the solution

[toknT]

Same problem , the virtual keyboard hide the text ,if you edit something and scroll up then keep the input point scrolled the screen.

[toknT]

Finally in my case add a padding solve this problem.

class QuillHtmlEditorEditorDemoPage extends HookConsumerWidget {
  final String body;
  const QuillHtmlEditorEditorDemoPage({
    super.key,
    required this.body,
  });
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final controller = useState(QuillEditorController());
    useEffect(() {
      return () {};
    }, []);
    return Container(
      padding:
          EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(7),
        border: Border.all(
          color: Colors.grey,
          width: 1,
        ),
      ),
      child: Column(
        children: [
          ToolBar(
            padding: const EdgeInsets.all(8),
            iconSize: 25,
            activeIconColor: Colors.greenAccent.shade400,
            controller: controller.value,
            crossAxisAlignment: WrapCrossAlignment.start,
            direction: Axis.horizontal,
          ),
          Expanded(
            child: QuillHtmlEditor(
              text: "<h1>Hello</h1>This is a quill html editor example",
              hintText: 'Hint text goes here',
              controller: controller.value,
              isEnabled: true,
              minHeight: 300,
              hintTextAlign: TextAlign.start,
              padding: const EdgeInsets.only(left: 10, top: 5),
              hintTextPadding: EdgeInsets.zero,
              onFocusChanged: (hasFocus) => print('has focus $hasFocus'),
              onTextChanged: (text) => print('widget text change $text'),
              onEditorCreated: () => print('Editor has been loaded'),
              onEditingComplete: (s) => print('Editing completed $s'),
              onEditorResized: (height) => print('Editor resized $height'),
              onSelectionChanged: (sel) => print('${sel.index},${sel.length}'),
              loadingBuilder: (context) {
                return const Center(
                    child: CircularProgressIndicator(
                  strokeWidth: 0.4,
                ));
              },
            ),
          )
        ],
      ),
    );
  }
}

https://stackoverflow.com/questions/53869078/how-to-move-bottomsheet-along-with-keyboard-which-has-textfieldautofocused-is-t