Height of CustomPaint in flutter

Question

I am buildig a CustomPaint widget to display text in a custom way, using ParagraphBuilder, named it myHtmlWidget.

My problem is how to determine height of widget before painting it? I tried to call ParagraphBuilder in constructor of MyHtmlPainter and measure height, but I don't have width there!

This is a section of my build tree:

Widget myHtmlWidget(List<dom.Element> spans, TextAlign ebookTextAlign) {
    var painter = MyHtmlPainter(spans, ebookTextAlign);
    return CustomPaint(
      painter: painter,
      child: Container(
        height: 550, // **** THIS IS THE PROBLEM, I WANT IT TO MATCH/FIT TO THE HEIGHT OF RENDERED TEXT
      ),
    );
  }

and this is MyHtmlPainter:

class MyHtmlPainter extends CustomPainter {
  List<dom.Element> spans;
  TextAlign ebookTextAlign;

  ui.Paragraph paragraph;

  MyHtmlPainter(this.spans, this.ebookTextAlign);

  @override
  void paint(Canvas canvas, Size size) {
    var pin = Offset(0, 0);
    // To create a paragraph of text, we use ParagraphBuilder.
    final ui.ParagraphBuilder builder = ui.ParagraphBuilder(
      ui.ParagraphStyle(
        textDirection: ui.TextDirection.rtl,
        textAlign: ebookTextAlign,
        fontSize: ebookMainTextSize,
      ),
    )
      ..pushStyle(ui.TextStyle(color: const ui.Color(0xFF000000)));

    spans.forEach((spn) {
      if (spn.localName == "p")
        builder.addText("\n");
      builder.addText(spn.text + " ");
    });
    builder.pop();

    paragraph = builder.build()

      ..layout(ui.ParagraphConstraints(width: size.width));
    canvas.drawParagraph(paragraph, pin);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return null;
  }
}

you want the width right? the layout builder gives you that width and based on the width you can call `Paragraph.layout()` method — pskink, Dec 30 '19 at 07:19
I want the height: I want to render text, measure it and find height, then set height of Cotainer — AVEbrahimi, Dec 30 '19 at 07:24
[Pragraph.height](https://api.flutter.dev/flutter/dart-ui/Paragraph/height.html) — pskink, Dec 30 '19 at 07:26
yes, but I have access to Paragraph.height after I render CustomPaint, how can I render two times, one for measure one for paint? — AVEbrahimi, Dec 30 '19 at 07:29
Yes maybe, but if I call Paragraph.layout outside painter I don't know the width, if I call inside then how I pass height to containing widget? if I call setState it will cause recursion. — AVEbrahimi, Dec 30 '19 at 07:58
you know the width from layout builder - see my first comment above — pskink, Dec 30 '19 at 08:00

Height of CustomPaint in flutter

0 Answers0