how to use customtextstyle to change the font size and line height?

[ADLsourceCode]

Hello, How do I use customTextstyle to change the line height and font size of the text? Below is my code:-

 Widget shortDesc(String data)
  {
   return Html(
      data: data,
      //Optional parameters:
      padding: EdgeInsets.all(2.0),
      backgroundColor: Colors.white70,
      defaultTextStyle: TextStyle(fontFamily: 'serif'),
      linkStyle: const TextStyle(
        color: Colors.redAccent,
      ),
      onLinkTap: (url) {
        // open url in a webview
      },
      onImageTap: (src) {
        // Display the image in large form.
      },
    );
  }

[The-Redhat]

You can use the customTextStyle parameter. The function gives you the dom node, which represents the html widget. (Like customTextAlign in Readme)

[ADLsourceCode]

@The-Redhat Thanks for your reply,

the code says

"Undefined class 'dom'"

Below is my code:-

Widget shortDesc(String data)
  {
   return Html(
      data: data,
      //Optional parameters:
      padding: EdgeInsets.all(2.0),
      backgroundColor: Colors.white70,
      defaultTextStyle: TextStyle(fontFamily: 'serif'),
      linkStyle: const TextStyle(
        color: Colors.redAccent,
      ),
      onLinkTap: (url) {
        // open url in a webview
      },
      onImageTap: (src) {
        // Display the image in large form.
      },
       useRichText: false,
       customTextStyle : (dom node,textstyle) {
         textstyle=TextStyle(height: 1);
         if (node is dom.Element) {
           switch (node.localName) {
             case "article":
               return textstyle;
           }
         }
       }
    );
  }

[The-Redhat]

You need to import dom:

import 'package:html/dom.dart' as dom;

[ADLsourceCode]

@The-Redhat Thanks you so much..

the Code works..but the custom styles do not get seen ... basically, there is no change on the text even after implementing custom styles

[The-Redhat]

The code you posted doesn't really change the TextStyle, or am I wrong ?

[ADLsourceCode]

@The-Redhat I tried changing the line height using textstyle=TextStyle(height: 1); in the code..

[The-Redhat]

But isn't 1 the default ?

[ADLsourceCode]

@The-Redhat yes... even if i change it to 2 or 2.5 ... No effect is shown...

[The-Redhat]

Ah okay does it work with other elements ?

[ADLsourceCode]

@The-Redhat nope... I tried using with p tag also... It does not...even the font size does not change

[The-Redhat]

Ok .. I haven't used the customTextStyle, the owner of this package for help should be able to help you

[ADLsourceCode]

@Sub6Resources pls help

[The-Redhat]

One question: to what is useRichText set ? If set to false try set it to true.

[ADLsourceCode]

@The-Redhat no use... nothing changes

[ADLsourceCode]

@Sub6Resources pls help

[Sub6Resources]

@ADLsourceCode please post your current code so we can take a look and see if there's anything not quite right.

[Sub6Resources]

Here is the correct way to use customTextStyle:

customTextStyle: (dom.Node node, TextStyle baseStyle) {
         if (node is dom.Element) {
           switch (node.localName) {
             case "article":
               return baseStyle.merge(TextStyle(height: 2, fontSize: 32));
           }
         }
       },

Note that useRichText must be set to true for customTextStyle to have any effect.

[ADLsourceCode]

@Sub6Resources
it does not work...

Below is my code :-

Widget shortDesc(String data) {
    return Html(
      data: data,
      padding: EdgeInsets.all(2.0),
      backgroundColor: Colors.white70,
      //defaultTextStyle: TextStyle(fontFamily: 'serif'),
      onLinkTap: (url) {
        // open url in a webview
      },
      onImageTap: (src) {
        // Display the image in large form.
      },
      useRichText: true,
      customTextStyle: (dom.Node node, TextStyle baseStyle) {
        if (node is dom.Element) {
          switch (node.localName) {
            case "p":
              return baseStyle.merge(TextStyle(height: 2, fontSize: 20));
          }
        }
      },
    );

 Container(
                      margin: EdgeInsets.only(top: 10),
                      width: size.width * 0.85,
                      child: shortDesc("""<h2>Short Desc of the book</h2>
                    <p>asdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadf
                     <ul>
                      <li>Coffee</li>
                       <li>Tea</li>
                      <li>Milk</li>
                      </ul> 
                    <p>slfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollView<b>asdadadadadadfslfsfsflsksd</b>sksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNeste</p><p>dScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScro</p>
                    <p>llViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrollViewasdadadadadadfslfsfsflsksdsksdfsNestedScrw</p>
                    """))

[Sub6Resources]

Hmm, this is odd. I'm able to replicate the issue, so I'll look into it.

[Sub6Resources]

I've identified the issue. A fix will be released asap.

[Sub6Resources]

A fix has been released in Version 0.10.4. The README now also contains example code for using customTextStyle. Thank you for your patience.

[ADLsourceCode]

@Sub6Resources It works... Thank you so much for your support.

@The-Redhat Thanks to you too.