Non-scrollable but expandable editor

[AverageChau]

Is there a way to let ZefyrEditor expand downward as user type?

For example, I can achieve this behavior with TextField Widget by wrap it in a LayoutBuilder and set the maxline parameter to null:

ListView(
  children: <Widget>[
    Container(
      color: Colors.grey,
      child: LayoutBuilder(builder: (context, size) {
        return TextField(
          controller: controller,
          maxLines: null,
        );
      }),
    ),
  ],
),

I tried the wrap ZefyrEditor in a LayoutBuilder, and the editor simply not showing. If it is not possible, and I want to fork and work on it, where should I start?

[pulyaevskiy]

This is not supported as of now, but is a good feature request.

If you would like to give it a try I'd recommend looking at ZefyrEditableText widget, which uses SingleChildScrollView to layout its children and allow scrolling (see _ZefyrEditableTextState.build()).

To allow expandable behavior we'd need to replace scrollable view with some our layout widget which is able to introspect into heights of its children. Not sure if Flutter comes with a widget that allows is, but a good starting point would be to look how Flutter's expandable text field implements this behavior and try to mimic it here. It could be a bit trickier with Zefyr though, since Flutter's editable text field backed by a single render object (RenderEditable I think), but Zefyr builds a collection of children, so we need to get heights of all children to compute the size of the editor.

[cgestes]

Investigating...

Removing the SingleChildScrollView and the Stack from EditableText seems to do what we want. (an extendable text zone)

[cgestes]

dirty version here: cgestes@d7a37bb

@pulyaevskiy I can submit a PR if you give me some direction about how you would like this to be integrated (new widget?), this codebase is still too new for me.. :D

[pulyaevskiy]

Feel free to submit a PR.

There are a couple more things that we'll need before we can land this change:

1. We need to expose a new property in ZefyrEditor which would allow to toggle this behavior.
2. ZefyrField currently exposes height field which directly conflicts with this behavior. We'll need to either change the way this field behaves or add a new field to express the new functionality.

I feel like for both points it would be a good idea to standardize on something like minHeight which, if set, removes scrollable behavior and sets minimum height constraint with ability to grow larger.

There is one edge case though: this way editor will grow indefinitely which may not be desirable. So maxHeight could come in handy as well. However, I'm not sure yet how to combine this with scrollable.

These are my initial thoughts. We can definitely just start from minHeight and see if we can get it to work first.

[cgestes]

sorry just noticed your comment now. I will try to submit a PR when I refactor my code. :)

[AverageChau]

@cgestes any update on this?

[cgestes]

I use this for now: cgestes@00ff6e6

I still didn't do a pass on it. It is not ready for a PR yet, but it works for me !

[stargazing-dino]

I think #50 and this issue are asking for the same thing. I'm also not sure having min/max height properties is the right way to go as that's usually done through an outer ConstrainedBox or SizedBox isn't it?

Also @cgestes any updates? I tried using your fork but I'm getting this error when pub tries to installs

Error on line 17, column 11: Invalid description in the "zefyr" pubspec on the "notus" dependency: "../notus" is a relative path, but this isn't a local pubspec.

   ╷

17 │     path: ../notus

   │           ^^^^^^^^

   ╵

It'd be nice to have a quick fix out there for anyone who wants it

[CanRau]

Hmm @Nolence could you maybe share more context of your pubspec.yaml?
I'm using @cgestes just fine.
I've my own fork already running where I copy pasted @cgestes changes in, though.
Initially had some issues getting the fork running, I can't remember exactly what went wrong 😅
So maybe more context of your code and what you're doing might bring it back 😉

[cgestes]

I'm also not sure having min/max height properties is the right way to go as that's usually done through an outer ConstrainedBox or SizedBox isn't it?
Same impression here.
@Nolence For the path in the pubspec just revert the change and it should fly.

[stargazing-dino]

I'm sorry for late reply, @CanRau I was just doing

zefyr:
  git:
    url: git://github.com/cgestes/zefyr.git
    path: packages/zefyr/

Yeah, I ended up doing the same thing as you and forked cgestes repo and just changed the notus dependency in the zefyr pubspec.yaml to notus: ^0.1.0. Looks to work now thanks

[cgestes]

(added an expandable parameter to make it configurable)

just do ZefyrEditor(expandable = true) to get an expandable editor.

[stargazing-dino]

Awesome work @cgestes! One thing, I tried your repo (similar to how I did above) both on dev and stable but I keep getting this:

Compiler message:
../../flutter/.pub-cache/git/zefyr-1182804cede55171f35a00cf7c917c2c2029c21a/packages/zefyr/lib/src/widgets/editable_box.dart:332:12: Error: The method 'getSelectionRebase' isn't defined for the class 'RenderEditableBox'.
 - 'RenderEditableBox' is from 'package:zefyr/src/widgets/editable_box.dart' ('../../flutter/.pub-cache/git/zefyr-1182804cede55171f35a00cf7c917c2c2029c21a/packages/zefyr/lib/src/widgets/editable_box.dart').
Try correcting the name to the name of an existing method, or defining a method named 'getSelectionRebase'.
    return getSelectionRebase(nodeBase, nodeExtent, documentSelection);
           ^^^^^^^^^^^^^^^^^^
../../flutter/.pub-cache/git/zefyr-1182804cede55171f35a00cf7c917c2c2029c21a/packages/zefyr/lib/src/widgets/editable_box.dart:339:12: Error: The method 'selectionIntersectsWith' isn't defined for the class 'RenderEditableBox'.
 - 'RenderEditableBox' is from 'package:zefyr/src/widgets/editable_box.dart' ('../../flutter/.pub-cache/git/zefyr-1182804cede55171f35a00cf7c917c2c2029c21a/packages/zefyr/lib/src/widgets/editable_box.dart').
Try correcting the name to the name of an existing method, or defining a method named 'selectionIntersectsWith'.
    return selectionIntersectsWith(base, extent, selection);
           ^^^^^^^^^^^^^^^^^^^^^^^

Any ideas?

[cgestes]

missing import. pushed the fix. (sorry I try to keep the master branch clean, but I never use it)

[pulyaevskiy]

This is now possible in 1.0-dev branch. Please see the example app for a demo. Closing.