|
|
|
|
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.
|