Browse Source

updating quick start

Anatoly Pulyaevskiy 5 years ago
parent
commit
0d378c6201
1 changed files with 58 additions and 11 deletions
  1. 58
    11
      doc/quick-start.md

+ 58
- 11
doc/quick-start.md View File

1
 ## Quick Start
1
 ## Quick Start
2
 
2
 
3
-Zefyr project consists of two packages:
3
+In this tutorial you'll create a simple Flutter app that supports rich text
4
+editing with Zefyr. What you'll learn:
4
 
5
 
5
-1. [zefyr](https://pub.dev/packages/zefyr) - Flutter package which provides all necessary UI widgets
6
-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).
6
+* How to create a new screen with Zefyr editor
7
+* Basic widget layout required by Zefyr editor
8
+* How to load and save documents using JSON serialization
9
+
10
+### Create a project
11
+
12
+If you haven't installed Flutter yet then [install it first](https://flutter.dev/docs/get-started/install).
13
+
14
+Create a new project using Terminal and `flutter create` command:
15
+
16
+```shell
17
+$ flutter create myapp
18
+$ cd myapp
19
+```
7
 
20
 
8
-### Installation
21
+For more methods of creating a project see [official documentation](https://flutter.dev/docs/get-started/test-drive).
9
 
22
 
10
-Before installing Zefyr make sure that you installed [Flutter](https://flutter.dev/docs/get-started/install)
11
-and created a [project](https://flutter.dev/docs/get-started/test-drive).
23
+### Add Zefyr to your project
12
 
24
 
13
-Add `zefyr` package as a dependency to `pubspec.yaml` of your project:
25
+Zefyr consists of two packages:
26
+
27
+1. [zefyr](https://pub.dev/packages/zefyr) - Flutter package which provides all necessary UI widgets
28
+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).
29
+
30
+Add `zefyr` package as a dependency to `pubspec.yaml` of your new project:
14
 
31
 
15
 ```yaml
32
 ```yaml
16
 dependencies:
33
 dependencies:
19
 
36
 
20
 And run `flutter packages get`, this installs both `zefyr` and `notus` packages.
37
 And run `flutter packages get`, this installs both `zefyr` and `notus` packages.
21
 
38
 
22
-### Usage
39
+### Create editor page
23
 
40
 
24
 We start by creating a `StatefulWidget` that will be responsible for handling
41
 We start by creating a `StatefulWidget` that will be responsible for handling
25
 all the state and interactions with Zefyr. In this example we'll assume
42
 all the state and interactions with Zefyr. In this example we'll assume
26
-that there is dedicated editor page in our app:
43
+that there is dedicated editor page in our app.
44
+
45
+Create a new file `lib/src/editor_page.dart` and type in (or paste) the
46
+following:
27
 
47
 
28
 ```dart
48
 ```dart
29
 import 'package:flutter/material.dart';
49
 import 'package:flutter/material.dart';
79
 ```
99
 ```
80
 
100
 
81
 In the above example we created a page with an AppBar and Zefyr editor in its
101
 In the above example we created a page with an AppBar and Zefyr editor in its
82
-body. We also initialize our editor with a simple one-line document. Here is how
83
-it might look when we run the app and navigate to editor page:
102
+body. We also initialize our editor with a simple one-line document.
103
+
104
+Now we need to wire it up with our app. Open `lib/main.dart` and replace
105
+autogenerated contents with this:
106
+
107
+```dart
108
+import 'package:flutter/material.dart';
109
+
110
+import 'src/editor_page.dart';
111
+
112
+void main() {
113
+  runApp(QuickStartApp());
114
+}
115
+
116
+class QuickStartApp extends StatelessWidget {
117
+  @override
118
+  Widget build(BuildContext context) {
119
+    return MaterialApp(
120
+      title: 'Quick Start',
121
+      home: HomePage(),
122
+      routes: {
123
+        "/editor": (context) => EditorPage(),
124
+      },
125
+    );
126
+  }
127
+}
128
+```
129
+
130
+Here is how it might look when we run the app and navigate to editor page:
84
 
131
 
85
 <img src="https://github.com/memspace/zefyr/raw/gitbook/assets/quick-start-screen-01.png" width="375">
132
 <img src="https://github.com/memspace/zefyr/raw/gitbook/assets/quick-start-screen-01.png" width="375">
86
 
133