html_widgets 0.0.1+1
html_widgets: ^0.0.1+1 copied to clipboard

A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps.

html_widgets #

A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps.

Text Widgets #

*text property is required for all the text widgets. #

h1 #

...
h1(
    text: "This is an h1 widget",
    ...
)
...

#

h2 #

...
h2(
    text: "This is an h1 widget",
    color:Colors.red,
    ...
)
...

#

h3 #

...
h3(
    text: "This is an h3 widget",
    margin:20,
    ...
)
...

#

h4 #

...
h4(
    text: "This is an h4 widget",
    ...
)
...

#

h5 #

...
h5(
    text: "This is an h5 widget",
    ...
)
...

#

h6 #

...
h6(
    text: "This is an h6 widget",
    ...
)
...

#

P #

...
P(
    text: "This is an h6 widget",
    ...
)
...

There are several properties you can pass to customize the heading widgets and paragraph widget

api reference #

PropertiesWorkDefault ValueValues
colorSets the color of the textblackColor
bgColorSets the background colornullColor
marginGives margin around the text containernullnum
paddingGives padding for the container holding the textnullnum
fontSizeChanges the font size of the heading and P widgetaccording to the widgetnum
fontWeightChanges the font weight of the heading and P widgetaccording to the widget 700 for headings, 400 for P100, 200, 300, 400, 500, 600, 700, 800, 900
isLoadingIf you're loading something and want to show the text after the process you can set it to true. It will show a shimmer effect until it sets to falsefalsebool
textAlignAlign your text with respect to the container holding it'left''center', 'left', 'right', 'start', 'end', 'justify'
onClickA function needs to be executed on tapingnullFunction

#

HTMLTABLE #

If you want to use larger text with bold font weight, you can prefer to use HTMLTABLE()

...
HTMLTable(
    columns: [
            {'id': "name", 'label': 'Name'},
            {'id': "pos", 'label': 'Position'},
            {'id': "hours", 'label': 'Hours'},
            {'id': "salary", 'label': 'Salary'},
             ],

    rows: [
            {
                'name': "Willamson",
                'pos': "Manager",
                'hours': "10",
                'salary': "100k"
            },
            {
                'name': "Willamson",
                'pos': "Manager",
                'hours': "10",
                'salary': "100k"
            },
              
              ],
            ),
...

Both the rows and columns property are required

api reference #

PropertiesWorkDefault ValueValues
columnthe column of the tablenullArray of Map Which Shoud Contains id and label
rowsTHe rows of the tablenullArray of map which contains all the columns id.

#

HtmlImage #

If you want to use larger text with bold font weight, you can prefer to use HtmlImage()

...
   HtmlImage(
            src:"https://images.pexels.com/photos/3055008/pexels-photo-3055008.jpeg",
            onClick: () {
                print("Image Clicked !!");
            },
            size: "cover",
            margin: 10,
  ),
...

With HtmlImage you can use both the network and assert images in the same widget.

*the src property is required

api reference #

PropertiesWorkDefault ValueValues
srcThe source of the imagenullString
widthWidth of the imagedefault image widthdouble
heightHeight of the imagedefault image heightdouble
marginGives margin for the container holding the image0.0double
sizeChanges the size of the image'contain''contain', 'cover', 'fill', 'fitHeight', 'fitWidth', 'none', 'scaleDown'
onClickA function needs to be executed on tapingnullFunction
3
likes
110
pub points
40%
popularity

Publisher

xenonlabz.tech

A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, shimmer

More

Packages that depend on html_widgets