updating quick start

doc/quick-start.md

@@ -1,16 +1,33 @@
 ## Quick Start
 
-Zefyr project consists of two packages:
+In this tutorial you'll create a simple Flutter app that supports rich text
+editing with Zefyr. What you'll learn:
 
-1. [zefyr](https://pub.dev/packages/zefyr) - Flutter package which provides all necessary UI widgets
-2. [notus](https://pub.dev/packages/notus) - package containing document model used by `zefyr` package. `notus` package is platform-agnostic and can be used outside of Flutter apps (web or server-side Dart projects).
+* How to create a new screen with Zefyr editor
+* Basic widget layout required by Zefyr editor
+* How to load and save documents using JSON serialization
+
+### Create a project
+
+If you haven't installed Flutter yet then [install it first](https://flutter.dev/docs/get-started/install).
+
+Create a new project using Terminal and `flutter create` command:
+
+```shell
+$ flutter create myapp
+$ cd myapp
+```
 
-### Installation
+For more methods of creating a project see [official documentation](https://flutter.dev/docs/get-started/test-drive).
 
-Before installing Zefyr make sure that you installed [Flutter](https://flutter.dev/docs/get-started/install)
-and created a [project](https://flutter.dev/docs/get-started/test-drive).
+### Add Zefyr to your project
 
-Add `zefyr` package as a dependency to `pubspec.yaml` of your project:
+Zefyr consists of two packages:
+
+1. [zefyr](https://pub.dev/packages/zefyr) - Flutter package which provides all necessary UI widgets
+2. [notus](https://pub.dev/packages/notus) - package containing document model used by `zefyr` package. `notus` package is platform-agnostic and can be used outside of Flutter apps (web or server-side Dart projects).
+
+Add `zefyr` package as a dependency to `pubspec.yaml` of your new project:
 
 ```yaml
 dependencies:
@@ -19,11 +36,14 @@ dependencies:
 
 And run `flutter packages get`, this installs both `zefyr` and `notus` packages.
 
-### Usage
+### Create editor page
 
 We start by creating a `StatefulWidget` that will be responsible for handling
 all the state and interactions with Zefyr. In this example we'll assume
-that there is dedicated editor page in our app:
+that there is dedicated editor page in our app.
+
+Create a new file `lib/src/editor_page.dart` and type in (or paste) the
+following:
 
 ```dart
 import 'package:flutter/material.dart';
@@ -79,8 +99,35 @@ class EditorPageState extends State<EditorPage> {
 ```
 
 In the above example we created a page with an AppBar and Zefyr editor in its
-body. We also initialize our editor with a simple one-line document. Here is how
-it might look when we run the app and navigate to editor page:
+body. We also initialize our editor with a simple one-line document.
+
+Now we need to wire it up with our app. Open `lib/main.dart` and replace
+autogenerated contents with this:
+
+```dart
+import 'package:flutter/material.dart';
+
+import 'src/editor_page.dart';
+
+void main() {
+  runApp(QuickStartApp());
+}
+
+class QuickStartApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Quick Start',
+      home: HomePage(),
+      routes: {
+        "/editor": (context) => EditorPage(),
+      },
+    );
+  }
+}
+```
+
+Here is how it might look when we run the app and navigate to editor page:
 
 <img src="https://github.com/memspace/zefyr/raw/gitbook/assets/quick-start-screen-01.png" width="375">