Flutterflow Design

This is a step-by-step manual for how to set up Flutterflow  and...

This is a step-by-step manual for how to set up Flutterflow  and connect to  Firebases

  • 1. Click “Create New” in the Flutterflow Dashboard to create a project and add the same project used for the Firebase project.
  • 2. When you click on “Next Step,” you’ll see “Setup Firebase(optional)” and “Enter your Firebase project ID” in the textbox. [NB: On the Dashboard, go to “Project Overview” and click on settings. Then, go to “General” and copy and paste the project ID here.]
  • 3. After pasting the “Project ID,” select “Connect” and then select “Auto Generate Config Files.”
  • 4. Enable “Enable Authentication” and “Create User Collection,” then set the “initial Page- Entry page and logged in page” and click “Start Building” to begin designing.
  • 5. Choose “Homepage from the widget tree” and then click on “Page Title” and type in “Auth” in the left panel properties
  • 6. When the Add Widget icon appears, select “Widget” and drag it to the right side.
  • 7. Find the widget element “TabBar” and drag it into the design.
  • 8. Then select “Example 3” and delete with the delete key on the keyboard.
  • 9. After that, select “Example 1” and then “Example 2” and delete the “Tab Views or Content.”
  • 10. Rename “Example 1” to “Login” and “Example 2” to “Create Account” in the left-hand properties panel.
  • 11. Click “Login” and then go to the add element widget, where you can search for “Column” and add it. After that, under “Label Properties,” look for “TextField” and add it, renaming it “Email.” Add another “TextField” and rename it “Password” and then enable the password toggler under “Additional Properties” and enable “Password Field” and “icon size” “24” to enable the field.
  • 11. Next, find “Button,” add it, and rename it “login” under “button Text.”
  • 12. After copying the column, go to the “Create Account” tab and paste it in.
  • 13. Rename the “login button” to “Create Account” after that.
  • 14. After that, click on the Preview button at the top left of the to see your design.