Write Dart layouts using Pug or HTML:
import(package='flutter_view_widgets/flutter_view_widgets.dart')
import(package='counter/app-model.dart')
home-page(flutter-view :model)
scaffold
app-bar(as='appBar')
#title(as='title') Welcome
center(as='body')
reactive(watch='model')
.message You have pushed:
.counter ${model.counter} times
floating-action-button#btn(
as='floatingActionButton'
tooltip='Increment'
@on-pressed='model.incrementCounter()')
icon(:value='Icons.add')
And style your layouts using Sass or CSS:
.message
margin-top: 200
.counter
margin-top: 30
font-size: 25
From this, flutter-view will generate normal Dart code for you:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_view_widgets/flutter_view_widgets.dart';
import 'package:counter/app-model.dart';
Scaffold HomePage({ required model }) {
return Scaffold( // project://lib/pages/homepage/homepage.pug#6,2
appBar: AppBar( // project://lib/pages/homepage/homepage.pug#7,3
title:
//-- TITLE ----------------------------------------------------------
Container( // project://lib/pages/homepage/homepage.pug#8,4
child: Text(
'Welcome',
),
),
),
body: Center( // project://lib/pages/homepage/homepage.pug#10,3
child: ReactiveWidget( // project://lib/pages/homepage/homepage.pug#11,4
watch: model as Listenable,
builder: (context, $) {
return
//-- MESSAGE ----------------------------------------------------------
Container( // project://lib/pages/homepage/homepage.pug#12,5
child: Column(
children: __flatten([
Text(
'You have pushed:',
),
DefaultTextStyle.merge(
child:
//-- COUNTER ----------------------------------------------------------
Container( // project://lib/pages/homepage/homepage.pug#13,6
child: Text(
'${model.counter} times',
),
margin: EdgeInsets.only(top: 30),
),
style: TextStyle(
fontSize: 25,
),
)
]),
),
margin: EdgeInsets.only(top: 200),
);
},
),
),
floatingActionButton:
//-- BTN ----------------------------------------------------------
FloatingActionButton( // project://lib/pages/homepage/homepage.pug#15,3
tooltip: 'Increment',
onPressed: () { model.incrementCounter(); },
child: Icon( // project://lib/pages/homepage/homepage.pug#19,4
Icons.add,
),
),
);
}
__flatten(List list) {
return List.from(list.expand((item) {
return item is Iterable ? item : [item as Widget];
}));
}
Which you can use in your own Dart code:
import 'package:flutter/material.dart';
import 'package:counter/app-model.dart';
import 'package:counter/pages/homepage/homepage.dart';
void main() {
runApp(CounterApp());
}
class CounterApp extends StatefulWidget {
@override
createState() => _CounterAppState();
}
class _CounterAppState extends State {
/// Contains the state and functions of our application,
/// which we can pass down into fluttter-view functions
AppModel app;
@override
void initState() {
super.initState();
app = AppModel();
}
@override
build(context) => MaterialApp(
title: 'Counter App',
home: HomePage(model: app), // render the homepage, passing the model
);
}
