Browse Source

updating quick start

Anatoly Pulyaevskiy 5 years ago
parent
commit
fde224e55c
5 changed files with 24 additions and 11 deletions
  1. BIN
      .DS_Store
  2. 2
    1
      .gitignore
  3. BIN
      assets/quick-start-rec-01.mp4
  4. BIN
      assets/quick-start-rec-02.gif
  5. 22
    10
      doc/quick-start.md

BIN
.DS_Store View File


+ 2
- 1
.gitignore View File

1
-.idea/
1
+.DS_Store
2
+.idea/

BIN
assets/quick-start-rec-01.mp4 View File


BIN
assets/quick-start-rec-02.gif View File


+ 22
- 10
doc/quick-start.md View File

150
 
150
 
151
 At this point we can already edit the document and apply styles, however if
151
 At this point we can already edit the document and apply styles, however if
152
 we navigate back from this page our changes will be lost. Let's fix this and
152
 we navigate back from this page our changes will be lost. Let's fix this and
153
-add a button which saves the document to device's file system.
153
+add a button which saves the document to the device's file system.
154
 
154
 
155
-First we need a function to save the document:
155
+First we need a function to save the document. Update `lib/src/editor_page.dart`
156
+as follows:
156
 
157
 
157
 ```dart
158
 ```dart
159
+// change: add these two lines to imports section at the top of the file
160
+import 'dart:convert'; // access to jsonEncode()
161
+import 'dart:io'; // access to File and Directory classes
162
+
158
 class EditorPageState extends State<EditorPage> {
163
 class EditorPageState extends State<EditorPage> {
159
 
164
 
160
-  // ... add after _loadDocument()
165
+  // change: add after _loadDocument()
161
 
166
 
162
   void _saveDocument(BuildContext context) {
167
   void _saveDocument(BuildContext context) {
163
     // Notus documents can be easily serialized to JSON by passing to
168
     // Notus documents can be easily serialized to JSON by passing to
164
-    // `jsonEncode` directly:
169
+    // `jsonEncode` directly
165
     final contents = jsonEncode(_controller.document);
170
     final contents = jsonEncode(_controller.document);
166
     // For this example we save our document to a temporary file.
171
     // For this example we save our document to a temporary file.
167
     final file = File(Directory.systemTemp.path + "/quick_start.json");
172
     final file = File(Directory.systemTemp.path + "/quick_start.json");
173
 }
178
 }
174
 ```
179
 ```
175
 
180
 
176
-> Notice that we pass `BuildContext` to `_saveDocument`. This is required
177
-> to get access to our page's `Scaffold` state, so that we can show a `SnackBar`.
181
+This function converts our document using `jsonEncode()` function and writes
182
+the result to a file `quick_start.json` in the system's temporary directory.
183
+
184
+Note that `File.writeAsString` is an asynchronous method and returns Dart's
185
+`Future`. This is why we register a completion callback with a call to
186
+`Future.then`.
187
+
188
+One more important bit here is that we pass `BuildContext` argument to
189
+`_saveDocument`. This is required to get access to our page's `Scaffold` state,
190
+so that we can show a `SnackBar`.
178
 
191
 
179
 Now we just need to add a button to the AppBar, so we need to modify `build`
192
 Now we just need to add a button to the AppBar, so we need to modify `build`
180
 method as follows:
193
 method as follows:
182
 ```dart
195
 ```dart
183
 class EditorPageState extends State<EditorPage> {
196
 class EditorPageState extends State<EditorPage> {
184
 
197
 
185
-  // ... replace build() method with following
198
+  // change: replace build() method with following
186
 
199
 
187
   @override
200
   @override
188
   Widget build(BuildContext context) {
201
   Widget build(BuildContext context) {
215
 ```
228
 ```
216
 
229
 
217
 We have to use `Builder` here for our icon button because we need access to
230
 We have to use `Builder` here for our icon button because we need access to
218
-build context within the scope of this page's Scaffold. Everything else here
219
-should be straightforward.
231
+build context which has access to `Scaffold` widget's state.
220
 
232
 
221
 Now we can reload our app, hit "Save" button and see the snack bar.
233
 Now we can reload our app, hit "Save" button and see the snack bar.
222
 
234
 
223
-<img src="https://github.com/memspace/zefyr/raw/gitbook/assets/quick-start-screen-02.png" width="375">
235
+<img src="https://github.com/memspace/zefyr/raw/gitbook/assets/quick-start-rec-02.gif" width="600">
224
 
236
 
225
 Since we now have this document saved to a file, let's update our
237
 Since we now have this document saved to a file, let's update our
226
 `_loadDocument` method to load saved file if it exists.
238
 `_loadDocument` method to load saved file if it exists.