Provide documentation on how to work with JSON data

[rodydavis]

Using the example didn't help much for loading and saving data from JSON. Here is the code I used to get it working.

This will auto-insert text into Notus document for backwards compatibility of data stored as plain text and will handle errors too.

import 'package:flutter/material.dart';
import 'package:zefyr/zefyr.dart';
import 'dart:convert';

class MyWidget extends StatefulWidget {
  final String json;
  MyWidget({this.json});
  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  ZefyrController _controller;
  FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    // Create an empty document or load existing if you have one.
    // Here we create an empty document:
   var document = NotusDocument();
    if (widget.json != null) {
      try {
        var _json = json.decode(widget.json);
        document = NotusDocument.fromJson(_json);
      } catch (e) {
        print('Error Parsing JSON: $e');
        try {
          document.insert(0, widget.json);
        } catch (exp) {
          print('Error Inserting into Document: $exp');
        }
      }
    }
    _controller = new ZefyrController(document);
    _focusNode = new FocusNode();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Notes',
          style: TextStyle(
            color: globals.isDark ? Colors.white : Colors.black,
          ),
        ),
        backgroundColor: globals.isDark ? null : Colors.white,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.save),
            onPressed: () {
              NotusDocument _data = _controller.document;
              Navigator.pop(context, json.encode(_data.toJson()));
            },
          ),
        ],
      ),
      body: SafeArea(
        child: ZefyrEditor(
          autofocus: true,
          controller: _controller,
          focusNode: _focusNode,
        ),
      ),
    );
  }
}

[rodydavis]

I also added the Scaffold so you can push to the widget with a full-screen dialog to edit the text.

String notes = "";

Navigator.push(
 context,
  MaterialPageRoute(
     builder: (context) => MyWidget(
     json: notes,
  ),
  fullscreenDialog: true,
  ),
 ).then((result) {
  if (result != null) notes = result;
});

[pulyaevskiy]

Thanks for submitting this issue. I agree, docs and examples are pretty basic at this point. I'll make sure to add more information on how to work with JSON for the next release.

[rodydavis]

@pulyaevskiy awesome thanks! It works great by the way. Using it in an app already. There needs to be a better way in flutter just to view a Notus document and not edit it.

[pulyaevskiy]

There needs to be a better way in flutter just to view a Notus document and not edit it.

A simple way to achieve similar effect is to construct ZefyrEditor with enabled: false. This would hide all controls.

[rodydavis]

@pulyaevskiy awesome will do!