One of the most requested features in Zefyr editor since its announcement is to allow using it in custom layouts, like forms containing multiple input fields.

New version of Zefyr 0.3 provides a way to achieve that and I’d like to go over some details in this post.

Breaking change

Implementing this feature required breaking existing contract. Luckily upgrading form previous versions is really straightforward:

Wrap any instance of ZefyrEditor with the new ZefyrScaffold widget.

And that’s it. Here is an example:

At the end of this post you’ll find a screen recording of how Zefyr looks inside of a form with multiple text fields.

Why ZefyrScaffold?

The main issue with embedding Zefyr prior to 0.3 was the toolbar. There was no way to detach it from the editor. This is because Zefyr was originally designed with an assumption that it occupies the entire screen.

My first attempt in fixing this was to try and move toolbar to Flutter’s Overlay. This adds dependency on an Overlay but is fairly safe because all Flutter apps use either MaterialApp or Navigator which provide Overlays one way or another.

Unfortunately, this didn’t work well for two main reasons:

Toolbar needs to interact with its editor and there are strict lifecycle dependencies between them. When editor and toolbar reside in two different parts of Flutter widget tree it becomes very hard to manage lifecycles. There is no guarantee which part will be disposed first. On the other hand, when toolbar is a descendant of Zefyr editor then everything works smoothly and toolbar always gets disposed first by the framework.

Flutter’s FocusScope layer refused to work and switch focus between the editor and toolbar when needed. This turned out to be a blocker.

ZefyrScaffold allows a simpler and more consistent layout. It has two responsibilities:

Provide a layout slot which can be used by Zefyr to show and hide its toolbar.

Allow users to define their own layouts for displaying Zefyr together with other widgets.

Here is a simple layout which implements a form with two regular text fields and a ZefyrField , between them (yes, Zefyr now comes with a new ZefyrField widget which integrates the editor with material design input decorations).

I hope that the above looks fairly straightforward. Note that you need to set height on ZefyrField otherwise it will try to expand to fill entire available space which may fail if used inside a Column or ListView .

And that’s it. Make sure to check out new version on Pub, leave your feedback here or on Github and give the repository a star if you liked it.

Here is promised screen recording: