Flutter-view 1.0.0 has been released! Read more

Flutter-view is a command line tool that allows you to
lay out your Flutter apps faster, using Pug/HTML and Sass/CSS

Write Dart layouts using Pug or HTML:


import(package='flutter_view_tools/flutter_view_tools.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_tools/flutter_view_tools.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
		);
}	  

			

See the full example.

Ready to try flutter-view?

Just like Flutter, it is free to use and open source.

Get Started See Examples