CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-html
Mihail Iliev
Mihail Iliev

Reputation: 313

Remove Flutter HTML widget's default padding

There is a default padding in flutter_html already when trying to parse text.

Below is the difference between using HTML(data: ...) and Text(...) widgets.

Top: HTML Widget, Bottom: Text Widget
Screenshot Reference

How can I remove the horizontal padding?

Upvotes: 16

Views: 9365

Answers (5)

manhtuan21
manhtuan21

Reputation: 3475

Html has updated, so I update accepted answer:

          "body": Style(
             padding: HtmlPaddings.zero,
             margin: Margins.zero,
           ),

Upvotes: 6

Nomanur
Nomanur

Reputation: 336

The below code has worked for me. The "body" tag removes the horizontal padding and the "p" tag works for vertical padding.

 Html(data: "Your_Data",
           style: {
           "body": Style(padding: HtmlPaddings.zero, margin: Margins.zero),
          "p": Style(padding: HtmlPaddings.zero, margin: Margins.zero),
         },
        )

Upvotes: 3

Sahil Sonawane
Sahil Sonawane

Reputation: 1396

The HTML or body is having a default padding and/or margin.

Try adding

"body": Style(margin: Margins.all(0), ...)

in the style parameter.

Upvotes: 44

Anatolii
Anatolii

Reputation: 61

The syntax of redeclaring Html defaults changed a bit for the current package version. Now it should be the following:

Html(
    style: {
        "body": Style(
            padding: HtmlPaddings.zero,
            margin: Margins.zero)
        },
    data: text,
    onLinkTap: (url, attributes, element) {
        _onLinkTap(url);
    }
)

Upvotes: 5

Sharon A
Sharon A

Reputation: 2675

Add inside the style parameter curly brackets.

 body : Style(margin: Margins.zero)

Upvotes: 1

Related Questions