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

Properties	Work	Default Value	Values
color	Sets the color of the text	black	Color
bgColor	Sets the background color	null	Color
margin	Gives margin around the text container	null	num
padding	Gives padding for the container holding the text	null	num
fontSize	Changes the font size of the heading and P widget	according to the widget	num
fontWeight	Changes the font weight of the heading and P widget	according to the widget 700 for headings, 400 for P	100, 200, 300, 400, 500, 600, 700, 800, 900
isLoading	If 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 false	false	bool
textAlign	Align your text with respect to the container holding it	'left'	'center', 'left', 'right', 'start', 'end', 'justify'
onClick	A function needs to be executed on taping	null	Function

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

Properties	Work	Default Value	Values
column	the column of the table	null	Array of Map Which Shoud Contains id and label
rows	THe rows of the table	null	Array 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

Properties	Work	Default Value	Values
src	The source of the image	null	String
width	Width of the image	default image width	double
height	Height of the image	default image height	double
margin	Gives margin for the container holding the image	0.0	double
size	Changes the size of the image	'contain'	'contain', 'cover', 'fill', 'fitHeight', 'fitWidth', 'none', 'scaleDown'
onClick	A function needs to be executed on taping	null	Function

GitHub

https://github.com/XenonLabz/html_widgets