GitBook: [#119] No subject

Author: blueneogeo

README.md

@@ -1,8 +1,8 @@
 # Introduction
 
-****[**Flutter-view**](https://flutter-view.io) is an open source tool that makes writing reactive [Flutter](http://flutter.io) layouts a breeze. It lets you use [Pug](http://pugjs.org) and [Sass](http://sass-lang.com) (or HTML and CSS if you prefer) to generate the Flutter Dart code that renders the views in your app.
+****[**Flutter-view**](https://flutter-view.io) is an open source tool that makes writing reactive [Flutter](http://flutter.io) layouts a breeze. It lets you use [Pug](http://pugjs.org) and [Sass](http://sass-lang.com) to generate the Flutter Dart code that renders the views in your app.
 
-You use it by running the `flutter-view` command in your terminal to let it monitor your project. When it detects changes in a Pug, HTML, Sass or CSS file, it automatically generates or updates a matching Dart file.
+You use it by running the `flutter-view` command in your terminal to let it monitor your project. When it detects changes in a Pug or Sass file, it automatically generates or updates a matching Dart file.
 
 Flutter-view 2.0.0 fully supports writing null-safe code in Dart 2.13 and up.
 
@@ -16,7 +16,7 @@ The state part comes into play when you make your view **reactive**. You can pas
 
 ## Creating a view
 
-A single flutter-view generates a Dart function that usually returns a widget tree. You can either use Pug or HTML:
+A single flutter-view in pug generates a Dart function that usually returns a widget tree.
 
 {% tabs %}
 {% tab title="Pug" %}
@@ -59,7 +59,7 @@ This generated function can be used like any other Dart code, and will return th
 
 ## Adding Styling
 
-You can add Sass/CSS to styles to your view. Flutter-view supports [CSS style properties](reference/css-properties.md) that convert into code. For our example, you can easily add a text [**color**](reference/css-properties.md#color-color), [**background color**](reference/css-properties.md#box-shadow-2), some [**font properties**](reference/css-properties.md#box-shadow-8), and add [**padding**](reference/css-properties.md#padding):
+You can add Sass to style your view. These styles get mixed with your pug to generate styled Dart code. Flutter-view supports [CSS style properties](reference/css-properties.md) that convert into code. For our example, you can easily add a text [**color**](reference/css-properties.md#color-color), [**background color**](reference/css-properties.md#box-shadow-2), some [**font properties**](reference/css-properties.md#box-shadow-8), and add [**padding**](reference/css-properties.md#padding):
 
 {% tabs %}
 {% tab title="Pug" %}

faq.md

@@ -8,9 +8,9 @@ Flutter-view is a tool for creating Flutter Dart code, meant to make it easier t
 
 Flutter-view itself is an [**npm**](https://www.npmjs.com) program that you run in a terminal window. It monitors your project's Pug, Sass, HTML and CSS files. When a file updates, it will create or update Dart files of the same name.
 
-You use the Pug or HTML files to define flutter-views, which flutter-view will convert into Flutter Widget layout functions in Dart. You can them use these Dart functions in your normal Flutter code.
+You use the Pug files to define flutter-views, which flutter-view will convert into Flutter Widget layout functions in Dart. You can them use these Dart functions in your normal Flutter code.
 
-You can use the Sass or CSS files to add style properties to the widget trees.
+You can use the Sass files to add style properties to the widget trees.
 
 For reactive programming, it uses the fantastic [**scoped\_model library**](https://pub.dartlang.org/packages/scoped\_model), in combination with a new pattern where the model is passed into a view, and rendered with a ReactiveWidget. This removes the need for ScopedModel and ScopedModelDescendant, and separating the concerns of state and view. However you are also free to use other patterns, such as streams.
 

get-started/vs-code-support.md

@@ -17,7 +17,7 @@ _Note: for this to work, the project link comments in flutter-view must be enabl
 
 Normally when you change Flutter Dart code in VSCode, the Dart extension knows you are running a Flutter project and triggers a hot reload in your connected device or emulator.
 
-When you change a Pug, Html, Sass or CSS file, flutter-view will update the Dart code in the background as you save. However the editor will not know that it needs to trigger a hot reload.
+When you change a Pug or Sass file, flutter-view will update the Dart code in the background as you save. However the editor will not know that it needs to trigger a hot reload.
 
 To enable this, we need to do two things:
 

guide/adding-content.md

@@ -6,14 +6,14 @@ In Flutter, widget trees are built by passing a child or children. Widget trees
 
 Flutter-views are optimised for building widget trees. Pug in particular is well suited for creating tree structures and moving parts around.
 
-The following example generates a Dart method **FooPage\(\)**, which returns a Scaffold with an AppBar, and a centralized greeting message. 
+The following example generates a Dart method **FooPage()**, which returns a Scaffold with an AppBar, and a centralized greeting message. 
 
 The Pug creates the layout, and the main.dart file uses this layout to render the app. This separation between layout and logic is fundamental to using flutter-view.
 
 {% tabs %}
 {% tab title="Pug" %}
 {% code title="foo-page.pug" %}
-```css
+```pug
 foo-page(flutter-view :greeting)
     scaffold
         app-bar(as='appBar')
@@ -76,7 +76,7 @@ To see how this works, compare the Pug and generated Dart code in this example:
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 container
     column
         row 
@@ -122,7 +122,7 @@ Flutter-view knows which classes generally need children instead of single child
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 container
     row first row!
     row second row!
@@ -161,13 +161,13 @@ You can [override the default wrapper](configuring-flutter-view.md#autowrapchild
 
 ### Calling dart factory constructors
 
-Some Flutter Dart classes may use factory constructors. For example, ButtonTheme has a [**ButtonTheme.bar\(\)**](https://docs.flutter.io/flutter/material/ButtonTheme/ButtonTheme.bar.html) constructor. 
+Some Flutter Dart classes may use factory constructors. For example, ButtonTheme has a [**ButtonTheme.bar()**](https://docs.flutter.io/flutter/material/ButtonTheme/ButtonTheme.bar.html) constructor. 
 
 To call the factory constructor instead of the default constructor, pass the constructor after the class name, separated with a colon.
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 button-theme:bar
     | some content here
 ```
@@ -190,7 +190,7 @@ There may be cases where flutter-view does not recognise your tag needs a childr
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 column
     array(as='children')
         row first!
@@ -226,7 +226,7 @@ To see how this works, compare the Pug and generated Dart code in this example:
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 container
     column(const)
         row 
@@ -263,7 +263,7 @@ For example:
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 banner(title='testing')
     | Hello world!
 ```
@@ -290,7 +290,7 @@ For example:
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 flat-button(:color='highlighted ? Colors.red : Colors.grey')
     | Click me!     
 ```
@@ -314,7 +314,7 @@ Some widgets take an unnamed parameter in their constructor. You can pass this u
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 container
     icon(:value='Icons.add')
     text(value='Hello world')
@@ -339,7 +339,7 @@ return Container(
 
 You may need to pass a parameter that has the name of a reserved keyword, such as value. You can bypass this problem by escaping your parameter with the ^ sign:
 
-```text
+```
 :^value='foo'
 ```
 
@@ -349,7 +349,7 @@ Sometimes what you want to pass is not just a single value, but a value that is
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 scaffold
     app-bar(as='appBar')
         container(as='title') Test App
@@ -383,7 +383,7 @@ You can create functions that return children using the [**function shortcut**](
 
 Passing a handler function or closure is no different than in Dart:
 
-```css
+```pug
 my-button(flutter-view :on-click[Function])
     flat-button(:on-pressed='onClick') Click me!
 ```
@@ -392,7 +392,7 @@ A common case is a closure without any parameters. In that case you can use the
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 my-button(flutter-view)
     flat-button(@on-pressed='print("Click!")') Click me!
 ```
@@ -416,7 +416,7 @@ Sometimes you need to pass an array of specific items to a parameter. In that ca
 
 {% tabs %}
 {% tab title="Pug" %}
-```css
+```pug
 custom-scroll-view
     array(as='slivers')
         sliver1
@@ -442,7 +442,7 @@ CustomScrollView(
 
 A nice Pug feature is that classes and ids are automatically converted into DIV tags. In flutter-view, they are automatically converted into [Container](https://docs.flutter.io/flutter/widgets/Container-class.html) widgets:
 
-```css
+```pug
 container hello world
 #greeting hello world
 .greeting hello world
@@ -459,4 +459,3 @@ Container(
 The classes and ids you use are forgotten after the conversion to Dart code. However, you do get automatic commenting, which will make it easier to read the generated code.
 
 The biggest benefit is however that you can use them to style your widgets.
-

guide/creating-a-new-view.md

@@ -1,6 +1,6 @@
 # Creating a new view
 
-To create a new view, create either an HTML or Pug page. It is common to put this page in its own directory with the same name, to group the page, styling and optional models together. A single page can contain many flutter-views.
+To create a new view, create a Pug file. It is common to put this file in its own directory with the same name, to group the page, styling and optional models together. A single page can contain many flutter-views.
 
 ## Importing Dart dependencies
 
@@ -25,12 +25,6 @@ To import additional packages in a Pug or HTML file, use the import tag with the
 import(package='flutter_view_widgets/flutter_view_widgets.dart')
 ```
 {% endtab %}
-
-{% tab title="HTML" %}
-```markup
-<import package='flutter_view_widgets/flutter_view_widgets.dart'/>
-```
-{% endtab %}
 {% endtabs %}
 
 To import files in a Pug or HTML file, use the import tag with the file parameter. The files are relative to the current file directory:
@@ -41,12 +35,6 @@ To import files in a Pug or HTML file, use the import tag with the file paramete
 import(file='../directory/test.dart')
 ```
 {% endtab %}
-
-{% tab title="HTML" %}
-```markup
-<import file='../directory/test.dart'/>
-```
-{% endtab %}
 {% endtabs %}
 
 ## Creating Flutter-views
@@ -55,19 +43,11 @@ A flutter-view is transformed into a Dart function. As such, you are just writin
 
 ### Method body
 
-The format of a flutter view in HTML is as follows:
+The format of a flutter view in Pug is as follows:
 
 {% tabs %}
-{% tab title="HTML" %}
-```markup
-<method-name flutter-view [optional parameters]>
-    ...method body...
-</method-name>
-```
-{% endtab %}
-
 {% tab title="Pug" %}
-```css
+```pug
 method-name(flutter-view [optional parameters])
     ...method body...
 ```
@@ -92,24 +72,16 @@ Parameters are defined as follows:
 
 `:parameter-name[type]?`
 
-The **\[type\]** and **?** are optional:
+The **\[type]** and **?** are optional:
 
 * The type becomes the type of the parameter in the Dart function. If omitted, it it is considered dynamic
 * By default, parameters you specify are required. Adding a **?** at the end indicates that they are optional.
 
 Example:
 
 {% tabs %}
-{% tab title="HTML" %}
-```markup
-<task-list-item flutter-view :model[TaskList] :task[Task] :done?>
-    ...widgets that show the task...
-</method-name>
-```
-{% endtab %}
-
 {% tab title="Pug" %}
-```css
+```pug
 task-list-item(flutter-view :task-model[TaskList] :task[Task] :done?)
     ...widgets that show the task...
 ```
@@ -124,5 +96,3 @@ TaskListItem({ @required TaskList taskModel, @required Task task, done) {
 }
 ```
 
-
-

guide/flow-control.md

@@ -8,7 +8,7 @@ This will only render the widget if the passed condition is true.
 
 {% tabs %}
 {% tab title="Pug" %}
-```c
+```pug
 user-profile(flutter-view :user[User])
     .user
         .name ${user.name}
@@ -47,7 +47,7 @@ A slot is a placeholder for a value. It will take the value of the first valid c
 
 {% tabs %}
 {% tab title="Pug" %}
-```c
+```pug
 wrapper(flutter-view :content[Widget])
     slot(:value='content').content
     .footer A footer
@@ -77,7 +77,7 @@ Slot can function as an if/else. In the next example you see either the .status
 
 {% tabs %}
 {% tab title="Pug" %}
-```c
+```pug
 tasks-page(flutter-view :tasks[List])
     scaffold
         slot(as='body')
@@ -119,7 +119,7 @@ By adding multiple children with if to a slot, you can also create a switch/case
 
 {% tabs %}
 {% tab title="Pug" %}
-```c
+```pug
 slot
     .apple(if='fruit=="Apple"')
     .pear(if='fruit=="Pear"')
@@ -136,7 +136,7 @@ Use **for** to repeat a widget for every value in a list. For every repetition,
 
 {% tabs %}
 {% tab title="Pug" %}
-```c
+```pug
 tasks-page(flutter-view :tasks[List])
     scaffold
         slot(as='body')