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 |
279 Dec 30, 2022
582 Jan 4, 2023
191 Dec 29, 2022
1 Feb 7, 2022
151 Dec 22, 2022
265 Dec 25, 2022
134 Dec 22, 2022
3 May 15, 2022
434 Jan 7, 2023
899 Dec 30, 2022