index.html

---
layout: default
title: Welcome to flutter-view
---

<section id="cover">
	<div class="cover-wrapper">
		<img class="cover-animation" src="https://github.com/flutter-view/website/raw/master/images/flutter-view-demo-anim.gif">
	</div>
</section>

<section id="payoff">
	<div class="card-content">
		<h1>Flutter-view is a command line tool that allows you to<br>
			lay out your Flutter apps faster, using Pug/HTML and Sass/CSS</h1>
	</div>
</section>

<section id="bulletpoints">
	<div class='card z-depth-3'>
		<div class="card-content">
			<div class="row">
				<div class='entry col s4'>
					<i class="fas fa-space-shuttle fa-3x"></i>
					<h2>Fast Layouts</h2>
					<p><a target="docs" href="https://docs.flutter-view.io/#creating-a-view">Set up Flutter layouts<br> with hot reload</a></p>
					<p><a target="docs" href="https://docs.flutter-view.io/get-started/usage">Watches and updates code<br> as you save your layouts</a></p>
					<p><a target="docs" href="https://docs.flutter-view.io/get-started/vs-code-support">Visual Studio code extension</a></p>
					<p><a target="docs" href="https://docs.flutter-view.io/guide/untitled">Use Pug mixins to create<br> layouts per platform</a></p>
					<p><a target="_blank" href="https://github.com/flutter-view/examples/blob/master/todolist/lib/pages/taskspage/taskspage.dart">Clean generated code</a></p>
				</div>
				<div class='entry col s4'>
					<i class="fab fa-css3 fa-3x"></i>
					<h2>Powerful Styling</h2>
					<p><a target="docs" href="https://docs.flutter-view.io/guide/styling-with-css#using-shortcut-properties-in-styles">Separate style from functionality</a></p>
					<p><a target="docs" href="https://docs.flutter-view.io/guide/styling-with-css#applying-styles-as-properties">Any CSS property is a widget property</a></p>
					<p><a target="_blank" href="http://sass-lang.com">Full access to Sass functionality</a></p>
					<p><a target="docs" href="https://docs.flutter-view.io/guide/styling-with-css#using-shortcut-properties-in-styles">CSS-like shortcut properties<br> that write Dart code for you</a></p>
				</div>
				<div class='entry col s4'>
					<i class="fas fa-layer-group fa-3x"></i>
					<h2>Clean MVC / MVVM</h2>
					<p><a target="docs" href="https://docs.flutter-view.io/#making-it-reactive">Create a clear separation<br> between model and views</a></p>
					<p><a target="_blank" href="https://pub.dartlang.org/packages/flutter_view_widgets">Optional Dart library with<br> reactive and layout tools</a></p>
					<p><a target="docs" href="https://docs.flutter-view.io/reference/tag-shortcuts#reactive">Special support for ScopedModel<br> using the <b>reactive</b> tag</a></p>
				</div>
			</div>
		</div>
	</div>
</section>

<section>
	<div class='card z-depth-3'>
		<div class="card-content">
			<div class="row">
				<h1>Write Dart layouts using Pug or HTML:</h1>
				<pre>
<code class="language-pug">
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')								
</code>
			</pre>
		</div>

		<div class="row">
			<h1>And style your layouts using Sass or CSS:</h1>
			<pre>
<code class="language-css">
.message
	margin-top: 200

.counter
	margin-top: 30
	font-size: 25
</code>
			</pre>
		</div>

		<div class="row">
			<h1>From this, flutter-view will generate normal Dart code for you:</h1>
			<pre>
<code class="language-dart">
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<Widget>.from(list.expand((item) {
    return item is Iterable ? item : [item as Widget];
  }));
}
</code>
			</pre>
		</div>

		<div class="row">
			<h1>Which you can use in your own Dart code:</h1>
			<pre>
<code class="language-dart">
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<CounterApp> {
	
	/// 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
		);
}	  
</code>
			</pre>
		</div>

		<h2>See the <a target="_blank" href="https://github.com/flutter-view/examples/tree/master/counter">full example</a>.</h2>

	</div>
</section>

<section id="try">
	<div class='card z-depth-3'>
		<div class="card-content">
			<h1>Ready to try flutter-view?</h1>
			<h2>Just like Flutter, it is free to use and open source.</h2>
			<a href="https://docs.flutter-view.io" class="get-started waves-effect waves-light btn-flat blue white-text">Get Started</a></li>
			<a href="https://github.com/flutter-view/examples" class="get-started waves-effect waves-light btn-flat blue white-text">See Examples</a></li>
		</div>
	</div>
</section>