Dynamic height of QuillHtmlEditor

[HasanAlqaisi]

Hi,

I have a use case where I want to show an html text in the editor, and that HTML is read-only in my app, but its content is dynamic (it can be changed but not from within the app).

The problem is that I can't tell the height of the content. And setting fixed height with isEnabled false won't show all content and won't scroll

So, is there a way to set a dynamic height, or make the widget scrollable when isEnabled is false.

EDIT: I noticed that only putting QuillHtmlEditor inside scrollable area will disable scrolling for QuillHtmlEditor content, how to get around that?

[the-airbender]

Hi @HasanAlqaisi

Could you please share a minimum reproducible steps and sample code to understand the issue better?

[HasanAlqaisi]

Hi @HasanAlqaisi

Could you please share a minimum reproducible steps and sample code to understand the issue better?

Sure! I made a simple example that shows when setting a specific height for QuillHtmlEditor inside scrollabe area, its content will not scroll (because there is the main scroll)

import 'package:flutter/material.dart';
import 'package:quill_html_dynamic_height/html.dart';
import 'package:quill_html_editor/quill_html_editor.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  late QuillEditorController controller;

  @override
  void initState() {
    super.initState();
    controller = QuillEditorController();
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: [
                SizedBox(
                  height: 200,
                  child: QuillHtmlEditor(
                    controller: controller,
                    minHeight: 200,
                    onEditorCreated: () => controller.setText(htmlText),
                  ),
                ),
                Container(height: 500, color: Colors.blue),
                Container(height: 500, color: Colors.green),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

[the-airbender]

Thank you! Will check it out.

[SauloSA]

I'm facing the same issue. In my case, the Rich Text canvas has a fixed size of 400px, even for large texts. This forces me to use scrolling, but a significant portion of the text remains hidden because the box is fixed.

I am using the Quill library to create a blog, similar to Medium.com, and it would be ideal if the canvas maintained a dynamic size proportional to the text. In this case, I imagine that the height of the Quill Rich Text could expand without restrictions until it reaches a maximum height set by the parent container.