How to create a custom reset password screen for your FlutterFlow app?

Step 1: Setting up FlutterFlow project

To begin, set up a FlutterFlow project, if you don't have one already.

To do this,

• Visit the FlutterFlow website.
• Select "Login" from the top-right corner.
• Authenticate with Google or GitHub.
• After authentication, you'll land on the Projects page. Select "New Project" and then provide a name for your project.
• After creating the project, you will be redirected to the Editor page.

Step 2: Configuring User Authentication

You'll need to ensure that your app supports user authentication. To set this up:

• From the navigation bar on the left, select the second icon from the top titled "Backend."
• Now, go to the "Users" section and click the toggle button to enable it.
• Under the "User Actions" section, you can enable the "password reset" action by clicking the corresponding toggle button.

Step 3: Designing the Reset Password Screen

To create a new custom screen:

• Go to the Editor and click on the '+ ADD' button at the bottom of the navigation bar.
• Now choose 'Screen' from the sidebar on the right side.
• Name your screen and confirm by clicking the 'Create' button.
• Now you can start designing your screen by dragging and dropping the needed widgets from the widget panel on the right.

For reset password screen, you might need:

• A text widget to provide a title.
• Two TextField widgets for new password and confirm new password.
• A button to submit the request.

Configure each widget according to your needs by clicking on it and changing its properties from the panel on the right side.

Step 4: Adding Functionality to Reset Password Button

To create a workflow for the 'Reset Password' button:

• Select the button widget and go to the 'Interaction' section from the panel on the right.
• Click on '+ Add button tap' and select 'Backend action' from the list of actions.
• From the new modal, select 'User' and then 'Reset password'.
• Now, select your TextField widgets appropriately in the 'New Password' and 'Confirm Password text fields.
• Save the changes.

Step 5: Connecting Reset Password Screen

Once your reset password screen is ready, you need to connect it to other parts of your app.

• Go to the login screen and select the 'Forget password?' text.
• Add a new interaction and this time select 'Navigate to' and target the 'Reset Password' screen that you have just created.
• Save the changes.

Step 6: Testing your App

Finally, press the 'Preview' button located at the top of the editor to see how your app is looking and working.

Remember, you can go back and forth tweaking things until they are performing to your satisfaction.

After all these steps, you should have a fully functional, custom 'Reset password' screen for your FlutterFlow app.