GitBook: [#117] No subject

Author: blueneogeo

.gitbook/assets/Screen Shot 2018-11-28 at 4.37.33 PM.png

@@ -1,16 +1,18 @@
 # 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) (or HTML and CSS if you prefer) 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.
 
+Flutter-view 2.0.0 fully supports writing null-safe code in Dart 2.13 and up.
+
 ## Why views in Flutter
 
 In standard Flutter Dart code, the "state" of your application is mixed in with the presentation. This can make it hard to structure and scale your code.
 
 Flutter-view is about creating **views**, which are functions that return a widget tree for presenting something. These functions act a bit like components. Flutter-view uses **Pug** to make layouts more terse and **Sass** to let you style faster and more easily.
 
-The state part comes into play when you make your view **reactive**. You can pass models \(or streams\) into your views. When these models change, the views automatically adapt.
+The state part comes into play when you make your view **reactive**. You can pass models (or streams) into your views. When these models change, the views automatically adapt.
 
 ## Creating a view
 
@@ -116,7 +118,7 @@ You can also fully leverage both Pug and Sass mixin and function support, allowi
 
 ## Making it Reactive
 
-Flutter-view does not force you into any particular Reactive model. For example it works well with streams. However, it comes with native [ScopedModel ](https://pub.dartlang.org/packages/scoped_model)support and a [small Dart support library](https://pub.dartlang.org/packages/flutter_view_tools) for terse reactive coding:
+Flutter-view does not force you into any particular Reactive model. For example it works well with streams. However, it comes with native [ScopedModel ](https://pub.dartlang.org/packages/scoped\_model)support and a [small Dart support library](https://pub.dartlang.org/packages/flutter\_view\_tools) for terse reactive coding:
 
 {% tabs %}
 {% tab title="user.dart" %}
@@ -160,5 +162,4 @@ Widget Hello({user}) {
 {% endtab %}
 {% endtabs %}
 
-The view \(hello.pug\) takes a User \(user.dart\) as a parameter and watches it for changes. Now when we change the the user name and call  `user.notifyListeners()`,  the view will automatically update.
-
+The view (hello.pug) takes a User (user.dart) as a parameter and watches it for changes. Now when we change the the user name and call  `user.notifyListeners()`,  the view will automatically update.

.gitbook/assets/Screen Shot 2018-11-28 at 5.18.29 PM.png

@@ -12,17 +12,16 @@ You use the Pug or HTML files to define flutter-views, which flutter-view will c
 
 You can use the Sass or CSS 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.
+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.
 
 ## How stable and complete is it?
 
-Flutter-view is pretty much complete at this point. We have been using it at my company for half a year, and fixed many bugs and contributed features in the process. With the 1.0.0 release, it is stable, fast and fully documented.
+Flutter-view is pretty much complete at this point. We have been using it at my company for half a year, and fixed many bugs and contributed features in the process. With the 1.0.0 release, it was stable, fast and fully documented. With the 2.0.0 release, null-safety is supported as well.
 
 ## Is it free? How is it licensed?
 
-Flutter-view is completely free and open source, licensed throught the[ **BSD-3 open source license**](https://github.com/flutter-view/flutter-view/blob/master/LICENSE). Please enjoy!
+Flutter-view is completely free and open source, licensed through the[ **BSD-3 open source license**](https://github.com/flutter-view/flutter-view/blob/master/LICENSE). Please enjoy!
 
 ## Who built this and why?
 
 Flutter-view was created by Christian Vogel. I am a software developer and entrepreneur who loves new technology. I found Flutter to have a great developer experience, but missed the clear separations of concerns and patterns that I enjoyed in frameworks like Vue.js and React. With Flutter-view I scratched my own itch, was able to use it in my company, and hope it can also help you. If you encounter any issues or have suggestions, please post an [issue on Github](https://github.com/flutter-view/flutter-view/issues), or contact me on Twitter at [http://twitter.com/christianvogel](http://twitter.com/christianvogel).
-

.gitbook/assets/Screen Shot 2018-12-01 at 4.05.42 PM.png

@@ -4,21 +4,20 @@ Examples can help to show some good patterns for creating elegant apps. These ar
 
 ### [Testdrive](https://github.com/flutter-view/examples/tree/master/testdrive)
 
-![](../.gitbook/assets/screen-shot-2018-12-02-at-2.53.13-pm.png)
+![](<../.gitbook/assets/Screen Shot 2018-12-02 at 2.53.13 PM.png>)
 
 This is the **getting started project** as explained in the[ test drive chapter](test-drive.md) of the documentation. It shows a simple hello world using pug and sass.
 
 ### [Counter](https://github.com/flutter-view/examples/tree/master/counter)
 
-![](../.gitbook/assets/screen-shot-2018-12-03-at-12.16.29-am.png)
+![](<../.gitbook/assets/Screen Shot 2018-12-03 at 12.16.29 AM.png>)
 
-A flutter-view version of the Flutter starter project. It uses the **reactive** tag and the [flutter-view-tools library ](https://pub.dartlang.org/packages/flutter_view_tools)for responding and updating the count.
+A flutter-view version of the Flutter starter project. It uses the **reactive** tag and the [flutter-view-tools library ](https://pub.dartlang.org/packages/flutter\_view\_tools)for responding and updating the count.
 
 Instead of having the counter state in the widgets, it is kept in the application model, and the HomePage flutter-view listenes to the model and updates itself when the user presses the + button.
 
 ### [Todolist](https://github.com/flutter-view/examples/tree/master/todolist)
 
-![](../.gitbook/assets/screen-shot-2018-12-03-at-12.18.00-am.png)
-
-An example of how you can build a simple todo app using flutter-view and the [flutter-view-tools library](https://pub.dartlang.org/packages/flutter_view_tools). It separates the app model from the page model. This is a structure that can scale as your app grows and you add more pages. The [Writing Reactive code](../guide/writing-reactive-code.md) chapter builds this app step by step.
+![](<../.gitbook/assets/Screen Shot 2018-12-03 at 12.18.00 AM.png>)
 
+An example of how you can build a simple todo app using flutter-view and the [flutter-view-tools library](https://pub.dartlang.org/packages/flutter\_view\_tools). It separates the app model from the page model. This is a structure that can scale as your app grows and you add more pages. The [Writing Reactive code](../guide/writing-reactive-code.md) chapter builds this app step by step.

.gitbook/assets/Screen Shot 2018-12-02 at 2.53.13 PM.png

@@ -1,5 +1,7 @@
 # Install
 
+_Important: going from version 2.0.0 and forward, flutter-view supports Dart 2.13 and up, enforcing null-safety. This means **breaking changes**. If you have a legacy project, stay at a version below 2.0.0, in both flutter-view and the flutter-view-widgets library which has also been updated._
+
 ## Requirements
 
 Flutter-view is an npm project and requires a working [NodeJS](https://nodejs.org/en/) installation. Of course you should have a working Flutter install as well.
@@ -14,18 +16,20 @@ On a Mac add sudo:
 
 > `sudo npm install -g flutter-view`
 
+_Important: the modern version of flutter-view is for Dart 2.13 and higher, and support type safety. If you have an older project, install_ `flutter-view@1.0.3` _instead._
+
 _Note: you may need to add **--unsafe-perm** for things to work due to an_ [_issue with node-gyp_](https://github.com/nodejs/node-gyp/issues/454)
 
 To test your installation worked, type the flutter-view command in your Terminal or console:
 
-> `flutter-view`
+> `>> flutter-view`
 >
-> `flutter-view - flutter template code generator    
-> Converts html and css templates into Flutter view widget code.    
-> Please pass a directory to scan.    
-> flutter-view -h for help.`
+> `flutter-view - flutter template code generator`  \
+> `Converts html and css templates into Flutter view widget code.`  \
+> `Please pass a directory to scan.`  \
+> `flutter-view -h for help.`
 
-If you got the above text, your installation was succesfull.
+If you got the above text, your installation was successful.
 
 ## Installing flutter-view-widgets
 
@@ -35,11 +39,15 @@ Flutter-view has an optional Dart tooling library. It allows you to use the reac
 
 To install it, add the following dependency to your project **pubspec.yaml** file:
 
-> `flutter_view_widgets: ^1.0.6`
+> `flutter_view_widgets: ^2.0.0-dev.1`
+
+_Important: the modern version of flutter-view is for Dart 2.13 and higher, and support type safety. If you have an older project, use the following:_
+
+> `flutter_view_widgets: 1.0.6`
 
 Then perform a flutter packages get to pull in the new dependency.
 
-_Note: for the latest version, check the_ [_flutter-view-widgets pub page_](https://pub.dev/packages/flutter_view_widgets)_._
+_Note: for the latest version, check the_ [_flutter-view-widgets pub page_](https://pub.dev/packages/flutter\_view\_widgets)_._
 
 ### Importing the tools
 
@@ -50,4 +58,3 @@ To import the library in Dart:
 To import the library in a Pug file:
 
 `import(package='flutter_view_widgets/flutter_view_widgets.dart')`
-

.gitbook/assets/Screen Shot 2018-12-02 at 3.16.58 PM.png

@@ -18,13 +18,13 @@ Open the project in your favorite editor. [VS Code](https://code.visualstudio.co
 
 Try running the test project in an emulator to see if it all works.
 
-## Adding a screen using flutter-view 
+## Adding a screen using flutter-view 
 
 Now that we have a working project, let's create a flutter-view that shows a simple welcome screen.
 
 In the lib directory of your project, add a directory called "**screens**". In it create a directory "**homepage**". In the homepage directory, create a file named **homepage.pug**.
 
-![](../.gitbook/assets/screen-shot-2018-11-28-at-4.37.33-pm.png)
+![](<../.gitbook/assets/Screen Shot 2018-11-28 at 4.37.33 PM.png>)
 
 Now let's create our first flutter-view. Open **homepage.pug** and put in the following pug code:
 
@@ -78,15 +78,15 @@ Scaffold HomePage() {
 ```
 {% endcode %}
 
-You may notice the comments referring back to the Pug file. These can be turned off, but help the [VSCode flutter-view plugin](vs-code-support.md#linking-between-pug-and-generated-dart) \(and you\) easily navigate between the Pug file and the Dart file.
+You may notice the comments referring back to the Pug file. These can be turned off, but help the [VSCode flutter-view plugin](vs-code-support.md#linking-between-pug-and-generated-dart) (and you) easily navigate between the Pug file and the Dart file.
 
-Also, notice comments are created for **\#title** and **.greeting** ids and classes in the pug file. These can also be turned off if you wish.
+Also, notice comments are created for **#title** and **.greeting** ids and classes in the pug file. These can also be turned off if you wish.
 
 ## Using the new homepage
 
 A view is simply a Dart function that renders some widgets. This means you can use it in your application as any other Flutter function. Let's change **main.dart** to show our new homepage:
 
-At the top of main.dart, import our new dart file: 
+At the top of main.dart, import our new dart file:&#x20;
 
 > `import 'screens/homepage/homepage.dart';`
 
@@ -99,11 +99,11 @@ home: HomePage(),
 
 Now refresh your app, and you should see this:
 
-![](../.gitbook/assets/screen-shot-2018-11-28-at-5.18.29-pm.png)
+![](<../.gitbook/assets/Screen Shot 2018-11-28 at 5.18.29 PM.png>)
 
 ## Hot Reload
 
-One of the powerful features in Flutter is hot reload. You can do the same thing with flutter-view. 
+One of the powerful features in Flutter is hot reload. You can do the same thing with flutter-view.&#x20;
 
 Start flutter-view in watch mode in your project directory:
 
@@ -128,7 +128,7 @@ In the same directory as **homepage.pug**, create a new file called **homepage.s
 
 Press hot refresh in your emulator and you will now see the greeting styled:
 
-![](../.gitbook/assets/screen-shot-2018-12-02-at-3.16.58-pm.png)
+![](<../.gitbook/assets/Screen Shot 2018-12-02 at 3.16.58 PM.png>)
 
 Now let's add an image. We can choose to use a NetworkImage directly, or to use a background decoration on a container. To do the latter, we need to add the cover container for the image. Since we want to have the image and text to be centered together, we can wrap them in a [FittedBox](https://docs.flutter.io/flutter/widgets/FittedBox-class.html) widget. To do so, change **homepage.pug**:
 
@@ -158,7 +158,7 @@ Flutter-view has [shortcuts](../reference/css-properties.md) that recognise CSS-
 
 The result should look like this:
 
-![](../.gitbook/assets/screen-shot-2018-12-02-at-2.53.13-pm.png)
+![](<../.gitbook/assets/Screen Shot 2018-12-02 at 2.53.13 PM.png>)
 
 If you look at the generated **homepage.dart**, you will see how flutter-view took homepage.pug and homepage.sass and merged them:
 
@@ -222,4 +222,3 @@ Feel free to play around with some CSS styles to see effect. Some of the things
 * instead of a background image, give the **.cover** class a `background-color: blue`.
 
 Currently you need to press the hot refresh button in your emulator to see changes. In the next section we add Visual Studio Code support so this will happen immediately when you change your .pug or .sass file.
-

.gitbook/assets/Screen Shot 2018-12-03 at 12.16.29 AM.png

@@ -4,15 +4,14 @@ The flutter-view command is:
 
 > `flutter-view [options] <directory [, directory...]>`
 
-Flutter-view scans for Pug and HTML files in one or more directories. For it to work, you need to pass where your source code is. Normally this is the **lib** directory of your project. 
+Flutter-view scans for Pug and HTML files in one or more directories. For it to work, you need to pass where your source code is. Normally this is the **lib** directory of your project.&#x20;
 
 In almost every case, you want to go to your project directory and type:
 
 > `flutter-view -w lib`
 
-This will tell flutter-view to watch your lib directory, and keep watching \(-w\) for changes.
+This will tell flutter-view to watch your lib directory, and keep watching (-w) for changes.
 
 When flutter-view creates or updates Dart files, it will tell you:
 
-![](../.gitbook/assets/screen-shot-2018-12-04-at-12.36.39-am.png)
-
+![](<../.gitbook/assets/Screen Shot 2018-12-04 at 12.36.39 AM.png>)

.gitbook/assets/Screen Shot 2018-12-03 at 12.18.00 AM.png

@@ -11,7 +11,7 @@ Enabling linking between Pug and Dart will make it easier to see the effects of
 * the [**flutter-view extension**](https://marketplace.visualstudio.com/items?itemName=blueneogeo.flutter-view-vscode) lets you link from Pug to generated Dart
 * the [**project-links extension**](https://marketplace.visualstudio.com/items?itemName=KyleDavidE.vscode-project-links) lets you link from links in the generated Dart to the source Pug
 
-_Note: for this to work, the project link comments in flutter-view must be enabled \(default is on\)_
+_Note: for this to work, the project link comments in flutter-view must be enabled (default is on)_
 
 ## Enabling hot refresh for Pug and Sass files
 
@@ -26,7 +26,7 @@ To enable this, we need to do two things:
 
 ### Adding the hot reload commands
 
-After installing the extension, press `cmd+shift+P` to open the command palette in VSCode and pick the **Preferences: Open Settings \(JSON\)** command to open your settings.
+After installing the extension, press `cmd+shift+P` to open the command palette in VSCode and pick the **Preferences: Open Settings (JSON)** command to open your settings.
 
 In the **JSON settings** under either _Workspace settings_ or _User settings_, add the following extra configuration:
 
@@ -64,15 +64,14 @@ In the **JSON settings** under either _Workspace settings_ or _User settings_, a
 
 Your settings should like something like this:
 
-![](../.gitbook/assets/screen-shot-2018-12-01-at-4.05.42-pm.png)
+![](<../.gitbook/assets/Screen Shot 2018-12-01 at 4.05.42 PM.png>)
 
 Save your settings afterwards.
 
 ### Testing the hot reload
 
-Now try opening the test drive project from the previous chapter \(or your own flutter-view project\) and run it in the emulator.
+Now try opening the test drive project from the previous chapter (or your own flutter-view project) and run it in the emulator.
 
 Changing the Pug or Sass and saving it should now automatically make the changes visible in your running application.
 
 Congratulations, you are all ready to start making your flutter-view enabled Flutter app!
-