A Flutter package for rendering html pug template file as Flutter widgets.
Welcome to join us to improve this project!
To use this plugin, add flutter_html_render as a dependency in your pubspec.yaml file.
- install nodejs package
npm install -g flutter-render
-
create views folder in project root directory
-
create views folder in assets
-
open terminal and excute cmd
flutter-render --dir views --out assets/views -
add output views folder in pubspec.yaml
Column
Text(text="Hello World")
ListView(padding=[1,2,3,4])
each item in list
Text(text=item.text)
HtmlRender render;
Future<String> loadAsset() async {
return await rootBundle.loadString('assets/views/main.pug.json');
}
_hotReload(){
loadAsset().then((fileStr){
setState(() {
render = HtmlRender(fileStr);
});
});
}
@override
void initState() {
super.initState();
loadAsset().then((fileStr){
setState(() {
render = HtmlRender(fileStr);
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: render?.toWidget({"list":[{"text":"1"},{"text":"2"}]})
),
floatingActionButton: FloatingActionButton(
onPressed: _hotReload,
child: Icon(Icons.refresh),
),
);
}
tips:Style Tag will be added soon!
Column(verticalDirection="down")
Tag
Tag
...
Row(verticalDirection="down")
Tag
Tag
...
Container(width=160 height=100 alignment="topCenter" margin=[top,right,bottom,left] padding=[top,right,bottom,left])
Tag ## only one child is allowed
ListView(padding=[top,right,bottom,left])
each row in list
...
ListView(padding=[top,right,bottom,left])
Tag
Tag
...