Animated menu button

[mikaelho]

This is an example creating an animated menu button, see README for details.

There is still something funky about the initial position animation of the menu button, not sure if it is this code or flet, I will try to create a minimal example next, but you can already see it with this.

[FeodorFitsner]

page.overlay is coming in the next release tomorrow. If you think this PR could be merged as is let me know.

[mikaelho]

Thanks, no hurry, will be nice to demonstrate the use of the overlay from the start.

Also, when I find time I want to fix the initial position animation issue.

[FeodorFitsner]

A new Flet version with page.overlay (and File picker - docs are coming) has been released: https://pypi.org/project/flet/0.1.55/ You may give it a try.

[mikaelho]

overlay works very nicely, this sample uses it now with an additional margin attribute to control the distance of the menu button from the corner.

As a bonus, something has changed and the issue I had with the first position animation not working is also gone.

I would be happy with a merge now.

[FeodorFitsner]

As page.overlay is technically a Stack you don't need a padding, but you can rather set bottom, left, top or right control props to stick it to the edge with padding, for example:

    page.overlay.append(
        FloatingActionButton(
            icon=icons.CHECK,
            bottom=10,
            right=10,
        )
    )

[mikaelho]

Yes, realized that, those are now automatically set within the component based on the selected corner and the margin value that defaults to 8 (iOS standard, have not checked what Material default gap is, would it be available from the theme?).

[OwenMcDonnell]

@mikaelho I noticed while running the demo that some happy clicking caused some menu items to go out of sync and remain in "open" state. Adding a self._lock = threading.lock() property and then surrounding the self.open setter like this...

@open.setter
def open(self, value: bool):
    was_open = self._open
    self._open = value
    with self._lock:
        if self._open != was_open:
            is_curved = self.direction.split()[0] == "curve"
            if self._open:
                for button in self.controls[:-1]:
                    button.content.disabled = False
                if is_curved:
                    self._open_animation_curve()
                else:
                    self._open_animation_linear()
            else:
                for button in self.controls[:-1]:
                    button.content.disabled = True
                if is_curved:
                    self._close_animation_curve()
                else:
                    self._close_animation_linear()

resolved the issue.