Thread by @_luisportal

Rate your experience component (web animation)

Made with @flutterflow, quick tutorial 👇

#buildinpublic #uiux

Main structure:

We will need to create a component and in it, we will add a PageView widget and a Row with the controls (buttons).

Pro Ul tip:

The row that contains the buttons is basically to prevent the controls from moving when turning between pages with the PageView.

About the PageView Structure:

3 different pages that will be controlled by the PageView index through the buttons of the component.

Rate Experience Page:

Here is a widget that can only be used on the web (Mouse Region), with this we identify when the mouse is within a region, and we execute an action (animation).

If the user clic, we update the local component state (ex, mood).

Share feedback page:

There's not much to explain here. This textfield would be stored in variable.

Thank you gift page:

Very similar to the previous page. Here you can add an action to send an email to that user, or save the information in a database.

Let's talk about the controls.

Here are certain tricks in terms of visibility management, animations and statuses.

1st file: editor
2nd file: behavior

I have handled this using the indexes of the page view, as well as different icons and animations, also visibility of "back".

If you felt that this component has been useful, remember to share it with the community and follow me.

Thank you 🙏🏾

original design👇

@threadreaderapp unroll